babel-loader: Unexpected token when using import()

I have enabled that plugin in .babelrc but still get the error. Any idea?

You’ll need to enable https://babeljs.io/docs/plugins/syntax-dynamic-import/ The import() syntax is still an experimental proposal, so you need to opt-in to Babel’s support for it.

@felixfbecker Turns out you need babel-plugin-dynamic-import-node It fixed the issue for me - run it in before you run tests. However, It will cause Webpack to create a single bundle, so make sure you only use that plugin for tests, and not for your build.

@felixfbecker, I just came across the very same issue and adding this plugin fixed it. Make sure you add the property “plugins”: [“syntax-dynamic-import”] like this:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "> 2%"]
      }
    }]
  ],
  "plugins": ["syntax-dynamic-import"]
}

I had the same problem. I tried @babel/plugin-syntax-dynamic-import and babel-plugin-dynamic-import-node but didn’t work. So after a couple of hours, I found out that the problem was my 2 configuration files (.babelrc and webpack.config.js). Those configuration files were merging and the result wasn’t the expected.

Solution: Handle your webpack and babel configuration in a single file. I did it on my webpack.config.js file as follows:

module.exports = {
    ...
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react"
                        ],
                        plugins: [
                            "@babel/plugin-syntax-dynamic-import"
                        ]
                    }
                }
    ...
};

@felixfbecker do you use SSR ?

It got solved for me when I changed the webpack’s file name from webpack.config.js to webpack.config.babel.js

issue still exists

webpack.dev.config

import { DEV_ENV } from './global_const';
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

error

/var/www/test/build/webpack.config.dev.js:11
import { DEV_ENV } from './global_const';
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:83:7)

any babels plugins do not help

  "plugins": [
    "transform-runtime",
    "syntax-dynamic-import" // OR     "@babel/plugin-syntax-dynamic-import"
  ],

@komali2 yep, it should. we’ll need a bit more info to debug though… can you create a new issue with your configs (or even better, a small repo that repros the issue)?

I am having this issue, none of the above solutions function / are ideal.

Does webpack dynamic importing work with babel?

// try this util i made to avoid issues related to dynamic imports with ssr rendering

export const importAsync = path => typeof System === "object" && typeof System.import === "function" ? System.import(`../${path}`) : null;

how to use?

import {importAsync} from "../../lib/import-async";
const Admin = () => importAsync('components/routes/admin');
console.log(<Admin />);

getting

Module build failed: TypeError: The plugin “dynamic-import-webpack” didn’t export a Plugin instance

.babelrc

{
	"plugins": ["dynamic-import-webpack"],
	"optional": ["es7.decorators", "es7.classProperties", "es7.objectRestSpread"]
}

dependencies:

"babel-core": "^6.26.0",  
"babel-loader": "^7.1.2",  
"babel-plugin-syntax-dynamic-import": "^6.18.0",  
"webpack": "^3.10.0",