Posted in Uncategorized

Webpack-bundled files not defining ‘require’

   February 23, 2021  1 Comment on Webpack-bundled files not defining ‘require’

I’m using web pack bundle some js & jsx files to load them unto the browser. All runs well but the moment the browser opens them it logs an error ReferenceError: Can't find variable: require.

My current configuration is the following:

var path = require('path');
var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function (x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function (mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = [
  {
    name: 'server',
    target: 'node',
    context: path.join(__dirname, 'src', 'cloud'),
    entry: ['babel-polyfill', './app.js'],
    output: {
      path: __dirname,
      filename: 'app.bundle.js'
    },
    module: {
      loaders: [
        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel'}
      ]
    },
    externals: nodeModules,
    node: {
      __dirname: true
    }
  },
  {
    name: 'client',
    target: 'web',
    context: path.join(__dirname, 'src', 'static', 'scripts'),
    entry: {
      index: ['babel-polyfill', './index.js']
    },
    output: {
      path: path.join(__dirname, 'src', 'public', 'bundles'),
      filename: '[name].bundle.js'
    },
    module: {
      loaders: [
        {test: /\.html$/, loader: 'raw'},
        {test: /\.css$/, loader: 'style'},
        {test: /\.css$/, loader: 'css'},
        {test: /\.jsx?$/, loader: 'babel'}
      ]
    },
    externals: nodeModules
  }
];

Any idea as to why could this be happening? Thanks in advance

Author: Fantashit

1 thought on “Webpack-bundled files not defining ‘require’”

Comments are closed.