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 up 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 server 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? Any help is appreciated, thanks in advance.

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