Babel config JSX not working

[chixor]

Describe the bug Running npm run web errors with:

Failed to compile.

./node_modules/@terrylinla/react-native-sketch-canvas/index.js
SyntaxError: /Users/sarah.spencer/sites/StarmapWeb/node_modules/@terrylinla/react-native-sketch-canvas/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (173:5):

  171 |
  172 |   _renderItem = ({ item, index }) => (
> 173 |     <TouchableOpacity style={{ marginHorizontal: 2.5 }} onPress={() => {
      |     ^
  174 |       if (this.state.color === item.color) {
  175 |         const index = this.props.alphlaValues.indexOf(this.state.alpha)
  176 |         if (this._alphaStep < 0) {

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.

When I add @babel/preset-react and @babel/preset-env to my babel.config.js it doesn't resolve this error. This error is not unique to react-native-sketch-canvas, I also encountered it with react-navigation and various other libraries.

Expected behavior I expect that updating babel.config.js would solve the problem.

Desktop (please complete the following information):

• OS: OSX 11.6
• Browser Chrome latest

[orYoffe]

Since this repo uses create-react-app, you need to add other libraries you intend to use with web to the webpack config so that babel will compile the library (ES6) code to ES5, RN libraries usually only need ES6. here is an example of what i meant using the craco package https://github.com/orYoffe/rn-nav/blob/main/craco.config.js

[orYoffe]

Closing cause of lack of interaction. Please feel free to reopen if still having issues