Command in prompt: react-app-rewired start
An error occurs and what I understand from it is that my React Native project does not support the 'jsx' syntax, but it could if you enable certain settings.
Starting the development server...
Failed to compile.
SyntaxError: C:\Users\desktop\projectreact_frontend\node_modules\react-native-pell-rich-editor\src\RichEditor.js: Support for the experimental syntax 'jsx' isn't currently enabled (263:13):
261 | const {html: viewHTML} = that.state;
262 | return (
> 263 | <>
| ^
264 | <WebView
265 | useWebKit={true}
266 | scrollEnabled={false}
Add @babel/preset-react (https://git.io/JfeDR) 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://git.io/vb4yA) to the 'plugins' section to enable parsing.
assets by path static/ 7.96 MiB
assets by path static/media/*.png 98.9 KiB
asset static/media/logo.6544c416aa5d553bcd11.png 83.3 KiB [emitted] [immutable] [from: src/assets/logo/logo.png] (auxiliary name: main)
asset static/media/appIcon.d2692da871f086d863a0.png 15.6 KiB [emitted] [immutable] [from: src/assets/logo/appIcon.png] (auxiliary name: main)
asset static/js/bundle.js 6.5 MiB [emitted] (name: main) 1 related asset
asset static/media/MaterialCommunityIcons.5d42b4e60858731e7b65.ttf 1.09 MiB [emitted] [immutable] [from: node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf] (auxiliary name: main)
asset static/media/walking.4e665c3c25af9a98c447.jpg 271 KiB [emitted] [immutable] [from: src/assets/backgrounds/walking.jpg] (auxiliary name: main)
asset index.html 1.8 KiB [emitted]
asset asset-manifest.json 542 bytes [emitted]
cached modules 14.9 MiB (javascript) 1.46 MiB (asset) [cached] 2653 modules
runtime modules 28.3 KiB 14 modules
javascript modules 78 bytes
./node_modules/react-native-pell-rich-editor/src/RichEditor.js 39 bytes [built] [1 error]
./node_modules/react-native-pell-rich-editor/src/RichToolbar.js 39 bytes [built] [1 error]
ERROR in ./node_modules/react-native-pell-rich-editor/src/RichEditor.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\desktop\projectreact_frontend\node_modules\react-native-pell-rich-editor\src\RichEditor.js: Support for the experimental syntax 'jsx' isn't currently enabled (263:13):
261 | const {html: viewHTML} = that.state;
262 | return (
> 263 | <>
| ^
264 | <WebView
265 | useWebKit={true}
266 | scrollEnabled={false}
Add @babel/preset-react (https://git.io/JfeDR) 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://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:476:17)
at Parser.raiseWithData (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:469:17)
at Parser.expectOnePlugin (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:3820:18)
at Parser.parseExprAtom (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12577:18)
at Parser.parseExprSubscripts (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12149:23)
at Parser.parseUpdate (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12129:21)
at Parser.parseMaybeUnary (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12104:23)
at Parser.parseMaybeUnaryOrPrivate (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11901:61)
at Parser.parseExprOps (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11908:23)
at Parser.parseMaybeConditional (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11878:23)
@ ./node_modules/react-native-pell-rich-editor/src/index.js 1:0-38 5:0-87
@ ./src/Screens/FindingsScreen/RichTextEditorPell.tsx 8:0-81 22:37-47 55:37-48 57:18-30 57:32-44 57:46-61 57:63-80 57:82-102 57:104-120 57:122-138 57:140-156 57:158-183 57:185-210 59:11-27 74:11-27 89:11-27
@ ./src/Screens/FindingsScreen/FindingsDocumentEditorScreen.tsx 12:0-58 125:39-57
@ ./src/Screens/FindingsScreen/FindingsScreen.tsx 10:0-78 43:19-47
@ ./src/MainNavigationBar/MainNavigationTabs.tsx 16:0-70 136:17-31
@ ./src/App.tsx 15:0-75 74:39-56
@ ./src/index.tsx 10:0-24 27:53-56
ERROR in ./node_modules/react-native-pell-rich-editor/src/RichToolbar.js
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\desktop\projectreact_frontend\node_modules\react-native-pell-rich-editor\src\RichToolbar.js: Support for the experimental syntax 'jsx' isn't currently enabled (229:13):
227 | : that.props.iconTint;
228 | return (
> 229 | <TouchableOpacity
| ^
230 | key={action}
231 | disabled={disabled}
232 | style={[{width: iconGap + iconSize}, styles.item, itemStyle, style]}
Add @babel/preset-react (https://git.io/JfeDR) 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://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:476:17)
at Parser.raiseWithData (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:469:17)
at Parser.expectOnePlugin (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:3820:18)
at Parser.parseExprAtom (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12577:18)
at Parser.parseExprSubscripts (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12149:23)
at Parser.parseUpdate (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12129:21)
at Parser.parseMaybeUnary (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:12104:23)
at Parser.parseMaybeUnaryOrPrivate (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11901:61)
at Parser.parseExprOps (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11908:23)
at Parser.parseMaybeConditional (C:\Users\desktop\projectreact_frontend\node_modules\@babel\parser\lib\index.js:11878:23)
@ ./node_modules/react-native-pell-rich-editor/src/index.js 2:0-60 5:0-87 5:0-87
@ ./src/Screens/FindingsScreen/RichTextEditorPell.tsx 8:0-81 22:37-47 55:37-48 57:18-30 57:32-44 57:46-61 57:63-80 57:82-102 57:104-120 57:122-138 57:140-156 57:158-183 57:185-210 59:11-27 74:11-27 89:11-27
@ ./src/Screens/FindingsScreen/FindingsDocumentEditorScreen.tsx 12:0-58 125:39-57
@ ./src/Screens/FindingsScreen/FindingsScreen.tsx 10:0-78 43:19-47
@ ./src/MainNavigationBar/MainNavigationTabs.tsx 16:0-70 136:17-31
@ ./src/App.tsx 15:0-75 74:39-56
@ ./src/index.tsx 10:0-24 27:53-56
webpack 5.70.0 compiled with 2 errors in 5837 ms
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.
The Android version works flawlessly. The web version does not work because of this error. The error only occurs in the open source rich editor library from here: https://github.com/wxik/react-native-rich-editor
I found these related issues:
- Support for the experimental syntax 'jsx' isn't currently enabled
- SyntaxError: Support for the experimental syntax ‘jsx’ isn’t currently enabled
- https://stackoverflow.com/a/65889977/9611924
- https://babeljs.io/docs/en/configuration
I've tried:
yarn add @babel/preset-react --devcreate
.babelrcfile with:{ "presets": ["@babel/preset-env", @babel/preset-react"]}update
babel.config.jsfrommodule.exports = { presets: ['module:metro-react-native-babel-preset', '@babel/preset-react'], env: { production: { plugins: ['react-native-paper/babel'], }, }, };to
module.exports = { presets: [ ['@babel/preset-env', {targets: {node: 'current'}}], ['@babel/preset-react', {targets: {node: 'current'}}], // add this ], env: { production: { plugins: ['react-native-paper/babel'], }, }, };or
module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], };It makes me even question if that file is read.
.eslintrc.js
module.exports = {
root: true,
extends: [
// When adding extensions it might be needed to remove yarn.lock and recreate it through yarn. Removing node_modules should not be needed.
// './node_modules/gts',
'@react-native-community',
'prettier',
],
rules: {
'react-native/no-inline-styles': 'off',
},
globals: {JSX: true, ReactNavigation: true},
ignorePatterns: ['node_modules/', 'coverage/', 'android/', 'ios/', 'src/mocks/Setup'],
};
.yarnrc.yml
nodeLinker: node-modules
plugins:
- path: .yarn/plugins/@yarnpkg/plugin-version.cjs
spec: '@yarnpkg/plugin-version'
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
spec: '@yarnpkg/plugin-interactive-tools'
yarnPath: .yarn/releases/yarn-3.1.1.cjs
pnpFallbackMode: all
metro.config.js
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
package.json
{
"name": "projectabc",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"web": "react-app-rewired start",
"build": "react-app-rewired build",
"build-prod": "set \"GENERATE_SOURCEMAP=false\"&& react-scripts build",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"@aws-amplify/ui": "^3.2.0",
"@aws-amplify/ui-react": "^2.8.0",
"@mdi/js": "^7.0.96",
"@react-native-async-storage/async-storage": "^1.16.1",
"@react-native-clipboard/clipboard": "^1.9.0",
"@react-native-community/netinfo": "^8.1.0",
"@react-native-picker/picker": "^2.3.1",
"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/material-bottom-tabs": "^6.1.1",
"@react-navigation/material-top-tabs": "^6.1.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.5.0",
"@reduxjs/toolkit": "^1.8.4",
"amazon-cognito-identity-js": "^5.2.7",
"aws-amplify": "^4.3.15",
"aws-amplify-react-native": "^6.0.5",
"color": "^4.2.3",
"core-js": "^3.21.1",
"deepmerge": "^4.2.2",
"eject": "^0.0.4",
"graphql-react": "^19.0.0",
"i18next": "^21.9.0",
"moment": "^2.29.1",
"react": "18.0.0",
"react-art": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.18.3",
"react-native": "^0.69.5",
"react-native-asset": "^2.0.1",
"react-native-cn-quill": "0.7.16",
"react-native-eject": "^0.1.2",
"react-native-expandable-fab": "^1.1.2",
"react-native-htmlview": "^0.16.0",
"react-native-localize": "^2.2.2",
"react-native-paper": "^4.11.2",
"react-native-paper-dates": "^0.8.7",
"react-native-pell-rich-editor": "^1.8.8",
"react-native-rsa": "^0.0.3",
"react-native-safe-area-context": "^4.1.2",
"react-native-screens": "^3.13.1",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "^0.18.7",
"react-native-webview": "^11.23.0",
"react-quill": "^1.3.5",
"react-redux": "^7.2.8",
"ts-debounce": "^4.0.0"
},
"devDependencies": {
"@babel/core": "^7.19.0",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-object-rest-spread": "^7.17.3",
"@babel/preset-env": "^7.19.0",
"@babel/preset-flow": "^7.16.7",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@babel/runtime": "^7.17.2",
"@react-native-community/eslint-config": "^3.0.1",
"@types/jest": "^27.4.1",
"@types/react-native": "^0.67.2",
"@types/react-native-vector-icons": "^6.4.10",
"@types/react-test-renderer": "^17.0.1",
"babel-jest": "^27.5.1",
"babel-loader": "^8.2.5",
"eslint": "^7.32.0",
"graphql": "^16.6.0",
"gts": "^3.1.0",
"jest": "^27.5.1",
"metro-react-native-babel-preset": "^0.69.0",
"react-app-rewired": "^2.2.1",
"react-native-pager-view": "^5.4.25",
"react-scripts": "^5.0.0",
"react-test-renderer": "17.0.2",
"serve": "^13.0.2",
"typescript": "^4.6.2",
"webpack": "^5.74.0"
},
"resolutions": {
"@types/react": "^17"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
config-overrides.js
module.exports = function override(config, env) {
config.module.rules.push({
test: /\.js$/,
exclude: /node_modules[/\\](?!react-native-vector-icons)/,
use: {
loader: 'babel-loader',
options: {
// Disable reading babel configuration
babelrc: false,
configFile: false,
// The configuration for compilation
presets: [
['@babel/preset-env', {corejs: '3.21.1', useBuiltIns: 'usage'}],
'@babel/preset-react',
'@babel/preset-flow',
'@babel/preset-typescript',
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread',
],
},
},
});
return config;
};
tsconfig.json
{
"compilerOptions": {
/* Basic Options */
"target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"lib": ["dom", "dom.iterable", "esnext"], /* Specify library files to be included in the compilation. */
"allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
"jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
// "outDir": "./", /* Redirect output structure to the directory. */
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "removeComments": true, /* Do not emit comments to output. */
"noEmit": true, /* Do not emit outputs. */
// "incremental": true, /* Enable incremental compilation */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
"isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
"strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
"noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
// "typeRoots": [], /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
"skipLibCheck": false, /* Skip type checking of declaration files. */
"resolveJsonModule": true /* Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. */
/* Source Map Options */
// "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
},
"exclude": [
"node_modules", "babel.config.js", "metro.config.js", "jest.config.js", "./Api/generated/*"
]
}
