webpack@4 - ERROR in TypeError: __webpack_require__(...) is not a function #6544

damianobarbati · 2018-02-21T16:20:33Z

What is the current behavior?
I'm trying to migrate from webpack@3 to webpack@4 with a simple config (https://github.com/damianobarbati/yarsk/blob/master/config/webpack.config.js) but I get:

ERROR in   TypeError: __webpack_require__(...) is not a function
  - es6.regexp.replace.js?:2 eval
    [.]/[core-js]/modules/es6.regexp.replace.js?:2:90

The bundle analyzer shows that full lodash-es is included into the bundle and no tree shaking is happening.

If the current behavior is a bug, please provide the steps to reproduce.
Here the full repro: https://github.com/damianobarbati/yarsk

Instructions in the README.
Basically just:

git clone https://github.com/damianobarbati/yarsk
yarn install
npm install -g pm2
yarn build:dev

Versions:

"devDependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "@babel/polyfill": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "@babel/preset-react": "^7.0.0-beta.40",
    "@babel/preset-stage-0": "7.0.0-beta.40",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.4.0",
    "babel-loader": "^8.0.0-beta.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.1",
    "clean-webpack-plugin": "^0.1.18",
    "compression-webpack-plugin": "^1.1.7",
    "eslint": "^4.18.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jest": "^21.12.2",
    "eslint-plugin-react": "^7.7.0",
    "file-loader": "^1.1.8",
    "html-webpack-plugin": "webpack-contrib/html-webpack-plugin",
    "img-loader": "^2.0.1",
    "jest": "^22.4.0",
    "lodash-es": "^4.17.5",
    "open-browser-webpack-plugin": "^0.0.5",
    "url-loader": "^0.6.2",
    "webpack": "^4.0.0-beta.2",
    "webpack-bundle-analyzer": "^2.10.0",
    "webpack-cli": "^2.0.6",
    "webpack-notifier": "^1.5.1"
}

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

TheLarkInn · 2018-02-21T23:53:11Z

There's a couple things that could be problems here so I'm going to try and suggest a few things.

Are you using mode: production with the latest build of lodash-es
Are you setting modules: false for babel-preset-env in your .babelrc if not, then this will convert modules to commonjs which can't treeshake.

damianobarbati · 2018-02-22T00:05:16Z

Thanks for helping @TheLarkInn.

does tree shaking happens just if production optimizations are enabled like in webpack@3?
yes I am => https://github.com/damianobarbati/yarsk/blob/master/package.json#L91

Anyway mode:production doesn't work either because I get a similar error and I'm trying to have the development environment up and running before moving to the production one.

Here what I get running yarn build:prod in the repro which simply converts to

NODE_ENV=production webpack --config ./config/webpack.config.js --progress --mode production

=>

 __webpack_require__(3)('replace', 2, function (defined, REPLACE, $replace) {
  TypeError: __webpack_require__(...) is not a function
  
  - index.html:364 Object.<anonymous>
    /Users/damz/Desktop/yarsk/app/index.html:364:23

...and after the errors webpack-cli prompts the manual 🤨

(I'm passing NODE_ENV anyway down to the js bundle)

sokra · 2018-02-22T18:29:20Z

The error is caused by the html-webpack-plugin. Best report it there.

Otherwise sideEffects seem to be working.

Only these modules from lodash are included. There are also concatenated into a single module:

  [12] ./app/index.js + 20 modules 13 KiB {0} [built]
       | ./node_modules/lodash-es/_hasUnicode.js 945 bytes [built]
       | ./app/index.js 73 bytes [built]
       | ./node_modules/lodash-es/toString.js 577 bytes [built]
       | ./node_modules/lodash-es/upperFirst.js 466 bytes [built]
       | ./node_modules/lodash-es/_baseToString.js 1.12 KiB [built]
       | ./node_modules/lodash-es/_createCaseFirst.js 769 bytes [built]
       | ./node_modules/lodash-es/_castSlice.js 512 bytes [built]
       | ./node_modules/lodash-es/isSymbol.js 673 bytes [built]
       | ./node_modules/lodash-es/_Symbol.js 114 bytes [built]
       | ./node_modules/lodash-es/_arrayMap.js 554 bytes [built]
       | ./node_modules/lodash-es/capitalize.js 526 bytes [built]
       | ./node_modules/lodash-es/_stringToArray.js 439 bytes [built]
       | ./node_modules/lodash-es/isArray.js 484 bytes [built]
       | ./node_modules/lodash-es/_baseGetTag.js 780 bytes [built]
       | ./node_modules/lodash-es/_asciiToArray.js 298 bytes [built]
       | ./node_modules/lodash-es/_unicodeToArray.js 1.59 KiB [built]
       | ./node_modules/lodash-es/isObjectLike.js 611 bytes [built]
       | ./node_modules/lodash-es/_baseSlice.js 751 bytes [built]
       | ./node_modules/lodash-es/_root.js 296 bytes [built]
       | ./node_modules/lodash-es/_objectToString.js 562 bytes [built]
       | ./node_modules/lodash-es/_getRawTag.js 1.11 KiB [built]

Minimized you pay only 2.1kB (1kB.gz) for lodash usage. The most expensive part seem to be the toString in lodash...

sokra · 2018-02-22T18:30:43Z

webpack-cli help also seem like a bug to me. Best report it to webpack-cli. In no longer happens when the html-webpack-plugin is removed.

sokra · 2018-02-22T20:18:45Z

webpack/webpack-cli#276 (incorrect help display in webpack-cli)

damianobarbati · 2018-02-23T14:22:40Z

@sokra I wrote a simple webpack plugin to inject the JS assets into the html.
No html-webpack-plugin anymore into the repro (to isolate the cause): it can be run with the same commands (clone/install/build).

I get the same error, this time in console:

es6.regexp.split.js?989c:2 Uncaught TypeError: __webpack_require__(...) is not a function
    at eval (es6.regexp.split.js?989c:2)
    at Object../node_modules/core-js/modules/es6.regexp.split.js (index.js:373)
    at __webpack_require__ (index.js:20)
    at Object.eval (_redefine.js:2)
    at eval (_redefine.js:41)
    at Object../node_modules/core-js/modules/_redefine.js (index.js:271)
    at __webpack_require__ (index.js:20)
    at eval (_fix-re-wks.js?560d:3)
    at Object../node_modules/core-js/modules/_fix-re-wks.js (index.js:171)
    at __webpack_require__ (index.js:20)

Which turns in mode:production into:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

It looks like some internal webpack function is missing from the bundle?
Maybe I need an exact version of core-js to have webpack@4 working?

damianobarbati · 2018-02-23T14:28:10Z

Done: I was not excluding node_modules from babel transpilation.

SeanHayes · 2018-08-29T21:14:53Z

If you have to exclude node_modules/, how do you get babel to polyfill/transform code in 3rd party code?

eqyiel · 2018-08-30T04:28:40Z

@SeanHayes you don't have to exclude all of node_modules if you have some way of transpiling non-es5 dependencies. See facebook/create-react-app#3776

See [Enable babel-preset-env for node_modules that target newer Node versions](facebook/create-react-app#1125) See [Create React App 2.0: "You can now use packages written for latest Node versions without breaking the build"](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) See ["If you have to exclude node_modules/, how do you get babel to polyfill/transform code in 3rd party code?"](webpack/webpack#6544 (comment)) See [Compile dependencies with babel-preset-env](facebook/create-react-app#3776)

seeden · 2019-04-13T10:00:14Z

@sokra is there any workaround if you have to include node_modules and transform code in 3rd party code?

pleunv · 2019-07-10T18:19:23Z

Sorry for hijacking this issue, but I ran into something similar when trying to run my node_modules through babel as well (with a simplified config, similar to CRA), and this is the only issue I can find that's even slightly related. The issue seems to be core-js related. Am I right in thinking this is also going wrong in html-webpack-plugin?

Note: I do have the sourceType set to unambiguous.

ERROR in   Error: webpack-internal:///./node_modules/core-js-pure/modules/es.array.is-array.js:7
  $({
  ^
  TypeError: $ is not a function

  - es.array.is-array.js:7 eval
    [.]/[core-js-pure]/modules/es.array.is-array.js:7:1

  - index.html:1822 Object../node_modules/core-js-pure/modules/es.array.is-array.js
    c:/Code/app/public/index.html:1822:1

  - index.html:687 __webpack_require__
    c:/Code/app/public/index.html:687:30

  - index.html:61 fn
    c:/Code/app/public/index.html:61:20

  - is-array.js:1 eval
    [.]/[core-js-pure]/es/array/is-array.js:1:1

  - index.html:951 Object../node_modules/core-js-pure/es/array/is-array.js
    c:/Code/app/public/index.html:951:1

  - index.html:687 __webpack_require__
    c:/Code/app/public/index.html:687:30

  - index.html:61 fn
    c:/Code/app/public/index.html:61:20

  - is-array.js:1 eval
    [.]/[core-js-pure]/stable/array/is-array.js:1:18

  - index.html:2086 Object../node_modules/core-js-pure/stable/array/is-array.js
    c:/Code/app/public/index.html:2086:1

alainib · 2020-08-14T08:47:59Z

@pleunv did you find a solution please ? i have the same error with node_modules/core-js/modules/es.array.index-of.js:22 $({ ^ TypeError: $ is not a function

Fea-Sin · 2021-06-17T06:38:30Z

Done: I was not excluding node_modules from babel transpilation.

  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: { loader: "babel-loader" },
  }

damianobarbati changed the title ~~webpack@4 - ERROR in TypeError: __webpack_require__(...) is not a function and no sideEffects/tree-shaking ignored~~ webpack@4 - ERROR in TypeError: __webpack_require__(...) is not a function and sideEffects/tree-shaking ignored Feb 21, 2018

damianobarbati changed the title ~~webpack@4 - ERROR in TypeError: __webpack_require__(...) is not a function and sideEffects/tree-shaking ignored~~ webpack@4 - ERROR in TypeError: __webpack_require__(...) is not a function Feb 23, 2018

damianobarbati closed this as completed Feb 23, 2018

huruji mentioned this issue Mar 2, 2019

2019第一周 huruji/JDS_weekly#11

Open

jantimon mentioned this issue Jul 7, 2019

__webpack_require__(...) is not a function with babel-loader jantimon/html-webpack-plugin#1223

Closed

maybe-sybr mentioned this issue Jul 22, 2020

Kibana login page does not load - possible webpack/babel build issue opensearch-project/security-dashboards-plugin#286

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webpack@4 - ERROR in TypeError: __webpack_require__(...) is not a function #6544

webpack@4 - ERROR in TypeError: __webpack_require__(...) is not a function #6544

damianobarbati commented Feb 21, 2018 •

edited

TheLarkInn commented Feb 21, 2018

damianobarbati commented Feb 22, 2018

sokra commented Feb 22, 2018

sokra commented Feb 22, 2018

sokra commented Feb 22, 2018

damianobarbati commented Feb 23, 2018 •

edited

damianobarbati commented Feb 23, 2018

SeanHayes commented Aug 29, 2018

eqyiel commented Aug 30, 2018

seeden commented Apr 13, 2019

pleunv commented Jul 10, 2019 •

edited

alainib commented Aug 14, 2020

Fea-Sin commented Jun 17, 2021

webpack@4 - ERROR in TypeError: __webpack_require__(...) is not a function #6544

webpack@4 - ERROR in TypeError: __webpack_require__(...) is not a function #6544

Comments

damianobarbati commented Feb 21, 2018 • edited

TheLarkInn commented Feb 21, 2018

damianobarbati commented Feb 22, 2018

sokra commented Feb 22, 2018

sokra commented Feb 22, 2018

sokra commented Feb 22, 2018

damianobarbati commented Feb 23, 2018 • edited

damianobarbati commented Feb 23, 2018

SeanHayes commented Aug 29, 2018

eqyiel commented Aug 30, 2018

seeden commented Apr 13, 2019

pleunv commented Jul 10, 2019 • edited

alainib commented Aug 14, 2020

Fea-Sin commented Jun 17, 2021

damianobarbati commented Feb 21, 2018 •

edited

damianobarbati commented Feb 23, 2018 •

edited

pleunv commented Jul 10, 2019 •

edited