Webpack - Getting node modules Into Bundle and loading into html file

Question

I am trying to use node_modules in the browser via WebPack. I've read the tutorial and beginning steps but am stuck.

I have used webpack to generate bundle.js with the webpack config below and upon going to my index.html in Chrome browser I get the error:

Uncaught ReferenceError: require is not defined at Object.<anonymous> (bundle.js:205)

What additional steps do I have to do to get the browser to recongnize require?

index.html

<script src="bundle.js"></script>

<button onclick="EntryPoint.check()">Check</button>

index.js

const SpellChecker = require('spellchecker');

module.exports = {
      check: function() {
            alert(SpellChecker.isMisspelled('keng'));
      }
};

package.json

{
  "name": "browser-spelling",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "node-loader": "^0.6.0",
    "spellchecker": "^3.3.1",
    "webpack": "^2.2.1"
  }
}

webpack.config.js

module.exports = {
    entry: './index.js',
    target: 'node',
    output: {
        path: './',
        filename: 'bundle.js',
        libraryTarget: 'var',
        library: 'EntryPoint'
    },
    module: {
        loaders: [
            {
                test: /\.node$/,
                loader: 'node-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

Damon

Answer 1

In your webpack.config.js you specified that you want to build this bundle for Node.js:

target: 'node',

And webpack decided to keep require calls, because Node.js supports them. If you want to run it in a browser, you should use target: 'web' instead.

Scarcity

Once I change the target to web, it is telling me: global.process is undefined. Any ideas for that? – Damon

It seems spellchecker is based on some system APIs like Windows 8 Spell Check API (according to github's readme: github.com/atom/node-spellchecker); I don't think it will work in a browser, it's for a server-side only. – Scarcity

Ahh yes, I replaced spellchecker with lodash and it works perfect! Thank you! – Damon

@Damon so u removed spellchecker and used lodash? – Mcnew

@ManojkumarB I'm not sure what I meant by that comment. Looking at the code seems I used speller package but used within a lodash map function. Old me must have been confused /shrug – Damon

Answer 2

In the new "webpack": "^5.75.0", Required has been changed to rules

webpack.config.js

const path = require("path");
var webpack = require("webpack");
module.exports = {
  entry: "./index.js",
  target: "node",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
     {
        test: /\.node$/,
        use: "node-loader",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
      },
    ],
  },
};

package.json

{
  "name": "arrybsc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  "bootstrap": "^5.2.3",
  "lodash": "^4.17.21"
 },
  "devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

Vereen