Question 223881 in React native Question posted in
The official React Native documentation can be found here.

React native – ReactJS – webpack 5 bundle.js is not generating in dist folder

I have to upgrade reactjs project from react 15 to 18+ with supporting node 16+

I made the changes in package.json and webpacl.common.js as below but while running it with using npm run start than it’s showing error that bundle.js not found on browser.
package.json

{
  "name": "new-client-widget",
  "version": "0.1.0",
  "main": "app.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js",
    "build": "NODE_ENV='production' webpack --config webpack.prod.js",
    "test": "jest --no-cache --watch"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.14.8",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-react": "^7.14.5",
    "@open-wc/webpack-import-meta-loader": "^0.4.7",
    "babel-loader": "^8.2.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^6.8.1",
    "empty-folder": "^2.0.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "identity-obj-proxy": "^3.0.0",
    "ify-loader": "^1.1.0",
    "jest": "^29.6.1",
    "jest-enzyme": "^4.2.0",
    "jest-html-reporter": "^2.8.0",
    "node-sass": "^9.0.0",
    "react-test-renderer": "^18.2.0",
    "redux-devtools-extension": "^2.13.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.17.0",
    "svg-url-loader": "^8.0.0",
    "webpack": "^5.88.2",
    "webpack-bundle-analyzer": "^4.9.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "webpack-merge": "^4.1.1",
    "webpack-shell-plugin-next": "^2.3.1"
  },
  "dependencies": {
    "@babel/preset-env": "^7.22.9",
    "@babel/preset-react": "^7.22.5",
    "ajv": "^6.11.0",
    "bootstrap": "^3.3.7",
    "chartiq": "file:CIQ_Packages/chartiq-8.9.1.tgz",
    "crypto-js": "^3.1.9-1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.7",
    "faye": "^1.2.4",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^5.5.3",
    "js-cookie": "^2.2.0",
    "material-ui": "^0.15.0",
    "moment": "^2.18.1",
    "prop-types": "^15.5.10",
    "react": "^18.2.0",
    "react-bootstrap": "^0.31.2",
    "react-data-grid": "^3.0.11",
    "react-data-grid-addons": "^3.0.11",
    "react-dom": "^18.2.0",
    "react-paginate": "^5.0.0",
    "react-plotly.js": "^2.1.0",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.2.2",
    "react-select": "^2.4.4",
    "react-tabs": "^2.1.1",
    "react-tooltip": "^3.5.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "remove": "^0.1.5",
    "short-uuid": "^2.3.4",
    "superagent": "^3.8.1",
    "url-loader": "^4.1.1"
  }
}

webpack.common.js

var path = require("path");
var webpack = require("webpack");

module.exports = {
  mode: "development",
  entry: {
    bundle: path.join(__dirname, "src", "js/main.js"),
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/dist",
  },
  devServer: {
    host: "0.0.0.0",
    port: 8080,
  },
  resolve: {
    extensions: [".js", ".jsx", ".json"],
  },
  stats: {
    colors: true,
    reasons: true,
    chunks: true,
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", "@babel/preset-env"],
          },
        },
      },
      {
        test: /.jsx$/,
        use: "ify-loader",
      },
      {
        test: /.svg$/,
        use: "svg-url-loader",
      },
      {
        test: /.scss$/,
        use: "sass-loader",
      },

      {
        test: /.css$/,
        use: "style-loader!css-loader",
      },
      {
        test: /.png$/,
        use: "url-loader?limit=100000",
      },
      {
        test: /.jpg$/,
        use: "file-loader",
      },
      {
        test: /.html$/,
        use: "file-loader?name=client_widget/[name].[ext]",
      },
      {
        test: /.(woff|woff2)(?v=d+.d+.d+)?$/,
        use: "file-loader?name=client_widget/fonts/[name].[ext]",
      },
      {
        test: /.ttf(?v=d+.d+.d+)?$/,
        use: "file-loader?name=client_widget/fonts/[name].[ext]",
      },
      {
        test: /.eot(?v=d+.d+.d+)?$/,
        use: "file-loader?name=client_widget/fonts/[name].[ext]",
      },
    ],
  },
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /./native/,
      contextRegExp: //pg//,
    }),
  ],
};

can anyone please suggest what I’m missing

Tags:

2

Answers


  1. 0

    The problem is that you are only sharing the webpack.common.js file. The webpack.dev.js file is also needed to run the development server.

    Here is the webpack.dev.js file:

    const path = require("path");
const webpack = require("webpack");

module.exports = {
  ...webpack.common.js,
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 8080,
    hot: true,
  },
};

    Now, you can run the development server by running the following command:

    npm run dev

    This will start the development server on port 8080. You can then access the application at http://localhost:8080.

    The bundle.js file should be generated in the dist folder. If you are still getting an error, you can try running the following command:

    npm run build

    This will build the application and generate the bundle.js file. You can then run the application by running the following command:

    npm start

    This will start the application in production mode.

    Login or Signup to reply.
  2. 0

    If you are not seeing the bundle.js file being included in your HTML file, you might want to use the html-webpack-plugin to generate an HTML file that includes your bundles. You’ll need to configure it in your webpack configuration like this:

    var HtmlWebpackPlugin = require('html-webpack-plugin');

// ...

plugins: [
  new HtmlWebpackPlugin({
    template: 'path/to/your/index.html', // your template file
  }),
  // other plugins
]

    Check CSS/SASS Loaders: The configuration for handling SCSS files seems to be missing the required loaders. The sass-loader should be used with css-loader and style-loader.

    {
  test: /.scss$/,
  use: [
    "style-loader",
    "css-loader",
    "sass-loader"
  ]
}

    When upgrading from React 15 to React 18, you might face issues with dependencies that are not compatible with React 18. Make sure to check the documentation for each dependency and upgrade to a version that supports React 18 if necessary.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search