For my web app I used Create React App to build it with the typescript template. I am about ready to deploy but I am unable to create a production build with npm run build
. Because of the following Babel error:
src/constants/{file-name}.js
Line 0: Parsing error: You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously
This happens for every file I use to store constant values which are used across my web app. I have tried a lot of things such as refactoring them into .json files and changing my babel config file to .cjs but nothing seems to work. I don’t really get why Babel has such a problem with me using exported values from other files since I use functions from other files.
babel.config.js:
module.exports = function (api) {
return {
plugins: ['macros'],
}
}
package.json:
{
"name": "front-end",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@metamask/sdk": "^0.4",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.4",
"@mui/x-data-grid": "^6.9.2",
"@prisma/client": "^5.0.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.34",
"@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4",
"@types/styled-components": "^5.1.26",
"@typescript-eslint/parser": "^5.59.8",
"babel-plugin-macros": "^3.1.0",
"bootstrap": "^5.3.0",
"emoji-picker-react": "^4.4.11",
"eslint": "^8.42.0",
"ethers": "^6.6.7",
"express": "^4.18.2",
"prompt-sync": "^4.2.0",
"rate-limiter-flexible": "^2.4.2",
"react": "^18.2.0",
"react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",
"react-scripts": "5.0.1",
"socket.io": "^4.7.1",
"styled-components": "^5.3.10",
"ts-node": "^10.9.1",
"typescript": "^5.0.1",
"web-vitals": "^2.1.4",
"web3": "^4.0.3"
},
"overrides": {
"typescript": "^5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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": {
"prettier": "2.8.8",
"prisma": "^5.0.0",
"ts-node": "^10.9.1"
},
"type": "module"
}