Use with webpack.DefinePlugin

I’m trying to inject some constants into my app at build time under a global object called config, but no matter where I put my plugin, when I run the app I get 'config' is not defined. What am I doing wrong? Here’s my craco.config.js:

const webpack = require('webpack')
const reactHotReloadPlugin = require('craco-plugin-react-hot-reload')

const appConfig = require('./config')

module.exports = {
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        config: JSON.stringify(appConfig),
      })
    ]
  },
  plugins: [
    { plugin: reactHotReloadPlugin }
  ]
}

[david-soyez]

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]

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
        }
      }
    }
  ]
};