Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CRACO build failes because of React Refresh Babel #522

Open
rkesters opened this issue Aug 19, 2023 · 3 comments
Open

CRACO build failes because of React Refresh Babel #522

rkesters opened this issue Aug 19, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@rkesters
Copy link

What's happening
Running craco build fails with

Error: [BABEL] /xxx/repo/ccpaas_frontend/src/index.tsx: React Refresh Babel transform should only be enabled in development environment. Instead, the environment is: "production". If you want to override this check, pass {skipEnvCheck: true} as plugin options. (While processing: "/xxxe/repo/ccpaas_frontend/node_modules/react-refresh/babel.js")

What should happen
should not fail

To reproduce
execute the build command

CRACO version
7.0.1

CRACO config

module.exports = {
  plugins: [{ plugin: require("@semantic-ui-react/craco-less") }],
};

package.json

"dependencies": {
    "@aws-amplify/api": "^5.3.3",
    "@aws-amplify/auth": "^5.5.3",
    "@aws-amplify/cache": "^5.1.3",
    "@aws-amplify/core": "^5.5.2",
    "@aws-amplify/datastore": "^4.6.3",
    "@aws-amplify/ui-react": "^5.0.4",
    "@aws-sdk/util-utf8-browser": "^3.259.0",
    "@craco/craco": "^7.1.0",
    "@monaco-editor/react": "^4.3.1",
    "@semantic-ui-react/craco-less": "^3.0.0",
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/guacamole-client": "^1.0.5",
    "@types/isomorphic-fetch": "^0.0.35",
    "@types/jest": "^27.0.2",
    "@types/node": "^16.11.7",
    "@types/react": "^17.0.35",
    "@types/react-dom": "^17.0.11",
    "@types/react-router": "^5.1.17",
    "@types/react-router-dom": "^5.3.2",
    "@types/react-syntax-highlighter": "^13.5.2",
    "@types/uuid": "^8.3.1",
    "@typescript-eslint/eslint-plugin": "^4.28.4",
    "@typescript-eslint/parser": "^4.28.4",
    "@uiw/react-md-editor": "^3.20.0",
    "aws-amplify": "^5.3.3",
    "aws-sdk": "^2.1414.0",
    "axios": "^0.24.0",
    "babel-eslint": "^10.1.0",
    "cp-react-tree-table": "^1.1.1",
    "cypress": "^11.2.0",
    "cypress-dotenv": "^2.0.0",
    "dotenv": "^10.0.0",
    "eslint": "^7.31.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-react": "^7.27.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "flexlayout-react": "^0.5.5",
    "guacamole-client": "^1.4.0-rc",
    "isomorphic-fetch": "^3.0.0",
    "mustache": "^4.2.0",
    "prettier": "^2.4.1",
    "rc-tree": "^4.2.2",
    "react": "^17.0.1",
    "react-contexify": "^5.0.0",
    "react-dom": "^17.0.1",
    "react-dropzone": "^11.3.4",
    "react-hook-form": "^6.15.4",
    "react-icons": "^4.3.1",
    "react-markdown": "^8.0.3",
    "react-query": "^3.33.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.1",
    "react-semantic-toasts": "^0.6.5",
    "react-syntax-highlighter": "^15.4.5",
    "react-timeago": "^5.3.0",
    "semantic-ui-less": "^2.4.1",
    "semantic-ui-react": "^2.0.4",
    "ssm-session": "^1.0.4",
    "typescript": "^4.5.2",
    "usehooks-ts": "^2.9.1",
    "uuid": "^8.3.2",
    "web-vitals": "^3.1.0",
    "xterm": "^4.15.0",
    "xterm-addon-fit": "^0.5.0"
  }

Additional information

@rkesters rkesters added the bug Something isn't working label Aug 19, 2023
@sarah-cleveland
Copy link

I ran into this issue as well and had to set REACT_APP_FAST_REFRESH AND FAST_REFRESH to false.

@augusto-joecoffee
Copy link

same for me

@eric-nguyen-cs
Copy link

You can also set the NODE_ENV to production to solve this build error.
If you are coming from create-react-app, the NODE_ENV is hard-coded for the react-scripts build command whereas the craco build command uses the user-defined NODE_ENV if possible.
Is that intended @dilanx ?

eric-nguyen-cs added a commit to openfoodfacts/taxonomy-editor that referenced this issue Feb 9, 2024
eric-nguyen-cs added a commit to openfoodfacts/taxonomy-editor that referenced this issue Feb 13, 2024
* chore: update to typescript on all files

* chore: move dev dependencies

* chore: move to craco to support aliases

* chore: add eslint explicitly with better config

* fix: fix eslint errors

* chore: do aliased paths when useful

* chore: fix Dockerfile and eslint errors

* fix: fix craco build

Linked to: dilanx/craco#522 (comment)

* chore: update to alias

* fix: fix other ts errors
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants