Search code examples
javascriptwebpackbrowsercompiler-errorsbundler

Webpack not serving js files to browser UPDATE: website runs in Safari but not Chrome?

The bundle.js file in the browser contains the index.html code, while in node it has the correct javascript code. Any idea why this is? NOTE: this wasn't always the case, older versions of my project still workand the webpack configuration is exactly the same.

EXPECTED behavior:

enter image description here

ACTUAL behavior: enter image description here

  • webpack.config.js
const path = require('path');
const Dotenv = require('dotenv-webpack');

const clientConfig = {
  mode: 'development',
  entry: {
    path: path.join(__dirname, './client/src/index.js')
  },
  output: {
    path: path.join(__dirname, './client/dist'),
    filename: 'bundle.js'
  },
  devServer: {
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /nodeModules/,
        loader: 'babel-loader'
      },
      {
        test: /\.(css|scss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|pdf)$/,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new Dotenv({systemvars: true})
  ]
}

module.exports = clientConfig;
  • file structure (all relevant files)
  -- root 
  |      \
  |       -- client
  |                \
  |                 -- dist
  |                |       \
  |                |        -- index.html
  |                |        -- scss
  |                |               \
  |                |                -- index.scss
  |                \              ...
  |                 -- src
  |                       \
  |                        -- index.js
  |                        -- components
  |                                     \
  |                                      -- App.js 
  |                                      ...  
  -- webpack.config.js

enter image description here

  • bundle.js in node enter image description here

UPDATE: website runs in Safari but not Chrome???

  • enter image description here
Solution

  • None of my projects were running on the chrome browser. Whenever I had to run something with webpack I would recieve this error message

    Webpack error bundle.js:1 Uncaught SyntaxError: Unexpected token <

    However, my projects would work just fine in the Safari browser. After a quick Google search I stumbled across this article https://kinsta.com/knowledgebase/this-site-cant-be-reached/#:~:text=Clear%20Your%20Browser%20Cache&text=To%20solve%20that%20issue%2C%20you,to%20clear%20your%20browser%20cache.&text=Clearing%20cached%20images%20and%20files,was%20giving%20you%20problems%20earlier.

    I decided to wing it and I cleared my browser's cache of all data and cookies from the past 24 hours.

    The error is gone and my sites work now.

    I'm not entirely sure what happened but the issue is resolved. If anyone wants to contribute or elaborate fell free to do so.