Webpack-dev-server: dev-server serving old files

[zwhitchcox]

So, I created my webpack config:

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

module.exports = {
  entry: [
    './app/app.js',
    'webpack/hot/only-dev-server'
  ],
  output: {
    path: __dirname+'/dist',
    filename: 'bundle.js',
    publicPath: '/ashworthfirm'
  },
  module: {
    loaders: [
      {   
        test: /\.scss$/, 
        loaders: ['style','css','sass'] 
      },  
      {   
        test: /\.html$/,
        exclude: /index\.html$/,
        loader: 'babel?presets[]=react,presets[]=es2015!html-jsx-loader'
      },
      {   
        test: /\.png$/,
        loader: ['url-loader']
      },    
      {   
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets:['react','es2015']
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin(
      { 
        template: './app/index.html'
      }
    ),
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': "development"
    }),
  ]
}

Only, as you may have noticed, I didn't put quotes inside the quotes for the development environment. So, I get an error, development is undefined. No matter. I'll just add the quotes, right?

Wrong. development is undefined. Ok, I must have done something wrong. A little more debugging, and ...development is undefined.

Ok, wtf. All right fine, I'll try 'process.env.NODE_ENV': "'dog'". Just as a sanity check. development is undefined

Ok, this is really weird. I delete the plugin entirely. development is undefined. I remove all the code from my entry file: development is undefined.

Ok, so finally, I figured out, webpack for whatever reason has just decided to continue serving a file from 8 builds ago and hasn't bothered to tell me. Ok, great.

So now what? All right, I'll try --no-cache on the dev server. Maybe it's just a "helpful" feature of webpack. development is undefined.

So, anyway, kind of at the end of my rope here. Does anyone have any suggestions for how I might fix this?

[zwhitchcox]

Nevermind, as usual, it was me being a f*ing moron

[Offirmo]

Could you share your solution for other f*ing morons around the internet, like me?

[zwhitchcox]

Lmao. You've got to put development in a string. So, it would need to be

new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"development"'

Otherwise, the define plugin just literally puts development with no quotation marks, which makes it an undefined variable.

[Offirmo]

Ok not what I was expecting but thanks. My solutions for other googlers:

Why is webpack-dev-server serving old files?

webpack-dev-server has no persistent cache. If you restarted it and it continue serving old files, it means that those files actually exist somewhere in your directory structure and are picked. Did you duplicate your project and are still pointing to the old one, for ex. through "publicPath" or "contentBase"? (= my problem)

Why is react complaining about development is undefined even when I triple-checked?

Yes, the incorrect line 'process.env.NODE_ENV': "development" is somewhere in your code. Do a file search for process.env.NODE_ENV and you'll find it ;) In my case, it was in the webpack invocation parameters in package.json/scripts! Also, if you use webpack >=4, you shouldn't have to define this var yourself, it's gained for free through config.mode = 'development'

[bigsee]

👆🏽This...

...made me look for stupid, obvious stuff and found an accidentally duplicated folder that was confusing things. 🙈

Thank you, @Offirmo!

[ascott18]

For me, this was the node_modules/.cache folder, which has caches for various loaders (babel-loader, ts-loader, etc). Deleting this folder instantly fixed this issue for me.