javascriptreactjsexpresswebpack-dev-serverwebpack-5

When in development mode, unable to GET bundle.js file, fails with 404 Not Found

While trying to run the application locally, browser is not able to load bundle.js:

enter image description here

This is the setup to load bundle.js inside index.html:

<script type="text/javascript" src="/static/js/bundle.js"></script>

But when hitting directly to this request URL: http://localhost:3000/static/js/bundle.js, bundled JS code is visible:

enter image description here

If Webpack failed to generate the bundle.js file then this should also fail, I assume. I can also see this assets report:

enter image description here

Below is my output config inside webpack.config

     output: {
        pathinfo: true,
        filename: 'static/js/bundle.js',
        chunkFilename: 'static/js/[name].chunk.js',
        publicPath: "/",
        devtoolModuleFilenameTemplate: (info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
      },

This is how I serve static files using Express:

  app.use(favicon(path.join(__dirname, '../build', 'favicon.ico')));
  app.use('/static', express.static(path.join(__dirname, '../build/static/'), { maxAge: '30d' }));

My build folder structure is:

-build
--static
---css
----main.123sf.css
---js
----main.123124.js
----main.123124.js.LICENSE.txt
---media
----mygif.gif
--favicon.ico
--index.html
--login.html

When in development mode, I believe if everything goes well bundle.js can be located at below structure inside Sources.

-top
--localhost:3000
---static/js
----bundle.js

These are the package versions I am currently using:

    "express": "^4.21.2",
    "webpack": "^5.96.1",
    "webpack-dev-server": "^5.2.0",

What am I doing wrong here?

Solution

  • As far as I understand when browser tries to GET bundle.js from http://localhost:3000/static/js/bundle.js it checks into '/static' virtual path which has the middleware to server static files:

    app.use('/static', express.static(path.join(__dirname, '../build/static/'), { maxAge: '30d' }));

    As my build folder structure looks like this

    -build
--static
---css
----main.123sf.css
---js
----main.123124.js
----main.123124.js.LICENSE.txt
---media
----mygif.gif
--favicon.ico
--index.html
--login.html

    and it does not contain the bundled javascript in the name bundle.js, it returns 404 not found error. I kind of tried every solution available on the internet :( but nothing worked. So I set up things to get the files served from file system.

    devMiddleware: {
      publicPath: config.output.publicPath,
      writeToDisk: true,
    },

    And then added another middleware for '/static' path to read from that dist directory, by default writeToDisk generates dist folder in the root directory for output.

    app.use('/static', express.static(path.join(__dirname, '../dist/static/'), { maxAge: '30d' }));

    If needed, we redirect the output path by setting path inside output of webpack.config:

    output: {
    path: 'path/to/get/output/files',
}

    I was upgrading my application environment from node 10 to node 16 and thus ended up upgrading my webpack related packages as well. The versions I used before:

    "express": "^4.17.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.11.3"

    I am pretty sure express has nothing to do with this. But I just wonder how things worked with these old versions in node 10