CODEWITHSUNDEEP
javascriptreactjs
IT16031180 Fazlan M.F.M.
IT16031180 Fazlan M.F.M.

Reputation: 11

bundlel.js page not found in react App

bundle.js page not found error, and i add the script tag to the index.html file. In the webpack.config.js file, set the output path as 

output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js',
    },

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>

</body>
</html>

AppContainer.jsx

'use strict';
import React, {Component} from 'react';

export default class AppContainer extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <div>
            <h2>Hello World</h2>
        </div>;
    }
}

webpack.config.js

 'use strict';
     const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, "app.jsx"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env", "react"]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    devServer: {
        contentBase: path.join(__dirname, "/"),
        compress: true
    },
    devtool: "source-map"
};

App.jsx

'use strict';
import React from 'react';

import AppContainer from './AppContainer.jsx';

render(<AppContainer/>, document.getElementById('app'));

this is the my react repository link : react link description here

Upvotes: 1

Views: 51

Answers (1)

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36179

Not a direct answer to your question but maybe you can give a shot to HtmlWebpackPlugin? It will automatically generate HTML for you and properly link your bundle in a script.

run npm i --save-dev html-webpack-plugin, and set:

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

module.exports = {
  entry: path.resolve(__dirname, "app.jsx"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: '/'  // not sure if that will make any difference though
  },
  plugins: [
    new HtmlWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env", "react"]
          }
        }
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  devServer: {
    contentBase: path.join(__dirname, "/"),
    compress: true
  },
  devtool: "source-map"
};

Upvotes: 1

Related Questions