Cannot read property 'mode' of undefined about react-refresh-webpack-plugin HOT 17 CLOSED

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.

Well I don't think this is something that we have to deal with ... ? All plugins could fail if you use them as resolver plugins?

from react-refresh-webpack-plugin.

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.

from react-refresh-webpack-plugin.

Well I don't think this is something that we have to deal with ... ? All plugins could fail if you use them as resolver plugins?

I totally agree with you, you should not handle this case, it's a configuration error made by us.
I added this comment to help anybody who, like me, made this mistake and look for a solution here :)

from react-refresh-webpack-plugin.

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

from react-refresh-webpack-plugin.

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

from react-refresh-webpack-plugin.

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) ...

from react-refresh-webpack-plugin.

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.

from react-refresh-webpack-plugin.

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.

from react-refresh-webpack-plugin.

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/

from react-refresh-webpack-plugin.

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)

from react-refresh-webpack-plugin.

I believe it requires webpack 5

from react-refresh-webpack-plugin.

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?

from react-refresh-webpack-plugin.

I believe the repo only works in webpack 5

from react-refresh-webpack-plugin.

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.

from react-refresh-webpack-plugin.

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

from react-refresh-webpack-plugin.

Same here, i guess that is something related to versions inconsistencies.

from react-refresh-webpack-plugin.

Here what is forwarded into apply method:

  apply(compiler) {
    console.log(util.inspect(compiler, false, null))
    process.exit()

https://gist.github.com/denissabramovs/6946875e786ea37c096928e77ff51f8a

It doesn't have mode, logger and others properties.

from react-refresh-webpack-plugin.