Require not defined in script tag

Question

I am writing an electron app using react as for the UI and webpack for bundling. Webpack is configured right now for the react part of the application as follows:

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: './src/index.tsx',
    target:'node',
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'ts-loader'
                }
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                options: {
                    sourceMap: true,
                },
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "css-loader", options: {
                        sourceMap: true
                    }
                }, {
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./index.html",
            filename: "./index.html"
        }),
        new CopyWebpackPlugin([{ from: 'public',ignore: ['*.html'] }])
    ],
    devtool: 'eval-source-map'
}

In my index.html I need to use the following script tag for electron's rendering process :

<script>
        require('build/bundle.js')
    </script>

When I run webpack-dev-server everything compiles without error, but when I open chrome dev tools I see this error :

Uncaught ReferenceError: require is not defined
    at (index):12

I had to target node in my webpack.config to make electron work so I assume the require function works in browser as well since if I were to create an electron app in a pure node.js environment(without webpack and react) it works without any additional configuration. So I guess there is an issue with my webpack configuration, but I can't find any useful resource online unfortunately. Can anyone help me out? Thanks in advance!

The solution here shoud fix your issue: https://stackoverflow.com/questions/23603514/javascript-require-function-giving-referenceerror-require-is-not-defined — AndrewL64, Dec 19 '18 at 20:04
I've included this script tag (after creating Require.js) : `` . Now I am getting this error : Module name "url" has not been loaded yet for context: _. Use require([]) I've tried both suggested fixed from the documentation, but the error is still there — Adrian Pascu, Dec 19 '18 at 20:15

score 0 · Answer 1 · answered Dec 19 '18 at 20:13

0

Electron is basically a chromium browser connected to a node process through « IPC ».

This means you don’t have require available in the browser.

You need to import your script like this:

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

And also you need to change the target from node to electron-renderer for the browser code.

If you also need to build code for the node side you need to add the electron-main target.

See https://webpack.js.org/configuration/

answered Dec 19 '18 at 20:13

Andréa Maugars

415
3
7

I've tried it with both electron renderer and main as targets, same error : Uncaught ReferenceError: require is not defined. But this time, the error is from the bundle.js. To be more precise, I have a file that imports dekstopCapturer, so this error should be from the rendering thread of electron – Adrian Pascu Dec 19 '18 at 20:21
With webpack you should not write `import` and `require` outside of the bundled code because he replaces these by internal functions. – Andréa Maugars Dec 21 '18 at 10:12

Require not defined in script tag

1 Answers1