webpack SyntaxError: Cannot use import statement outside a module实战解决方案

2022-03-15

webpack打包配置，项目中js文件不能使用关键字import，报错：SyntaxError: Cannot use import statement outside a module……

import是ES6中的语法，webpack中配置babel，关键一点是正确写入presets对象，便可使用import了。

// babel.config.js

const presets = [
    ['@babel/preset-env'],
];
// package.json 

 "devDependencies": {
    "@babel/core": "^7.17.7",
    "@babel/preset-env": "^7.16.11",
    "@babel/register": "^7.17.7",
    "babel-loader": "^8.2.3",
   // ...
  }
// webpack.config.js

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            include: path.join(__dirname, 'src'),
            use: ['babel-loader']
        },
        // ...
    ],
    //...
}

完整的babel.config.js，参考：

module.exports = (api) => {
    api.cache(true);

    const presets = [
        ['@babel/preset-env'],

        // ...
    ];

    const plugins = [
    ];
    
    return {
        presets,
        plugins
    };
};
  • .babelrc 会覆盖 babel.config.js 的配置

还有其他很多解决方案，例如在package.json中添加属性{“type”: “module”}，这个要看具体项目环境，webpack版本，仅供参考。

{
    // ...
    "type": "module"
}

（版权归cpury.com所有，转载请注明出处。）

WEB开发