时间戳

首页 > 解决方案 > 如何在 NextJS 应用程序中使用 Babel 从 node_modules 转换导入语法？

javascript - 如何在 NextJS 应用程序中使用 Babel 从 node_modules 转换导入语法？

问题描述

当使用 Babel 从我的 node_modules 转换 es6 模块时，我的构建中断并出现以下错误：

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)

我使用以下 nextJS / webpack 配置：

const withLess = require('@zeit/next-less');
const withPreact = require('next-plugin-preact');
const path = require('path');

module.exports = withPreact(withLess( {
    webpack: (config) => {
        config.module.rules.push({
            test: /\.js|jsx$/,
            include: (modPath) => {
                return modPath.indexOf('@my-org') !== -1 || modPath.indexOf('node_modules') === -1
            },
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['next/babel','@babel/preset-flow','@babel/preset-env']
                },
            },
        });
        return config;
    },
}));

我组织的模块似乎没有转换。虽然我可以通过检查包含功能来确认它们是“包含”的。

如何从 node_modules 文件夹中获取 babel 来转换 es6 模块？

标签： javascriptwebpackbabeljsnext.jsbabel-loader

解决方案

我用这个 webpack 插件解决了：

https://www.npmjs.com/package/next-transpile-modules

const withLess = require('@zeit/next-less');
const withPreact = require('next-plugin-preact');


const withTM = require('next-transpile-modules')(()=>{
  // should return array with module paths
});


module.exports = withTM(withPreact(withLess( {
    webpack: (config) => {
        config.module.rules.push({
            test: /\.js|jsx$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['next/babel','@babel/preset-flow','@babel/preset-env']
                },
            },
        });
        return config;
    },
})));

推荐阅读