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

如何解决如何在 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;
    },}));

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

如何让 babel 从 node_modules 文件夹中转换 es6 模块？

解决方法

我用这个 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;
    },})));