Next.js: Customize webpack setting cannot compiling JS files inside node_modules

[chilijung]

Question about Next.js

Now I am trying to set up customized webpack settings in next.config.js that will compile certain files (inside node_modules)through our loader (canner-schema-loader), however, in next.js framework js files in node_modules won't compile to es5 (webpack loaders). I've tried many methods but none of it works, but work without using next.js.

We have a unique usage in Canner (https://github.com/Canner/canner) we need have some canner.def.js(written in es6) to define certain settings & data structure in customized components which we need to compile via babel when importing those files.

repo: https://github.com/Canner/canner-firebase-cms/blob/nextjs/next.config.js

method 1

config.module.rules.push(
      // loader for canner.schema.js
      {
        // we need *.schema.js and canner.def.js. which some of them are inside `node_modules`
        test: /\.schema\.js|canner\.def\.js$/,
        use: [
          {loader: 'canner-schema-loader'},
          {
            loader: 'babel-loader',
            options: {
              presets: [
                "next/babel"
              ]
            }
          }
        ]
      }
    );

method 2 :overwrite some next/babel default settings.

  config.module.rules.push(
      // loader for canner.schema.js
      {
        test: /\.schema\.js|canner\.def\.js$/,
        use: [
          {loader: 'canner-schema-loader'},
          {
            loader: 'babel-loader',
            options: {
              presets: [
                // overwrite some next/babel default settings.
                ["next/babel", {
                  "preset-env": {modules: 'commonjs'},
                  "transform-runtime": {
                    helpers: true,
                    polyfill: true,
                    regenerator: true
                  }
                }]
              ]
            }
          }
        ]
      }
    );

method 3:

  config.module.rules.push(
      // loader for canner.schema.js
      {
        test: /\.schema\.js|canner\.def\.js$/,
        // include by files and folders who match the pattern.
        include: [
          path.join(__dirname, 'schema'),
          path.join(__dirname, 'node_modules')
        ],
        use: [
          {loader: 'canner-schema-loader'},
          {
            loader: 'babel-loader',
            options: {
              presets: [
                // overwrite some next/babel default settings.
                ["next/babel", {
                  "preset-env": {modules: 'commonjs'},
                  "transform-runtime": {
                    helpers: true,
                    polyfill: true,
                    regenerator: true
                  }
                }]
              ]
            }
          }
        ]
      }
    );

I get this,

/Users/lijung/Documents/canner/canner-firebase-cms/node_modules/@canner/antd-array-tag/canner.def.js:3
import c from 'canner-script';
^^^^^^

SyntaxError: Unexpected token import

Seems like next.js is exluding node_modules js files no matter how I tried. Hope someone can point out my wrong and give me some direction of this problem, thanks!

[timneutkens]

The exact bit of text you've removed is Questions should be asked on spectrum.chat/next-js. Please follow the issue template as it will make sure you'll be helped correctly and other people in the community will be able to benefit too.

We set externals to any js file inside node_modules so that we don't transpile javascript in node_modules. In case you want to include something you can use something similar to https://github.com/zeit/next.js/pull/3732/files#diff-0b0406776536850213e57e76340d2a2dR10