Getting Syntax error for react-redux when building project

[MrRobo-t]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: ^17.0.1
• ReactDOM/React Native: 17.0.1
• Redux: 4.1.0
• React Redux: 7.2.4

What is the current behavior?

I am building on create-react app. Below is the error I am getting when doing npm start:

./node_modules/react-redux/src/components/connectAdvanced.js SyntaxError: /Users/..../project1/node_modules/react-redux/src/components/connectAdvanced.js: Support for the experimental syntax 'jsx' isn't currently enabled (292:29):

290 | return propsContext && 291 | propsContext.Consumer &&

292 | isContextConsumer() | ^ 293 | ? propsContext 294 | : Context 295 | }, [propsContext, Context])

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

What is the expected behavior?

Its an old project and used to compile perfectly. Not sure if there's a version issue or something that I am missing.

Below is my package.json:

{ "name": "ui", "version": "0.2.0", "private": true, "dependencies": { "@coreui/react": "3.4.6", "@coreui/coreui": "4.3.2", "@material-ui/core": "4.10.0", "@material-ui/icons": "4.11.2", "@material-ui/lab": "4.0.0-alpha.57", "@nivo/bar": "0.73.1", "@nivo/bullet": "0.73.0", "@nivo/core": "0.73.0", "@nivo/generators": "0.73.0", "@storybook/react": "6.3.4", "@testing-library/jest-dom": "5.11.9", "@testing-library/react": "11.2.5", "@testing-library/user-event": "12.7.1", "axios": "0.18.0", "babel-loader": "8.1.0", "material-table": "1.58.2", "notistack": "1.0.9", "postcss-safe-parser": "7.0.0", "react": "^17.0.1", "react-circular-progressbar": "2.0.4", "react-dom": "17.0.1", "react-lineto": "3.2.0", "react-redux": "7.2.4", "react-router-dom": "5.2.0", "react-scripts": "4.0.2", "react-spring": "9.2.4", "react-swipeable-views": "0.14.0", "redux": "4.1.0", "redux-logger": "3.0.6", "redux-persist": "6.0.0", "redux-promise-middleware": "5.1.1", "redux-thunk": "2.3.0", "resolve": "1.8.1", "web-vitals": "1.1.0", "webpack": "4.44.2" }, "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" ] }, "overrides": { "babel-loader": "8.1.0", "webpack": "4.44.2" } }

Which browser and OS are affected by this issue?

Observed across browsers

Did this work in previous versions of React Redux?

• [X] Yes

[markerikson]

The real issue here is that your build setup shouldn't be trying to load any files under node_modules/react-redux/src. It should be using the precompiled build output in either /lib or /es.

I know it's Create-React-App, so you don't have a lot of control over the build setup here. My main suggestion would be to try updating to react-scripts@^5. But yeah, this is an error on the build tooling side.

[MrRobo-t]

I have the react-scripts@^5 but its not helping.. Looks like the create-react-app requires babel 8.0.1 which I have supplied but the build is failing with the same error again and again..

[phryneas]

Are you 100% sure that you don't just have an import from react-redux/src somewhere in your app?

[MrRobo-t]

My bad. It was the version issue that messed up the project. It's working fine now. Thanks for the support 😊