"Uncaught ReferenceError: require is not defined" with Angular 2/webpack
Solution 1
WebPack can do this alone. You need to make sure you load the initial chunk first using a script src tag. It will typically be the value of the entry: key in the WebPack config with -bundle appended. If you're not doing explicit chunking, your entry chunk should be both an initial and entry chunk and have the WebPack runtime in it. The WebPack runtime contains and loads the require function before your code runs.
Your components or whatever you're requiring need to be required from the entry file since your scripts will start there. Basically, if you're not explicitly chunking, the entry point JS file is the only one you can include with script src. Everything else needs to be required from it. What you include will typically have bundle in the JS filename. By default, it should be main-bundle.js.
Solution 2
For anyone that is looking for an answer but the above doesn't work:
Short
Add or Replace current target
in webpack.config.js
to target: 'web'
A bit longer
Webpack has different targets, if you've experimented with this and changed your target to node
it will use 'require' to load chuncks.
The best thing is to make your target (or to add) target: 'web'
in your webpack.config.js
. This is the default target and loads your chuncks in a way the browser can handle.
I eventually found this solution here.
Related videos on Youtube
serlingpa
Updated on September 15, 2022Comments
-
serlingpa about 1 year
I am working an HTML template from a graphic design company into my Angular 2 project using node and webpack.
The HTML pulls in various scripts like this:
<script src="js/jquery.icheck.min.js"></script> <script src="js/waypoints.min.js"></script>
so I am requiring them in my component.ts:
var icheckJs = require('../js/jquery.icheck.min'); var waypointsJs = require('../js/waypoints.min');
There are several other scripts too and some SASS which appears to be working correctly.
webpack is happy and build it all and an 'npm start' is successful too. However, when it reaches the browser, I get this complaint:
Uncaught ReferenceError: require is not defined node_modules/angular2/platform/browser.js:1 Uncaught ReferenceError: require is not defined
which is actually thrown by this line from url.js:
var punycode = require('punycode');
Is this a CommonJs require? I hadn't used this in web development before a few weeks ago so I'm still untangling the various requires from webback, CommonJs et at.
An extract from my webpack.config.js for the .js loader looks like this:
{ test: /\.js$/, loader: 'script' }
How do I work around this error?
-
Marcosicp almost 8 yearslook at this answer, maybe is duplicated: stackoverflow.com/questions/19059580/…
-
Aarmora over 7 yearsDid you get a solution for this?
-
Frank Robert Anderson over 7 yearsCan you post your whole webpack config and entry js?
-
Ant Kennedy over 7 yearscan we have a look at your package.json aswell?
-
Praveen Puglia over 7 yearscan you add your tsConfig.json file here?
-