Reading config files in create react app setup in craco

Question

I am looking to read my configuration files depends on my environment without ejecting the webpack of my create-react-app.

I found some StackOverflow references to change the Webpack config for reading config files depends on the environment.

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

I am having the following files under src/config/globals/ directory.

prod.js
dev.js
test.js

I just tried to pick correct config files depends on the environment. My craco config file content,

module.exports = {
    externals: {
      config: process.env.NODE_ENV === 'production' ? require('./src/config/globals/prod.js') : require('./src/config/globals/dev.js'),
    },
  }

But when I try to import the config file inside my components, I am getting Module not found error.

Module not found: Can't resolve 'config' 

My import statement,

import GlobalConfig from 'config'

way of exporting the config file objects is,

module.exports = GlobalConfig;

How can I read the config file depends on the environment which setup by craco config?

Answer 1

The following craco.config.js worked for me:

module.exports = {
    webpack: {
        configure: (webpackConfig) => {
            webpackConfig.externals = {
                'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./conf/config.dev.json'))
            };
            return webpackConfig;
        },
    }
};