search

liady / webpack-node-externals

Easily exclude node modules in Webpack
MIT License
1.3k stars 62 forks source link

When I run the dev server, I got an error 'Uncaught ReferenceError: require is not defined' in external "url". #60

Open hapumee opened 5 years ago

hapumee commented 5 years ago

I have just started to study Webpack and trying to setup development environment based on Webpack4.

I put one script for executing dev server in package.json like bellow.

# package.json

    "scripts": {
        "dev": "webpack-dev-server --mode development",
    }

However, there was an error message like bellow when I execute'npm run dev' on my terminal.

ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in 'D:\webpack-setup\node_modules\destroy'
 @ ./node_modules/destroy/index.js 14:17-30

So, I installed 'webpack-node-externals' and put configuration in 'webpack.config.js' like bellow.

# install webpack-node-externals module

    # npm install --save-dev webpack-node-externals

# webpack.config.js

    const nodeExternals = require('webpack-node-externals');

    module.exports = {
        target: 'web',
        externals: [nodeExternals()]
        devServer: {
            host: 'localhost',
            port: 3000,
            open: true
        }
    };

When a browser was opened, there was an error on a browser like bellow.

Uncaught ReferenceError: require is not defined
    at eval (external_"url":1)
    at Object.url (main.js:289)
    at __webpack_require__ (main.js:20)
    at Object.eval (webpack:///(:3000/webpack)-dev-server/client?:6:11)
    at eval (webpack:///(:3000/webpack)-dev-server/client?:249:30)
    at Object../node_modules/webpack-dev-server/client/index.js?http://localhost:3000 (main.js:97)
    at __webpack_require__ (main.js:20)
    at eval (webpack:///multi_(:3000/webpack)-dev-server/client?:1:1)
    at Object.0 (main.js:190)
    at __webpack_require__ (main.js:20)

I'm not sure this error is related to 'webpack-node-externals' module or not, but could I get some guide for solving this situation?

inspectordanno commented 5 years ago

I got that error as well when I added webpack-node-externals. Subsequently removed it and the error is gone. Something weird is going on.

inspectordanno commented 5 years ago

Ah I found the answer. This tool is not meant for projects that run in the browser.

https://github.com/liady/webpack-node-externals/issues/17

philmirez commented 4 years ago

@inspectordanno I don't see this confirmed with the author (@liady).

I found out that externals: [nodeExternals()] is compatible with mode: 'production' and target: 'web'.

So, why not just exclude the mode property from your webpack config and leave it as its default (production)?

Excluding externals: [nodeExternals()] may result in a larger bundle size.

philmirez commented 4 years ago

Ugh, I guess it was confirmed by the author in #17