This is avery simple React jsx to js convertor project we're using to integrate React code into a legacy .aspx website. Eventually the who website will be written in React.
Whenever the Fragment shorthand <> is used the compiler returns a SyntaxError: Unexpected token.
Sample.js
import React from "react";
function Sample() {
return (
<>
Hello world
</>
);
}
SyntaxError: src/Sample.js: Unexpected token (6:9)
4 | function Sample() {
5 | return (
> 6 | <>
| ^
7 | Hello world
8 | </>
9 | );
The project is using Babel 7.17.7 and babel-preset-react-app 3.1.2 which I think means the presets are set to recognize the shorthand <>.
This is the contents of the package.json file.
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "jsx.bat"
},
"keywords": [],
"author": "Russ Petersen (http://www.petesoft.com/)",
"license": "ISC",
"dependencies": {
},
"devDependencies": {
"@babel/core": "^7.17.7",
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^3.1.2",
"react": "^17.0.2"
}
}
I'm invoking the compile process with this command line.
jsx.bat
npx babel --watch src --out-dir . --presets react-app/prod
Yes we can use <React.Fragment> but <> has more style.
Any help you can give is appreciated.
Found the answer in "Uncaught SyntaxError: Cannot use import statement outside a module" after babel compilation
Changed command line (jsx.bat) to
npx babel --watch src --out-dir . --presets @babel/preset-react
and
package.json devDependencies to
"devDependencies": {
"react": "^17.0.2",
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.7",
"@babel/preset-react": "^7.16.7"
}