CODEWITHSUNDEEP
node.jsnext.jsbabeljsnodemon
Roman Nozhenko
Roman Nozhenko

Reputation: 628

Node12/next9 SyntaxError: Cannot use import statement outside a module

I have been trying to run a project in debug mode for quite a long time and I get an import error, I have already studied a lot of information on this issue and decided to move along the path of setting up babel. The fact is that this project is working and everything started fine, but now I upgraded the version of node 10> 12, next 8> 9, went through all typescript errors, was able to build the build and tried to run it locally, but got an import error

Project: next v9, node v12

// package.json (shortcut):

{
   "name": "mysite",
   "version": "1.0.0",
   "main": "index.js",
   "description": "some",
   "private": true,
   "scripts": {
        "dev": "nodemon server/server.ts"
   },
   "dependencies": {
        ...
        "express": "^4.16.3",
        "node-sass": "^4.9.3",
        "next": "9.2.2",
        "react": "^16.8.4",
        ...  
   },
   "devDependencies": {
       "@babel/plugin-proposal-decorators": "^7.1.0",
       "@types/body-parser": "^1.17.0",
       "@types/connect-mongo": "^0.0.38",
       "@types/cookie-parser": "^1.4.1",
       "@types/debug": "^4.1.0",
       "@types/express": "^4.16.0",
       "@types/express-session": "^1.15.10",
       "@types/mongodb": "^3.1.4",
       "@types/mongoose": "^5.2.6",
       "@types/multer": "^1.3.7",
       "@types/node": "^10.7.1",
       "@types/passport": "^0.4.6",
       "@types/passport-local": "^1.0.33",
       "@types/react": "^16.4.11",
       "@types/react-dom": "^16.0.7",
       "@types/redux-form": "^7.4.7",
       "@types/set-value": "^2.0.0",
       "@types/shortid": "^0.0.29",
       "autoprefixer": "^9.4.3",
       "babel-cli": "^6.26.0",
       "babel-core": "^6.26.3",
       "babel-node": "^0.0.1-security",
       "babel-plugin-import": "^1.13.3",
       "babel-plugin-module-resolver": "^4.1.0",
       "babel-plugin-transform-class-properties": "^6.24.1",
       "babel-plugin-transform-decorators-legacy": "^1.3.5",
       "babel-plugin-wrap-in-js": "^1.1.1",
       "babel-preset-env": "^1.7.0",
       "css-purify-webpack-loader": "^1.0.1",
       "eslint": "^5.4.0",
       "eslint-plugin-react": "^7.11.1",
       "faker": "^4.1.0",
       "next-purgecss": "^3.0.1",
       "next-size": "^2.0.2",
       "optimize-css-assets-webpack-plugin": "^5.0.1",
       "purgecss-whitelister": "^2.3.1",
       "stylelint-config-recommended": "^2.1.0",
       "tailwindcss": "^0.7.4",
       "ts-node": "^7.0.1",
       "typescript": "^3.0.1",
       "webpack-pwa-manifest": "^4.0.0"
   }
}

// server.ts:

import bodyParser from 'body-parser';
... // other lib imports, config imports, middlevare, routes
import middlewareOAuth from './middlewareOAuth';
...
import authRoute from './routes/auth';
...
const app = next({ dev: config.dev });
app.prepare()
  .then(() => {
    const server = express();
    ...
    server.use() // connecting middleware, passports, routes and others

// babel.rc

{
"plugins": [
  [
    "module-resolver",
    {
      "root": ["."],
      "alias": {
        "app": "./app",
        "pages": "./pages",
        "server": "./server",
        "styles": "./styles",
        "wavesurfer.js": "./wavesurfer.js"
      },
      "extensions": [ ".wasm", ".mjs", ".js", ".jsx", ".json", ".ts", ".tsx" ],
      "cwd": "babelrc"
    }
  ],
  ["@babel/plugin-proposal-decorators", { "legacy": true }],
  "transform-class-properties",
  [
    "import",
    {
      "libraryName": "antd",
      "style": "css"
    }
  ]
],
"presets": [
  ["next/babel",
    {
      "preset-env": { "targets": { "node": "current" } }
    }
  ]
],
"ignore": []
}

When I use yarn dev command in console:

$ nodemon server/server.ts
[nodemon] 2.0.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): server/**/*.ts
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node --compiler-options '{"module":"commonjs"}' server/server.ts`
[nodemon] app crashed - waiting for file changes before starting...

When I want to see what kind of error occurred I use the command: ts-node server/server.ts and get an error =>

/home/roma/project/mysite/server/server.ts:1
import bodyParser from 'body-parser';
^^^^^^
SyntaxError: Cannot use import statement outside a module

What am I missing or not doing? Thanks!

Upvotes: 0

Views: 920

Answers (1)

Manny
Manny

Reputation: 389

Adding "type": "module" to package.json will tell Node you are using ES2015 modules, which should get rid of the error, but then you will need to tell Typescript to generate this type of module by setting "module": "es2015" instead of "commonjs" in tsconfig.json.

answered in: https://stackoverflow.com/a/60225870/16471349

Upvotes: 1

Related Questions