craco
craco copied to clipboard
dilanx
TypeError: Cannot read properties of undefined (reading 'D:\projects\my-project\frontend\craco.config.js')
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
// paste your package.json (or at least your project dependencies) here
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"packageManager": "[email protected]",
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^4.5.8",
"@hookform/error-message": "^2.0.1",
"@hookform/resolvers": "^3.1.1",
"@mui/base": "^5.0.0-beta.30",
"@mui/icons-material": "^5.15.3",
"@mui/lab": "^5.0.0-alpha.159",
"@mui/material": "^5.15.3",
"@mui/system": "^5.15.3",
"@mui/x-charts": "^6.18.7",
"@mui/x-data-grid": "^6.18.7",
"@mui/x-date-pickers": "^6.18.7",
"@mui/x-tree-view": "^6.17.0",
"@uidotdev/usehooks": "^2.4.1",
"axios": "^1.2.1",
"date-fns": "^2.30.0",
"google-sans": "github:agnel/google-sans",
"http-status-codes": "^2.3.0",
"i18next": "^22.5.1",
"i18next-browser-languagedetector": "^7.0.2",
"i18next-http-backend": "^2.2.1",
"js-cookie": "^3.0.5",
"lodash": "^4.17.21",
"match-sorter": "^6.3.1",
"mdi-material-ui": "^7.6.0",
"mobx": "^6.9.0",
"mobx-react": "^7.6.0",
"mousetrap": "^1.6.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-highlight-words": "^0.20.0",
"react-hook-form": "^7.49.3",
"react-i18next": "^12.3.1",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.4",
"redux": "^4.2.0",
"rxjs": "^7.6.0",
"rxjs-hooks": "^0.8.0-alpha.0",
"web-vitals": "^2.1.0",
"yup": "^1.2.0"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject",
"lint": "eslint src",
"prettier:fix": "prettier --write",
"prepare": "husky install"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@babel/eslint-parser": "^7.19.1",
"@babel/plugin-syntax-flow": "^7.18.6",
"@babel/plugin-transform-react-jsx": "^7.19.0",
"@commitlint/cli": "^18.4.4",
"@commitlint/config-conventional": "^18.4.4",
"@craco/craco": "7.1.0",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/js-cookie": "^3.0.3",
"@types/lodash": "^4.14.191",
"@types/mousetrap": "^1.6.11",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/react-highlight-words": "^0.16.4",
"@types/webpackbar": "^4.0.6",
"@typescript-eslint/eslint-plugin": "^5.45.1",
"@typescript-eslint/parser": "^5.45.1",
"babel-plugin-direct-import": "^1.0.0",
"copy-webpack-plugin": "^11.0.0",
"eslint": "^8.29.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-webpack-plugin": "^4.0.1",
"husky": "^8.0.2",
"lint-staged": "^13.1.0",
"postcss": "^8.4.19",
"prettier": "^2.8.0",
"prettier-eslint": "^15.0.1",
"react-app-alias": "^2.2.2",
"react-dev-utils": "^12.0.1",
"react-scripts": "5.0.1",
"typescript": "^4.4.2",
"webpack-bundle-analyzer": "^4.10.1",
"webpack-merge": "^5.9.0",
"webpackbar": "^5.0.2"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,json,yml,yaml,css,scss,ts,tsx,md}": [
"yarn prettier:fix",
"yarn lint"
]
},
"resolutions": {
"react-scripts/eslint-webpack-plugin": "4.0.1"
},
"type": "module"
}
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.
