Cannot read property 'mode' of undefined

[gaearon]

After adding this plugin to an ejected CRA project I get:

Cannot read property 'mode' of undefined

Are we assuming some particular webpack version?

[drather19]

That's odd... I also tried it on a brand new CRA project using the instructions in the README, but didn't encounter the same error. I did the following:

npx create-react-app . --typescript
npm run eject
npm install react-refresh-webpack-plugin react-refresh

[gaearon]

I tried this on ejected “todomvc” app from Redux repo examples folder.

[pmmmwh]

After adding this plugin to an ejected CRA project I get:

Cannot read property 'mode' of undefined

Are we assuming some particular webpack version?

That's my bad - I did some sniffing on webpack mode but did not add a check for its existence.

Edit: That's actually strange. mode of undefined means that the Webpack compiler did not receive any options (compiler.options.mode) ...

[gaearon]

I did some sniffing on webpack mode but did not add a check for its existence.

Maybe you’re checking it incorrectly? It sounds weird you’d have to sniff for it.

What does TerserPlugin do to only turn on in production mode? We need to do the opposite of that.

[pmmmwh]

I did some sniffing on webpack mode but did not add a check for its existence.

Maybe you’re checking it incorrectly? It sounds weird you’d have to sniff for it.

What does TerserPlugin do to only turn on in production mode? We need to do the opposite of that.

I worded it inappropriately. I edited my comment above to reflect what is actually happening.

I'll check how TerserPlugin does it.

Edit: TerserPlugin actually don't seem to contain any code related to dev/prod checking, I will see if I can reference elsewhere.

[MasterCassim]

Webpack automatically adds the TerserPlugin for production builds since v4:

Sets process.env.NODE_ENV on DefinePlugin to value production . Enables FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin and TerserPlugin .

-> https://webpack.js.org/configuration/mode/

[pmmmwh]

I tried this on ejected “todomvc” app from Redux repo examples folder.

@gaearon I couldn't reproduce this. I just cloned the Redux repo and ejected the same app (todomvc), adding in only the babel plugin and the webpack plugin and I didn't hit this issue. (I hit the issue with #8 / #11 , but they are unrelated to mode checking)

[luisgrases]

I believe it requires webpack 5

[pmmmwh]

I believe it requires webpack 5

Can you explain a bit more? You mean the error only triggers in Webpack 5 or the repo only works in Webpack 5?

[luisgrases]

I believe the repo only works in webpack 5

[pmmmwh]

I believe the repo only works in webpack 5

No, the repo does not work with Webpack 5. All testing I've done and all examples provided here all uses Webpack 4.41.2. So if the plugin does not work for you on webpack 4, please file an issue and provide a reproduce-able case.

[pmmmwh]

I don't think this is still valid (and I am unable to reproduce it), so I'll close this for now.

[paaacman]

I reproduced this by adding the Webpack conf, in webpack.config, in resolve.plugins section, not in plugins section

resolve: {
  plugins: [
    new ReactRefreshWebpackPlugin(),
  ],
}

It's working by putting the configuration in webpack plugins section.