Как преобразовать синтаксис импорта из node_modules с помощью Babel в приложении NextJS?

при переносе модулей es6 из моих node_modules с помощью Babel моя сборка прерывается со следующей ошибкой:

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 преобразовывать модули es6 из папки node_modules?


webpack javascript next.js babeljs babel-loader
person jorrebor    schedule 14.04.2021    source источник
comment
Отвечает ли это на ваш вопрос? NextJS + response-hook-mousetrap: невозможно использовать Оператор импорта вне модуля - Динамический импорт хуков?   -  person juliomalves    schedule 15.04.2021

Ответы (1)


arrow_upward
0
arrow_downward

Я решил с помощью этого плагина 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;
    },
})));
person jorrebor    schedule 15.04.2021