Webpack and babel: import issues

Issue:

SyntaxError: Unexpected token {
import merge from 'webpack-merge';


I use the command below and get this error message. I've read multiple issues about that on github and did what they suggested, but I still get this error message. So, .babelrc and command are:

Command:

cross-env NODE_ENV=production webpack -p --config webpack/client.prod.config.js


.babelrc:


"presets": [
["@babel/preset-env",
"targets":
"node": "current",
"browsers": ["last 2 versions"]

],
"@babel/preset-react"],
"plugins": [
"react-loadable/babel",
"@babel/plugin-syntax-dynamic-import",
["import-inspector",
"serverSideRequirePath": true
]
]



Suggested solution:
I inserted "@babel/plugin-syntax-dynamic-import" in .babelrc file, but it did not help.

Webpack config:
My webpack consists of two files: common and specific (either client or server, development or production). In that case I'll show only common.js and client.prod.config.js:

1. common.js

2. client.prod.config.js

As it can be seen, the problem is inside of client.prod.config.js file as I use import merge from '...'

@babel/plugin-syntax-dynamic-import

import("...")

src

webpack-merge

1 Answer
1

Ok so your main problem is that you are creating a webpack config but you are mixing in ES modules syntax. Since webpack is run from Node, no matter what version, ES modules will not work unless they are transpiled (using babel) to CommonJS (also, you cannot mix module.exports with import, it is either all ES5 or all ES modules).

webpack

ES modules

module.exports

import

The easiest solution for you is to convert your import statements to require and everything will work just like that :) Your .babelrc is of no use here, because it is only loaded once webpack kicks in and runs babel-loader on your source code.

import

require

.babelrc

webpack

babel-loader

const merge = require("webpack-merge");
const join = require("path");
// And so on...


Think of it like this: whenever you are configuring webpack - write everything in ES5.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.