__webpack_require__(...) is not a function with babel-loader #1223

mogelbrod · 2019-06-10T11:04:09Z

Expected behaviour

Using babel-loader and html-webpack-plugin shouldn't require any special configuration.

Current behaviour

Webpack throws the following error with a minimal repro using only webpack, babel-loader and html-webpack-plugin:

TypeError: __webpack_require__(...) is not a function
  - index.html:1718 Module../node_modules/webpack/buildin/harmony-module.js

Environment

Node.js v12.1.0
darwin 18.6.0
npm 6.9.0
webpack-issue@1.0.0 .../webpack-issue
└── webpack@4.32.2
webpack-issue@1.0.0 .../webpack-issue
└── html-webpack-plugin@3.2.

Config

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = function(env) {
  return {
    mode: 'development',

    entry: {
      app: './index.js',
    },

    output: {
      path: __dirname + '/dist',
      filename: 'index.js',
      publicPath: '/'
    },

    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
        },
      ],
    },

    plugins: [
      new HtmlWebpackPlugin({
        template: 'index.html',
      }),
    ],

    bail: true,

    devServer: {
      contentBase: 'public',
      inline: true,
      port: 3000,
    }
  }
}

Relevant Links

Repository with minimal repro repository

Possibly related:

Workaround

diff --git a/webpack.config.js b/webpack.config.js
index 34e17ce..8bf6b03 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -20,6 +20,9 @@ module.exports = function(env) {
       rules: [
         {
           test: /\.js$/,
+          exclude: [
+            /node_modules\/(webpack|html-webpack-plugin)\//,
+          ],
           loader: 'babel-loader',
         },
       ],

The text was updated successfully, but these errors were encountered:

Akiyamka · 2019-06-27T16:47:24Z

i have same issue, but with 'useBuiltIns': 'usage' exclude workaround does not help T.T

jantimon · 2019-07-07T16:49:29Z

Thanks for reporting this bug it looks like it was already reported a while back here without a solution:

webpack/webpack#6544

And you are right it is a duplicate of #637 unfortunately we didn't really understand what is causing the bug.

Thanks to your reproduction repository I was able to do some quick tests and realized that it breaks for html-webpack-plugin 3.2 and 4.x because of a webpack behaviour which I don't understand.

To debug those the bug I used node inspector like the following:

node --inspect-brk node_modules/.bin/webpack

The bug starts from the html-webpack-plugin function evaluateCompilationResult where it executes the template using a Script.runInContext sandbox.

Inside that sandbox it uses the code generated by the html-webpack-plugin/lib/loader.js which looks like this:

/***/ "./node_modules/html-webpack-plugin/lib/loader.js!./index.html":
/*!*********************************************************************!*\
  !*** ./node_modules/html-webpack-plugin/lib/loader.js!./index.html ***!
  \*********************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

    var _ = __webpack_require__( /*! !./node_modules/lodash/lodash.js */ "./node_modules/lodash/lodash.js");

    module.exports = function(templateParams) {
        with(templateParams) {
            return (function(data) {
                var __t, __p = '';
                __p += '<!DOCTYPE html>\n<html>\n  <head>\n    <title>Test</title>\n    <meta charset="utf-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />\n  </head>\n  <body class="loading">\n    <div id="app"></div>\n  </body>\n</html>\n';
                return __p
            })();
        }
    }

    /***/
}),

Now webpack kicks in for __webpack_require__("./node_modules/lodash/lodash.js") and uses the babel-loader as configured in the config.

Webpack loads the node_modules/webpack/buildin/global.js file which tries to provide access to the current global object.

Webpack tries to wrap the harmony-module (webpack/buildin/harmony-module.js) around global.js

webpack/buildin/harmony-module.js

module.exports = function(originalModule) {
	if (!originalModule.webpackPolyfill) {
		var module = Object.create(originalModule);
		// module.parent = undefined by default
		if (!module.children) module.children = [];
		Object.defineProperty(module, "loaded", {
			enumerable: true,
			get: function() {
				return module.l;
			}
		});
		Object.defineProperty(module, "id", {
			enumerable: true,
			get: function() {
				return module.i;
			}
		});
		Object.defineProperty(module, "exports", {
			enumerable: true
		});
		module.webpackPolyfill = 1;
	}
	return module;
};

Now it gets strange:

webpack tries to wrap harmony-module.js around harmony-module.js:

Unfortunately I don't understand why this is happening so I won't be able to provide a solution here - maybe @sokra can lead us into the correct direction.

What we could do as a workaround is to try to use the nodejs require instead of __webpack_require__ for lodash - that way we might even execute the template faster but I am not sure if this might introduce new problems.

The workaround (#1239) would be to replace this line

html-webpack-plugin/lib/loader.js

Line 28 in 895db29

    
           return 'var _ = require(' + loaderUtils.stringifyRequest(this, '!!' + require.resolve('lodash')) + ');' +

with:

return 'var _ = __non_webpack_require__(' + require.resolve('lodash') + ');' +

…incompatibility fix #1223

mogelbrod · 2019-07-08T09:00:43Z

Interesting findings! Overall I found it odd that html-webpack-plugin uses webpack to resolve lodash (and any other internal dependencies), so ensuring that it gets loaded via node require instead sounds good. Could this change also prevent lodash from being included in the stats output (as a dependency of html-webpack-plugin entries), which has previously caught me off guard as it's not bundled with anything but merely used to generate the assets.

sokra · 2019-07-08T13:32:45Z

The problem is documented here: https://babeljs.io/docs/en/options#sourcetype

sokra · 2019-07-08T13:33:37Z

TL'DR

babel inserts imports
module becomes a ESM
module.exports no longer work

jantimon · 2019-07-09T12:20:45Z

Thanks @sokra !
I am amazed about what is all in your head 😆

I will merge #1239

hiroppy mentioned this issue Jul 7, 2019

refactor(configs): get rid of babel-polyfill hiroppy/fusuma#143

Merged

6 tasks

jantimon added a commit that referenced this issue Jul 7, 2019

fix: Prevent lodash from being inlined to work around a babel-loader …

f774337

…incompatibility fix #1223

jantimon mentioned this issue Jul 7, 2019

fix: Prevent lodash from being inlined to work around a babel-loader incompatibility #1239

Merged

jantimon closed this as completed in 7f21910 Jul 9, 2019

lock bot locked as resolved and limited conversation to collaborators Aug 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

__webpack_require__(...) is not a function with babel-loader #1223

__webpack_require__(...) is not a function with babel-loader #1223

mogelbrod commented Jun 10, 2019 •

edited

Loading

Akiyamka commented Jun 27, 2019 •

edited

Loading

jantimon commented Jul 7, 2019 •

edited

Loading

mogelbrod commented Jul 8, 2019

sokra commented Jul 8, 2019

sokra commented Jul 8, 2019

jantimon commented Jul 9, 2019

__webpack_require__(...) is not a function with babel-loader #1223

__webpack_require__(...) is not a function with babel-loader #1223

Comments

mogelbrod commented Jun 10, 2019 • edited Loading

Expected behaviour

Current behaviour

Environment

Config

Relevant Links

Workaround

Akiyamka commented Jun 27, 2019 • edited Loading

jantimon commented Jul 7, 2019 • edited Loading

mogelbrod commented Jul 8, 2019

sokra commented Jul 8, 2019

sokra commented Jul 8, 2019

jantimon commented Jul 9, 2019

mogelbrod commented Jun 10, 2019 •

edited

Loading

Akiyamka commented Jun 27, 2019 •

edited

Loading

jantimon commented Jul 7, 2019 •

edited

Loading