Use .jsx for compiled module files if they use JSX syntax

[astralarya]

Description

Some of the compiled js files in lib/module have JSX syntax while being saved as .js files. This causes issues with vite + Tanstack Start.

% npm run dev            

> dev
> vite dev --port 3000

Generated route tree in 69ms
✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/react-native-reanimated/lib/module/component/LayoutAnimationConfig.js:16:9:
      16 │   return <SkipEnteringContext value={skipValueRef}>
         ╵          ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/react-native-reanimated/lib/module/component/PerformanceMonitor.js:89:9:
      89 │   return <View style={styles.container}>
         ╵          ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/react-native-reanimated/lib/module/createAnimatedComponent/createAnimatedComponent.js:38:11:
      38 │     return <AnimatedComponent {...props}
         ╵            ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/react-native-reanimated/lib/module/component/FlatList.js:11:11:
      11 │     return <AnimatedView
         ╵            ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/react-native-reanimated/lib/module/component/ScrollView.js:32:9:
      32 │   return <AnimatedScrollViewComponent ref={animatedRef} {...restProps} />;
         ╵          ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/react-native-reanimated/lib/module/css/component/createAnimatedComponent.js:22:11:
      22 │     return <AnimatedComponent {...props}
         ╵            ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

✘ [ERROR] The JSX syntax extension is not currently enabled

    node_modules/react-native-reanimated/lib/module/css/component/AnimatedComponent.js:156:11:
      156 │     return <ChildComponent {...this.props} {...props} {...platformProps} style={filterNonCSSStyleProps(props?.style ?? this.props.style)}
          ╵            ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

/Users/marakim/Documents/code/test/tanstack-vite-reanimated/node_modules/esbuild/lib/main.js:1467
  let error = new Error(text);
              ^

Error: Build failed with 7 errors:
node_modules/react-native-reanimated/lib/module/component/FlatList.js:11:11: ERROR: The JSX syntax extension is not currently enabled
node_modules/react-native-reanimated/lib/module/component/LayoutAnimationConfig.js:16:9: ERROR: The JSX syntax extension is not currently enabled
node_modules/react-native-reanimated/lib/module/component/PerformanceMonitor.js:89:9: ERROR: The JSX syntax extension is not currently enabled
node_modules/react-native-reanimated/lib/module/component/ScrollView.js:32:9: ERROR: The JSX syntax extension is not currently enabled
node_modules/react-native-reanimated/lib/module/createAnimatedComponent/createAnimatedComponent.js:38:11: ERROR: The JSX syntax extension is not currently enabled
...
    at failureErrorWithLog (/Users/marakim/Documents/code/test/tanstack-vite-reanimated/node_modules/esbuild/lib/main.js:1467:15)
    at /Users/marakim/Documents/code/test/tanstack-vite-reanimated/node_modules/esbuild/lib/main.js:926:25
    at /Users/marakim/Documents/code/test/tanstack-vite-reanimated/node_modules/esbuild/lib/main.js:1345:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v22.9.0

Steps to reproduce

Minimal repro. npm install && npm run dev, then visit localhost:3000

https://github.com/astralarya/tanstack-vite-reanimated

Snack or a link to a repository

https://github.com/astralarya/tanstack-vite-reanimated

Reanimated version

4.0.1

Worklets version

0.4.1

React Native version

.80.2

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

No response

Device

No response

Host machine

None

Device model

No response

Acknowledgements

Yes

[astralarya]

Note that the "loader: { '.js': 'jsx' }" suggestion from the error does not help with this issue unfortunately, as that configuration is already set.

[tjzel]

Hi @astralarya, thanks for reporting this. I believe this is a problem on the Vite side, since such syntax - JSX in .js files - is the react-native target for JSX https://www.typescriptlang.org/tsconfig/#jsx.

You can see React Native package doing the same thing, i.e. here: https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/createAnimatedComponent.js#L137.

In your vite project you alias react-native to react-native-web which actually exposes generated cjs as the main target which has JSX syntax transformed. We removed emitting cjs in Reanimated since it kept breaking with our Babel plugin.

I managed to fix the problem you are mentioning by adding '@babel/preset-typescript' to Babel presets but it only works for npm run dev.

I'm a bit hesitant of emitting .jsx files since we never did this and it could introduce breaking changes to some of our users. On the other had, we'd been specifically asked to preserve the JSX syntax for NativeWind here. Do you have an idea how we could connect these worlds?

[astralarya]

Interesting! The preset does seem to help. Investigating whether it's possible to rescue the rest of the build.