Webpack on browser complains about require not defined

Question

Here is my folder structure:

src/
└───public/
    ├───index.js
    ├───controllers/
    ├───css/
    ├───js/
    ├───models/
    ├───vendor/
    └───views/
        └───partials/

I know it's not the best folder structure, but it's one of my earlier projects, and I wanted to test webpack on it.

Anyways the controllers, js, vendor all contain javascript code.

My webpack.dev.config is on the same level as src:

const path = require("path");
const common = require("./webpack.common");
const {merge} = require("webpack-merge");   

module.exports = merge(common, {
    target: 'node',
    mode: "development",
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [

    ],
    module: {

    }
});

As you can see it merges from webpack.common.js:

const nodeExternals = require('webpack-node-externals');
    
module.exports = {
    externals: [nodeExternals()],
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,

            }
        ]
    }
}

For now I am hardcoding the location of the bundled js file in my HTML docs, but on the browser when I run this, I see the message Uncaught ReferenceError: require is not defined and I am not sure how to fix it.

Here is index.js:

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 8080;
const exphbs = require('express-handlebars');

const Datastore = require('nedb');
const db = new Datastore({
    filename: path.join(__dirname, 'public/db/pfam.db'),
    autoload: true
});
module.exports.db = db;

app.use(express.static(__dirname + "/public"));
app.set('views', path.join(__dirname, 'public/views'));
app.set('img', path.join(__dirname, 'public/img'));
app.set('js', path.join(__dirname, 'public/js'));
app.set('css', path.join(__dirname, 'public/css'));
app.set('controllers', path.join(__dirname, '/public/controllers'));
app.set('db', path.join(__dirname, '/public/db'));

app.engine('handlebars', exphbs({
    defaultLayout: 'home',
    layoutsDir: path.join(__dirname, '/public/views')
}))

app.set('view engine', 'handlebars');
app.use(require('./public/controllers'))

console.log(`listening on port ... ${port}`)
app.listen(port);

Is your project a serverside one? should run on node not in the browser? — Raz Ronen, Aug 16 '20 at 19:53
Ahem: `target: 'node',` — Why is a browser involved at all if you aren't targetting one? — Quentin, Aug 16 '20 at 19:53
@RazRonen It's both. Basically when express gets a route, like `/`, it renders a page. I know realistically you would split FE and BE, but this is one of those older projects where I didn't know how to do that — K Split X, Aug 16 '20 at 19:54

score -1 · Answer 1 · answered Aug 16 '20 at 19:59

-1

The reason you are getting Uncaught ReferenceError: require is not defined is because your bundles contains require keyword, which is undefined in the browser?

Why do they contain require? Because you use nodeExternals from webpack-node-externals

From their docs:

All node modules will no longer be bundled but will be left as require('module').

answered Aug 16 '20 at 19:59

Raz Ronen

2,418
2
14
26

I think my challenge is that `require` is not understood on the browser, the bundle file contains `require` which is run on the browser, hence the error – K Split X Aug 16 '20 at 20:30
sorry but I disagree :) Please read this answer: https://stackoverflow.com/a/9901097/3470148, require isn't available in the browser. I think that the deeper issue is that you have the same webpack configuration for both your client and server project. You should have a common configuration and have two builds. One that merge the common with `target: web` and the second with `target: node` – Raz Ronen Aug 16 '20 at 20:33

Webpack on browser complains about require not defined

1 Answers1