Unexpected token when using dynamic import instead System.import

Question

After rewriting all my dynamic System.import calls to import webpack compilation fails:

Module build failed: SyntaxError: (...)/dashboard.js: Unexpected token (7:4)

   5 | 
   6 | export default Promise.all([
>  7 |     import('charts')
     |     ^

My webpack.config.js:

module: 
{
  loaders: [
    {
      test:    /\.js$/,
      exclude: /node_modules/,
      loader:  'babel-loader'
    },
   (...)
}

.babelrc:

{
  "presets": ["es2015"],
  "plugins": ["syntax-dynamic-import", "transform-runtime"]
}

package.json:

  "devDependencies": {
    "autoprefixer": "~6.5.3",
    "babel": "^6.5.2",
    "babel-cli": "~6.18.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.18.0",      
    "node-sass": "^4.5.3",
    "noty": "~2.4.0",
    "path": "~0.12.7",
    "promise-polyfill": "~6.0.2",
    "resolve-url-loader": "~1.6.0",
    "sass-loader": "~4.0.2",
    "style-loader": "~0.13.1",
    "stylelint": "~7.6.0",
    "tag-it": "~2.0.0",
    "url-loader": "~0.5.7",
    "webpack": "^3.0.0",
    "webpack-dev-server": "~2.2.1",
    "webpack-uglify-js-plugin": "~1.1.9",
    "whatwg-fetch": "~2.0.2"
  },

Are you perhaps running the wrong version of Webpack? If you're running it via a CLI, perhaps you're using a globally-installed Webpack instead of the one listed in your `package.json`? Your Webpack config looks like one for 1.x, but your package says you're using 3.x. `1.x` will not work with your current Babel config. — loganfsmyth, Jun 30 '17 at 17:25
Good notice, I was running old webpack from global npm instance, but the core problem was with not found `.babelrc`. — van_folmert, Jul 03 '17 at 14:15

score 1 · Answer 1 · edited Jan 21 '19 at 08:10

1

Install this babel Plugin https://github.com/airbnb/babel-plugin-dynamic-import-node

in .babelrc
{
  "plugins": ["dynamic-import-node"]
}`

edited Jan 21 '19 at 08:10

shizhen

12,251
9
52
88

answered Jan 21 '19 at 07:30

neeraj-dixit27

2,812
2
15
6

score 0 · Accepted Answer · answered Jul 03 '17 at 14:15

0

Turned out my .babelrc was ignored, because this file (and webpack) was outside of my project's root directory. I fixed it by adding path to config file in webpack.config.js to babel-loader:

{
    test:    /\.js$/,
    exclude: /node_modules/,
    use:     'babel-loader?extends='+path.resolve('./.babelrc')
}

answered Jul 03 '17 at 14:15

van_folmert

4,257
10
44
89

If the config is outside the root, you might as well just put the config in your Webpack config directly. – loganfsmyth Jul 03 '17 at 17:44

score -1 · Answer 3 · answered Jun 30 '17 at 16:27

-1

You have to import a transformer too like dynamic-import-webpack. These plugins already include the required syntax as a dependency, so your config can be simply:

{
  "presets": ["es2015"],
  "plugins": ["dynamic-import-webpack", "transform-runtime"]
}

answered Jun 30 '17 at 16:27

Tamas Hegedus

28,755
12
63
97

That plugin is only needed for Webpack 1.x. v2 and v3 support `import()` in their own. – loganfsmyth Jun 30 '17 at 17:21

Unexpected token when using dynamic import instead System.import

3 Answers3