Use with webpack.DefinePlugin

[dilanx]

Use with webpack.DefinePlugin

[hacking-robot]

If you want it to work you have to do this:

• First try console.log in your code because in chrome dev tools it will return undefined.
• Second, put everything under process.env otherwise you will get a compilation error.
• Or use dotenv-webpack instead

const { DefinePlugin } = require("webpack")
const Dotenv = require('dotenv-webpack')
const CracoAntDesignPlugin = require('craco-antd')

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
        }
      }
    }
  ],
  webpack: {
    plugins: [
      new Dotenv(),
      new DefinePlugin({
        "process.env.VERSION": JSON.stringify(
          require("./package.json").version
        )
      })
    ]
  }
}

[saostad]

@ChemicalRocketeer @saostad do you still have the issue?

Hi, I fix my problem with another package. rescripts

[saostad]

Here is the solution in case anybody wants to use it:

const { DefinePlugin } = require("webpack");

module.exports = {
  webpack: {
    plugins: [
      new DefinePlugin({
        "process.env.VERSION": JSON.stringify(
          require("./package.json").version
        ),
        "process.env.YEAR": new Date().getFullYear()
      })
    ]
  }
}

and here is another example I added ant design to config, it's good if you need mix and match webpack plugins and babel plugins!

const { DefinePlugin } = require("webpack");

module.exports = {
  webpack: {
    plugins: [
      new DefinePlugin({
        "process.env.VERSION": JSON.stringify(
          require("./package.json").version
        ),
        "process.env.YEAR": new Date().getFullYear()
      })
    ]
  },
  plugins: [
    {
      plugin: require("craco-antd"),
      options: {
        customizeTheme: {
          "@primary-color": "#1DA57A"
        },
        lessLoaderOptions: {
          noIeCompat: true
        }
      }
    }
  ]
};
 

[d0ruk]

You might be confused how the DefinePlugin works.

It sets global variables during your build process.

Thus, to have window.config in your app;

craco.config.js

new webpack.DefinePlugin({
  "process.env": { config: JSON.stringify(appConfig) }
})

index.js

window.config = process.env.config;

[saostad]

same problem here!
what I want to do is having 1 variable with different value in prod and dev environment.
is there any way to define environment variable in webpack config?
something like :

const rewireDefinePlugin = require('react-app-rewire-define-plugin')

// Use `webpack.DefinePlugin` to add the version number from package.json
config = rewireDefinePlugin(config, env, {
  'process.env.VERSION': JSON.stringify(require('./package.json').version)
})

[Atlaswimming]

It works in my project.
craco.config.js :

  const appConfig = { a: 1 };
  const config = {
    webpack: {
      plugins: [
        new webpack.DefinePlugin({
          PROCESS_ENV_BETA: JSON.stringify(process.env.ENV === 'beta'),
          PROCESS_ENV_DEV: JSON.stringify(process.env.ENV === 'dev'),
          config: JSON.stringify(appConfig),
        }),
      ],
      configure: (webpackConfig, { env, paths }) => {
        ...
        return webpackConfig;
      },
   };
...

index.js:

  console.log(config); // eslint-disable-line

then run build results in:

  console.log({a:1})

I was trying to find a way to use DefinePlugin today, and just edit my craco file with your code in this issue, then it just works...
But I cannot find any different between our code.

[patricklafrance]

@ChemicalRocketeer @saostad do you still have the issue?

[soriyath]

Does not work for me.

[gauravmarsoniya]

Does not work for me.