Comments (7)
alexander-akait
commented on April 27, 2024
Honestly there are no problems here, you set "type": "module", it means all files are ESM, but banner.js is using require (you know that require does not exist in ESM), just rename banner.js to banner.cjs (or alternative solution is putting package.json with type: "commonjs" inside src). This is how Node.js and ESM logic works. I don't think we should change anything otherwise we won't follow and align ESM logic, also it will require introducing global variables and other things.
from webpack.
jantimon
commented on April 27, 2024
The problem is not about banner.js as it used webpack_require but rather the webpack generated code for the external import:
ReferenceError: require is not defined
Generated code for external commonjs "cowsay"
1 | module.exports = require("cowsay");
there is a nextjs branch in the reproduction repository - there banner.ts is using import but still the error says require is undefined:
https://github.com/jantimon/reproduction-webpack-import-module-bug/blob/nextjs/app/banner.ts
from webpack.
alexander-akait
commented on April 27, 2024
In the case of nextjs you have external commonjs "cowsay", but run code in ESM env (open .next/ and look at files), no problems with webpack here , if you rename next.config.mjs to next.config.cjs all works fine
technically this should work:
config.externals.unshift({
"cowsay": "node-commonjs cowsay"
})It's better to create this question in nextjs repo
from webpack.
jantimon
commented on April 27, 2024
renaming next.config.mjs to next.config.cjs works because next.config.cjs is ignored and therefore the loader will not be used
I am not sure what I could see inside the next folder this is the page.js:
throw Error('Module build failed (from ./loader.cjs):\nHookWebpackError: require is not defined\n at tryRunOrWebpackError (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:311563)\n at __webpack_require_module__ (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:131195)\n at __nested_webpack_require_153754__ (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:130634)\n at Module.<anonymous> (javascript/auto|/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js??ruleSet[1].rules[14].oneOf[6].use[0]!/Users/jannicklas/Desktop/webpack-import-module-bug/app/banner.ts|banner-loader:5:64)\n at /Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:915116\n at Hook.eval [as call] (eval at create (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:13:28645), <anonymous>:7:1)\n at /Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:131228\n at tryRunOrWebpackError (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:311517)\n at __webpack_require_module__ (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:131195)\n at __nested_webpack_require_153754__ (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:130634)\n-- inner error --\nReferenceError: require is not defined\n at Object.<anonymous> (external commonjs "cowsay":1:1)\n at /Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:915116\n at Hook.eval [as call] (eval at create (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:13:28645), <anonymous>:7:1)\n at /Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:131228\n at tryRunOrWebpackError (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:311517)\n at __webpack_require_module__ (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:131195)\n at __nested_webpack_require_153754__ (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:130634)\n at Module.<anonymous> (javascript/auto|/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js??ruleSet[1].rules[14].oneOf[6].use[0]!/Users/jannicklas/Desktop/webpack-import-module-bug/app/banner.ts|banner-loader:5:64)\n at /Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:28:915116\n at Hook.eval [as call] (eval at create (/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/compiled/webpack/bundle5.js:13:28645), <anonymous>:7:1)\n\nGenerated code for external commonjs "cowsay"\n1 | module.exports = require("cowsay");\n\nGenerated code for javascript/auto|/Users/jannicklas/Desktop/webpack-import-module-bug/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js??ruleSet[1].rules[14].oneOf[6].use[0]!/Users/jannicklas/Desktop/webpack-import-module-bug/app/banner.ts|banner-loader
from webpack.
alexander-akait
commented on April 27, 2024
I mean you will see files in ESM format, please open an issue in the nextjs repo, webpack works fine here
from webpack.
alexander-akait
commented on April 27, 2024
Also looks like there is the nextjs bug, because using:
config.externals.unshift({
"cowsay": "node-commonjs cowsay"
})
Still generates module.exports = require("cowsay");, but should generate https://webpack.js.org/configuration/externals/#externalstypenode-commonjs
from webpack.
jantimon
commented on April 27, 2024
Thanks for your help and time @alexander-akait!
I'll try to investigate further to find out how module.exports = require("cowsay"); gets generated
from webpack.
Related Issues (20)
- Plugin apply not working for multi compiler HOT 2
- packages/tailwindcss/src/compile.ts HOT 1
- Current error handling mainly involves calling the `onInvalidCandidate` callback function to handle invalid candidates, and printing corresponding error messages to the console.
- [5.91.0] "Fixed fs types" breaks `outputFileSystem` compatibility with `memfs` HOT 8
- Using `[name]` within `output.library`, the correct value isn't utilized in the source map namespace HOT 3
- Not found node_modules/@angular/common/bundles/common-http.umd.js
- webpack5.90.0 Modifying files in the node_modules directory (local component library) cannot trigger hot updates HOT 1
- Delete this.
- how to make webpack recompile on dev mode with cache on?
- Webpack build error for second time HOT 1
- `exportsPresence` does not work for unused imports HOT 3
- Implement ability to use "node:" prefixes for Node.js core modules HOT 1
- mangled exports breaks with destructuring assignment of JSON imports HOT 7
- there are confusing JDocs code
- Potential bug issues
- Webpack is not resolving node_modules specified in `resolve.modules` property.
- Dynamically loading chunks
- [Code implementation issues] ArrayQueue
- [feature] create cli HOT 3
- Not able to build node script
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack.