I have a project created using CRA 5 and I'm using CRACO 7.0.0 with node 16.14.2
Things were fine, I decided to upgrade to Node 20.12.1 and I get the below error when trying to start the project.
(node:6396) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
D:\projects\my-project\frontend\.yarn\cache\import-fresh-npm-3.3.0-3e34265ca9-2cacfad06e.zip\node_modules\import-fresh\index.js:16
const oldModule = require.cache[filePath];
^
TypeError: Cannot read properties of undefined (reading 'D:\projects\my-project\frontend\craco.config.js')
at module.exports (D:\projects\my-project\frontend\.yarn\cache\import-fresh-npm-3.3.0-3e34265ca9-2cacfad06e.zip\node_modules\import-fresh\index.js:16:33)
at loadJs (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\loaders.js:16:18)
at ExplorerSync.loadFileContentSync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:84:26)
at ExplorerSync.createCosmiconfigResultSync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:89:30)
at ExplorerSync.loadSearchPlaceSync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:70:25)
at ExplorerSync.searchDirectorySync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:55:32)
at run (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:35:27)
at cacheWrapperSync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\cacheWrapper.js:28:18)
at ExplorerSync.searchFromDirectorySync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:47:49)
at ExplorerSync.searchSync (D:\projects\my-project\frontend\.yarn\cache\cosmiconfig-npm-7.1.0-13a5090bcd-c53bf7befc.zip\node_modules\cosmiconfig\dist\ExplorerSync.js:27:25)
Node.js v20.12.1
What should happen
(clearly describe what should happen instead)
I shouldn't have got the error
To reproduce
(list the steps to reproduce this behavior)
CRACO version
7.0.0
CRACO config
// craco.config.js
const { CracoAliasPlugin } = require('react-app-alias');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WebpackBar = require('webpackbar');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const path = require('path');
const webpackMerge = require('webpack-merge');
const packageJson = require('./package.json');
const paths = {
src: path.join(__dirname, 'src'),
public: path.join(__dirname, 'public'),
};
const cracoAlias = () => ({
plugins: [
{
plugin: CracoAliasPlugin,
options: {},
},
],
});
const copyTranslations = () => ({
plugin: CopyWebpackPlugin,
options: {
patterns: [
{
from: path.join(paths.src, 'i18n', 'locales', '**', '*'),
to: path.join(paths.public, 'locales'),
},
],
},
});
const production = () => {
return webpackMerge.merge(copyTranslations(), cracoAlias());
};
// module.exports = () => production();
module.exports = {
// https://stackoverflow.com/a/70391506
typescript: {
// Visual Studio Code does type checking, so CRA doesn't need to:
enableTypeChecking: false,
},
babel: {
loaderOptions: {
// Enable babel-loader cache:
cacheDirectory: true, // This is the correct location for cacheDirectory (it was wrong in the question)
// Compress cache which improves launch speed at the expense of disk space:
cacheCompression: false,
},
// https://mui.com/material-ui/guides/minimizing-bundle-size/
plugins: [
['babel-plugin-direct-import', { modules: ['@mui/icons-material'] }],
],
},
eslint: {
enable: false,
},
webpack: {
configure: {
cache: {
// Enable Webpack cache:
type: 'filesystem',
// This have any effect until Craco updates to CRA v5
// which has support for Webpack v5 (see notes below)
},
},
plugins: [
new WebpackBar({
name: `${packageJson.name}@${packageJson.version}`,
reporters:
process.env.NODE_ENV === 'development'
? [
// Enable default progress bar:
'fancy',
// Display time for compile steps after compilation:
'profile',
// (Optional) Display launch time and chunck size:
'stats',
]
: [
// Hide fancy progress bar and profiling for production build:
'basic',
],
}),
new BundleAnalyzerPlugin({
openAnalyzer: false,
analyzerMode: 'static',
reportFilename: path.join(__dirname, 'build', 'bundle_analysis.html'),
}),
],
},
plugins: [
{
plugin: CopyWebpackPlugin,
options: {
patterns: [
{
from: path.join(paths.src, 'i18n', 'locales', '**', '*'),
to: path.join(paths.public, 'locales'),
},
],
},
},
{
plugin: CracoAliasPlugin,
options: {},
},
],
};
Additional information
(anything else that could be useful for us to help you solve your problem)
I even tried to upgrade CRACO from 7.0.0 to 7.1.0 But the error still persists. I difficult to understand what could be cause.
Also, I'm using yarn for my project.
What's happening (clearly describe what's going wrong)
I have a project created using CRA 5 and I'm using CRACO 7.0.0 with node 16.14.2 Things were fine, I decided to upgrade to Node 20.12.1 and I get the below error when trying to start the project.
What should happen (clearly describe what should happen instead)
I shouldn't have got the error
To reproduce (list the steps to reproduce this behavior)
CRACO version 7.0.0
CRACO config
package.json
Additional information (anything else that could be useful for us to help you solve your problem)
I even tried to upgrade CRACO from 7.0.0 to 7.1.0 But the error still persists. I difficult to understand what could be cause. Also, I'm using yarn for my project.