After upgrading react-scripts to v5, craco start does not work properly. App starts with no error but in browser, there is a blank page and if i open inspector, i only see index.html codes not react codes. It was working well with [email protected]. Here is my local files;
package.json
{
"name": "test-app",
"private": true,
"version": "0.1.0",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"dependencies": {
...
"@babel/preset-react": "^7.16.7",
...
"@craco/craco": "^6.4.3",
...
"babel-loader": "^8.2.3",
...
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "^5.0.0",
"scriptjs": "^2.5.9",
"single-spa": "^5.9.0",
"single-spa-react": "^4.6.1",
},
"devDependencies": {
"@babel/core": "7.7.2",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-decorators": "^7.17.2",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-optional-chaining": "^7.6.0",
"@svgr/webpack": "6.2.1",
"@types/chance": "^1.0.8",
"@types/jest": "^24.9.0",
"@types/node": "^16.7.10",
"@types/react": "^16.9.18",
"@types/react-dom": "^16.9.5",
"@types/react-router-dom": "^5.1.3",
"@types/yargs": "^17.0.2",
"@typescript-eslint/eslint-plugin": "^4.14.1",
"@typescript-eslint/parser": "^4.14.1",
"@webpack-cli/serve": "^1.6.1",
"compression-webpack-plugin": "^9.2.0",
"css-loader": "3.2.0",
"dotenv": "^10.0.0",
"dotenv-expand": "5.1.0",
"dotenv-webpack": "^7.1.0",
"env-path": "^1.0.7",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-react-app": "^6.0.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-jsx": "^8.1.0",
"eslint-import-resolver-typescript": "^2.4.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-flowtype": "5.2.0",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-standard": "^4.0.1",
"file-loader": "4.2.0",
"react-app-rewired": "^2.2.1",
"react-svg-loader": "^3.0.3",
"react-test-renderer": "^16.11.0",
"sass-loader": "8.0.0",
"style-loader": "1.0.0",
"systemjs-webpack-interop": "^2.3.7",
"terser-webpack-plugin": "5.3.1",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"url-loader": "2.2.0",
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2",
"webpack-manifest-plugin": "4.1.1",
"workbox-webpack-plugin": "6.4.2",
"yargs": "^17.1.1"
},
"scripts": {
"version": "node scripts/version.js",
"solid": "node scripts/solid.js",
"start": "craco start",
"build": "craco build"
},
"typings": "./src"
}
craco.config.ts
export default {
mode: 'development',
babel: {
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
},
eslint: {
enable: false,
},
webpack: {
configure: (webpackConfig) => {
// add this line
// use System
webpackConfig.output.libraryTarget = 'system';
delete webpackConfig.optimization;
webpackConfig.externals = [
'react',
'react-dom',
'single-spa',
'react-router',
'react-router-dom',
'@mf-experiences',
];
return webpackConfig;
},
},
// Adding Server
devServer: (devServerConfig) => {
devServerConfig.proxy = {
'@mf-experiences': {
target: 'path...',
secure: false,
changeOrigin: true,
},
};
return devServerConfig;
},
};
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/nullifier.scss';
import './styles/index.scss';
import './tracking/facebook.ts';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
const setRealVh = () => {
document.documentElement.style.setProperty(
'--vh',
`${window.innerHeight * 0.01}px`
);
};
window.addEventListener('resize', setRealVh);
document.documentElement.style.setProperty('--intensity', `${768 * 0.005}px`);
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
// serviceWorkerRegistration.register({
// onUpdate: (registration) => registration.waiting.postMessage({ type: 'SKIP_WAITING' }),
// });
serviceWorkerRegistration.unregister();