[Bug]: babel-loader not working with node 16.20.1

[bhargavtenali]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

webpack config

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              extends: path.join(paths.root, 'tools/config/babel.config.js'),
            },
          },
          {
            loader: 'eslint-loader',
            options: {
              failOnError: true,
              quiet: false,
              fix: true,
              configFile: path.join(paths.root, 'tools/config/.eslintrc.json'),
            },
          },
        ],
        include: [paths.app, paths.admin, paths.suez, paths.styleguide, paths.packages, paths.worldbank],
      },
]

babel-config.js

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: [
    '@babel/plugin-proposal-function-bind',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-logical-assignment-operators',
    ['@babel/plugin-proposal-optional-chaining', { loose: false }],
    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
    '@babel/plugin-proposal-do-expressions',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-class-properties', { loose: false }],
    '@babel/plugin-proposal-json-strings',
  ],
  env: {
    production: {
      plugins: ['transform-react-remove-prop-types'],
    },
  },
}

Configuration file name

babel.config.js

Configuration

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: [
    '@babel/plugin-proposal-function-bind',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-logical-assignment-operators',
    ['@babel/plugin-proposal-optional-chaining', { loose: false }],
    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
    '@babel/plugin-proposal-do-expressions',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-class-properties', { loose: false }],
    '@babel/plugin-proposal-json-strings',
  ],
  env: {
    production: {
      plugins: ['transform-react-remove-prop-types'],
    },
  },
}

Current and expected behavior

Current:
npm run build is failing with node 16.20.1
Getting this error

[WEBPACK] Build failed after 136.829 seconds
[ERROR] => [WEBPACK] Errors building app-3.0.3.js
Module parse failed: 'return' outside of function (4:51)
You may need an appropriate loader to handle this file type.
| 
| if (typeof process === "object" && process.version === "v20.6.0") {
>   if (exports["___internal__alreadyRunning" + ""]) return;
|   Object.defineProperty(exports, "___internal__alreadyRunning", {
|     value: true,
Module parse failed: 'return' outside of function (4:51)
You may need an appropriate loader to handle this file type.
| 
| if (typeof process === "object" && process.version === "v20.6.0") {
>   if (exports["___internal__alreadyRunning" + ""]) return;
|   Object.defineProperty(exports, "___internal__alreadyRunning", {
|     value: true,
[ERROR] =>  Build failure..

It is working fine with node 14

Environment

• Babel 7.4.3
• webpack 4.29.6
• node 16.20.1
• npm 8.19.4

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @bhargavtenali! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[nicolo-ribaudo]

Are you trying to bundle Babel itself? Something is trying to parse that file where you see the error (which is a Babel file), but it's not properly set up to parse CommonJS with top-level return.

[bhargavtenali]

Looks like the issue #15950 has also same root cause

[bhargavtenali]

Hi @nicolo-ribaudo
Thanks for the update

I am using babel in React app as webpack loader

[bhargavtenali]

I tried adding the exclude node_modules and allowing topLevelReturn in parser option but no use
Still I am getting the error

webpack

      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              extends: path.join(paths.root, 'tools/config/babel.config.js'),
            },
          },
          {
            loader: 'eslint-loader',
            options: {
              failOnError: false,
              quiet: false,
              fix: true,
              configFile: path.join(paths.root, 'tools/config/.eslintrc.json'),
            },
          },
        ],
        exclude: /node_modules/,
        include: [paths.app, paths.admin, paths.suez, paths.styleguide, paths.packages, paths.worldbank],
      },

babel-config.js

module.exports = {
  parserOpts: { allowReturnOutsideFunction: true },
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: [
    '@babel/plugin-proposal-function-bind',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-logical-assignment-operators',
    ['@babel/plugin-proposal-optional-chaining', { loose: false }],
    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
    '@babel/plugin-proposal-do-expressions',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-throw-expressions',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-class-properties', { loose: false }],
    '@babel/plugin-proposal-json-strings',
  ],
  env: {
    production: {
      plugins: ['transform-react-remove-prop-types'],
    },
  },
}

[bhargavtenali]

Hi,
My issue got resolved with below fix:

• It seems like a bug in 4.29.6 version of webpack caused above issue
• So I had upgraded webpack to latest 4 i.e., 4.47.0 , than It worked fine

[bhargavtenali]

Thanks @nicolo-ribaudo for the hint in #15960 (comment)
Because of your comment, I was able to find the exact issue