webdevMerlion
webdevMerlion

Reputation: 11

babel v7 upgrade causing unexpected token import in files imported by related path and in plugin-transform-runtime

After upgrading to 7 none of the googled answers not working.

I have a project structure

package.json

 "scripts": {
    "start": "yarn dev:start",
    "restart": "touch src/shared/app.jsx",
    "dev:start": "cross-env BABEL_ENV=dev nodemon -e js,jsx --watch src/server --exec babel-node src/server",
    "dev:wds": "cross-env BABEL_ENV=dev webpack-dev-server --progress --info-verbosity verbose",
    "prod:build": "rimraf lib dist && babel src -d lib --ignore .test.js  && cross-env NODE_ENV=production webpack -p --progress --color --display-error-details",
    "prod:start": "cross-env NODE_ENV=production pm2 start lib/server && pm2 logs",
    "prod:stop": "pm2 delete server",
    "lint": "eslint src webpack.config.babel.js --ext .js,.jsx",
    "test": "yarn lint && flow && jest --coverage",
    "precommit": "yarn test",
    "prepush": "yarn test && yarn prod:build"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.0.0",
    "@babel/node": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-transform-modules-commonjs": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.8.3",
    "@gfx/zopfli": "^1.0.10",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.0.0",
    "babel-plugin-flow-react-proptypes": "^4.1.0",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-recharts": "^1.2.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.14",
    "babel-plugin-webpack-alias": "^2.1.2",
    "compression-webpack-plugin": "^2.0.0",
    "cross-env": "^5.2.0",
    "css-loader": "^0.28.5",
    "html-webpack-plugin": "^3.2.0",
    "isomorphic-style-loader": "^4.0.0",
    "jest": "^20.0.4",
    "lodash-webpack-plugin": "^0.11.5",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^4.22.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/runtime": "^7.3.4",
    "@babel/runtime-corejs3": "^7.4.3",
    "babel-plugin-transform-imports": "^1.5.0",
    "core-js": "^3.6.4",
    "webpack-spritesmith": "^0.4.1"
 }

babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": {
          "version": 3,
          "proposals": true
        },
        "debug": true
      }
   ],
   "@babel/preset-flow",
   "@babel/preset-react"
 ],
  "plugins": [
    "lodash",
    "flow-react-proptypes",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    [
      "transform-imports",
      {
        "react-router": {
          "transform": "react-router/${member}",
          "preventFullImport": true
        }
      }
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "helpers": true,
        "useESModules": true
      }
    ]
  ]
}

First babel doesn't transpile plugin-transform-runtime (or perhaps any file in node_modules)

After babel-node src/server Got an error Unexpeted token import

Second If i turn off plugin-transform-runtime, everything is fine, until babel meet a relative imported file and import in it

Every others import constructions don't lead to such errors

imported file causing error importing in it

Error just here

Whatever packages i've been installed, whatever config files neither .babelrc nor babel.config.json - not working, in babel 6 have no problems

Is it rooting or structure issues, or maybe config? Tried to re-install all packages, clearing cache. Same error

However, prod:build aka babel src -d lib is working fine, but webpack then crushed on same

\node_modules\@babel\runtime-corejs3\helpers\esm\defineProperty.js:1
(function (exports, require, module, __filename, __dirname) { import _Object$defineProperty from "../../core-js/object/define-property";
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at new Script (vm.js:51:7)
    at NativeCompileCache._moduleCompile (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\v8-compile-cache\v8-compile-cache.js:226:18)
    at Module._compile (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\v8-compile-cache\v8-compile-cache.js:172:36)
    at Module._compile (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (module.js:660:10)
    at Object.newLoader [as .js] (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\pirates\lib\index.js:104:7)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (C:\Users\marat.m\PhpstormProjects\b2b-node\webpack.config.babel.js:29:47)
    at Module._compile (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Module._compile (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (module.js:660:10)
    at Object.newLoader [as .js] (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\pirates\lib\index.js:104:7)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
    at Module.require (module.js:593:17)
    at require (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at WEBPACK_OPTIONS (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\webpack-cli\bin\convert-argv.js:133:13)
    at requireConfig (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\webpack-cli\bin\convert-argv.js:135:6)
    at C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\webpack-cli\bin\convert-argv.js:142:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\webpack-cli\bin\convert-argv.js:140:15)
    at yargs.parse (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\webpack-cli\bin\cli.js:241:39)
    at Object.parse (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\webpack-cli\node_modules\yargs\yargs.js:563:18)
    at C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\webpack-cli\bin\cli.js:219:8
    at Object.<anonymous> (C:\Users\marat.m\PhpstormProjects\b2b-node\node_modules\webpack-cli\bin\cli.js:538:3)

Upvotes: 1

Views: 518

Answers (0)

Related Questions