javascript- ReferenceError: require is not defined

Question

I'm trying to bundle and run a TypeScript project using Webpack. One of the TypeScript files requires and external node depenedency. Webpack bundles the file without problem, but when I try to run it on the browser it gives me the following error.

webpack.config.js

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

module.exports = {
  entry: './src/index.ts',
  resolve: {
    extensions: [
      '.js',
      '.jsx',
      '.json',
      '.ts',
      '.tsx'
    ]
  },
   externals: [nodeExternals()],
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
  },
  target: 'web',
  module: {
    loaders: [
      { test: /\.ts(x?)$/, loader: 'ts-loader' },
    ],
  },

};

External node dependency aws-iot-device-sdk

Can someone help me with this?

Update: Found that the following line in the TypeScript file causes the issue. is there a work-around for this?

const client = new IoTClient(true, IoTClientOptions);

Why are you setting output.libraryTarget to 'commonjs', have you tried to set it to libraryTarget: "umd"? — Littlee
– Littlee, Commented Mar 23, 2018 at 7:20
I have no clear idea about the libraryTarget option and I tried with the option you mentioned, but the error remains the same. — gayashanbc
– gayashanbc, Commented Mar 23, 2018 at 7:25
The following line: const client = new IoTClient(true, IoTClientOptions); — gayashanbc
– gayashanbc, Commented Mar 23, 2018 at 8:40
Can you provide more content in index.ts, I have no idea what IoTClient and IoTClientOptions are. — Littlee
– Littlee, Commented Mar 23, 2018 at 9:08

SF..MJ · Accepted Answer · 2018-03-23 07:13:21Z

1

As you are using

require('path');

you have to download RequireJS

Here

RequireJS is a JavaScript file and module loader.

or add Add http://requirejs.org/docs/release/2.2.0/minified/require.js to your project

answered Mar 23, 2018 at 7:13

SF..MJ

8811 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gayashanbc · Accepted Answer · 2018-03-28 07:56:27Z

1

The following Webpack configuration solved my issue.

const path = require('path');

module.exports = {
  entry: {
    chatUI: './src/chat-ui.ts',
    chatLogic: './src/chat-logic.ts',
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx',
      '.json',
      '.ts',
      '.tsx'
    ]
  },
  output: {
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
  },
  node: {
    fs: 'empty',
    tls: 'empty'
  },
  target: 'web',
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      }
    ],
  },

};

answered Mar 28, 2018 at 7:56

gayashanbc

1,0242 gold badges20 silver badges34 bronze badges

Collectives™ on Stack Overflow

javascript- ReferenceError: require is not defined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related