How to transform import syntax from node_modules with Babel in a NextJS application?

user_628918 0
Viewed 1158

when transpiling es6 modules from my node_modules with Babel my build breaks with the following error:

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)

I use the following nextJS / webpack config:

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;
    },
}));

It seems the modules from my organisation are not transformed. Although I can confirm they are "included" by checking the include function.

How does one get babel to transform es6 modules from the node_modules folder?

babeljs babel-loader webpack next.js javascript
1 Answers

I solved with this webpack plugin:

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;
    },
})));
user_6289180
Related