Plugin configuration doesn't seem to work

[Fantasim]

Hello,

I'm trying to launch my react server with one package using Buffer

Here is the error I get in the browser (error screenshot):

Uncaught ReferenceError: Buffer is not defined

So I used the method indicated in this stackoverflow answer to solve the problem.

Then here is my config.overrides.js

const webpack = require('webpack')

module.exports = function override (config, env) {
    config.resolve.fallback = { 
        "stream": require.resolve("stream-browserify"),
        "buffer": require.resolve('buffer'),
    }
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
        })
    ]) 
    return config
}

Why is my fallback is taken into count (it works) but the plugins part does not?

I want to say that I tried this configuration with the same app but ejected and it worked.

Thank you.

[dawnmist]

If it works in an ejected version of the app, the next step to try would be to compare the order in which things are defined in the config file, and the versions of packages used in the two versions.

What I find really useful to enable comparisons is to write the config file out to the console log then exit the compilation (before CRA wipes the screen), like below:

const webpack = require('webpack')

// Reusable JSON.stringify replacer function that turns RegExp values into strings for debugging
// (Otherwise a RegExp is output as "{}" - this outputs it as "/*.tsx?/")
const stringifyConfig = (key, value) => {
  if (value instanceof RegExp) {
    return value.toString();
  }
  return value;
};

module.exports = function override (config, env) {
    config.resolve.fallback = { 
        "stream": require.resolve("stream-browserify"),
        "buffer": require.resolve('buffer'),
    }
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
        })
    ]) 

    console.log(JSON.stringify(config, stringifyConfig, 2)
    throw new Error("Stopping compile so you can read the config")

    return config
}

When you've got the final config out, you can remove the "throw" and console log - they're there for debugging only.

My guess is that there is a dependency, conflict, or package version that is different between the your react-app-rewired modified config and the ejected app's config. Comparing the two will hopefully help you to identify what is different between them, so that you can modify your config-overrides config to match the ejected version.

[Fantasim]

That was a great answer; you gave me the right debug function and hints. I quickly found the problem (it was different versioning between the two projects).

Thank you very much!