Problem with npm build and babel in React Create App

user_9147880 0
Viewed 738

I'm setting up a new React app, which I haven't done in some time, and running into what I think is a simple problem. When I run npm run build I get this error:

SyntaxError: /Users/.../Projects/MyProject/frontend/src/App.js: Support for the experimental syntax 'jsx' isn't currently enabled (8:5):

   6 | function App() {
   7 |   return (
>  8 |     <div className='App'>
     |     ^
   9 |       <header className='app-header'>
  10 |         <h1>Welcome!</h1>

I'm using Javascript and Flow. I followed the instructions to get Flow working, which involved installing Babel. I sense this is where the problem lies.

Here's my package.json file:

{
  "name": "frontend",
  "main": "lib/index.js",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "flow-bin": "^0.130.0",
    "node-sass": "^4.14.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "babel src/ -d lib/",
    "prepublish": "npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "flow": "flow"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "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/cli": "^7.10.5",
    "@babel/core": "^7.10.5",
    "@babel/preset-flow": "^7.10.4"
  }
}

Might anyone know what the problem is?

babeljs flowtype npm reactjs
1 Answers

I tried the following and it "seemed" to work:

In the root of my React project, I re-added a file called .babelrc. This alone was strange because I had read that this file isn't supported in Babel 6 & above. The contents of this file are:

{
    "presets": [
        ["@babel/preset-env"],
        ["@babel/preset-flow"], 
        ["@babel/preset-react"]
    ]
}

Now npm run build doesn't have any errors. Some files are created in my /lib directory but I still need to test whether they work correctly.

user_91478800
Related