TypeError: Cannot read properties of undefined (reading 'D:\projects\my-project\frontend\craco.config.js') #537
Description
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.
(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: {},
},
],
};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.