"Uncaught ReferenceError: require is not defined" with Angular 2/webpack

17,727

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.

Share:
17,727

Related videos on Youtube

serlingpa
Author by

serlingpa

Updated on September 15, 2022

Comments

  • serlingpa
    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
      Marcosicp almost 8 years
      look at this answer, maybe is duplicated: stackoverflow.com/questions/19059580/…
    • Aarmora
      Aarmora over 7 years
      Did you get a solution for this?
    • Frank Robert Anderson
      Frank Robert Anderson over 7 years
      Can you post your whole webpack config and entry js?
    • Ant Kennedy
      Ant Kennedy over 7 years
      can we have a look at your package.json aswell?
    • Praveen Puglia
      Praveen Puglia over 7 years
      can you add your tsConfig.json file here?