CODEWITHSUNDEEP
javascriptreactjswebpack
agillbraun
agillbraun

Reputation: 13

React not working when bundled with Webpack

I did the most bare-bones React implementation possible, and I'm running into problems. When I bundle React, then open up the index.html page, it is completely blank. No console errors, or anything to say I did something wrong.

Here is my webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/client/index.js',
  output: {
    path: path.resolve('src/client/public/bundle'),
    filename: 'build.js'
  },
  module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                { loader: 'css-loader' }
            ]
        },
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
               use: "babel-loader"
            }
        ]
    }
};

And my very basic index.js file looks like this:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hi</h1>,
  document.getElementById('app'),
);

When this is bundled, and included in a <script> tag, nothing happens. I think this is a react issue because when I externally add <script> tags for react.js and react-dom.js from CDN, the program works as expected.

Am I doing something wrong in terms of bundling react? I would like there to only be one included file (bundle.js). How can I achieve this?

Edit

Following Tomasz' suggestion, I installed HtmlWebpackPlugin. Using that, it suddenly works... I'm very confused, as almost nothing has changed. In both, I'm using a <div id="app"></div>. Anyway, thanks.

Edit 2

I figured it out. I was calling the bundled script like this: <script src="bundle.js" /> rather than: <script src="bundle.js"></script> meaning it did not execute. It works now!

Upvotes: 1

Views: 2197

Answers (1)

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

Try to use html webpack plugin:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/client/index.js',
  output: {
    path: path.resolve('src/client/public/bundle'),
    filename: 'build.js'
  },
  module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                { loader: 'css-loader' }
            ]
        },
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
               use: "babel-loader"
            }
        ]
    }
    plugins: [
      new HtmlWebpackPlugin()
    ]
};

It will automatically generate index.html file with script tag to your bundle file. I think it should help or at least point to the error.

Upvotes: 1

Related Questions