Rollup not transpiling node_module js file witth JSX syntax during vite build - [commonjs--resolver] Unexpected token - Repo included

[omonk]

Hi all,

Stuck on this issue where I'm not able to build a vite project for production as rollup is throwing an error Unexpected token. Is anyone able to help me configure the build or build.rollupOptions in vite to accomplish this?

Repo link with behaviour - https://github.com/omonk/vite-gifted

▲ ~/s/vite-gifted npm run build

> vite-gifted@0.0.0 build
> tsc && vite build

vite v4.0.4 building for production...
✓ 12 modules transformed.
[commonjs--resolver] Unexpected token (356:26) in /Users/ollie/sites/vite-gifted/node_modules/react-native-gifted-chat/lib/GiftedChat.js
file: /Users/ollie/sites/vite-gifted/node_modules/react-native-gifted-chat/lib/GiftedChat.js:356:26
354:     renderMessages() {
355:         const { messagesContainerStyle, ...messagesContainerProps } = this.props;
356:         const fragment = (<View style={[
                               ^
357:                 {
358:                     height: this.state.messagesContainerHeight,
error during build:
SyntaxError: Unexpected token (356:26) in /Users/ollie/sites/vite-gifted/node_modules/react-native-gifted-chat/lib/GiftedChat.js
    at Object.pp$4.raise (file:///Users/ollie/sites/vite-gifted/node_modules/rollup/dist/es/shared/rollup.js:20337:13)
    at Object.pp$9.unexpected (file:///Users/ollie/sites/vite-gifted/node_modules/rollup/dist/es/shared/rollup.js:17638:8)
    at Object.pp$5.parseExprAtom (file:///Users/ollie/sites/vite-gifted/node_modules/rollup/dist/es/shared/rollup.js:19721:10)
    at Object.pp$5.parseExprSubscripts (file:///Users/ollie/sites/vite-gifted/node_modules/rollup/dist/es/shared/rollup.js:19513:19)
    at Object.pp$5.parseMaybeUnary (file:///Users/ollie/sites/vite-gifted/node_modules/rollup/dist/es/shared/rollup.js:19479:17)
    at Object.pp$5.parseExprOps (file:///Users/ollie/sites/vite-gifted/node_modules/rollup/dist/es/shared/rollup.js:19406:19)
    at Object.pp$5.parseMaybeConditional (file:///Users/ollie/sites/vite-gifted/node_modules/rollup/dist/es/shared/rollup.js:19389:19)
    at Object.pp$5.parseMaybeAssign (file:///Users/ollie/sites/vite-gifted/node_modules/rollup/dist/es/shared/rollup.js:19356:19)
    at Object.pp$5.parseParenAndDistinguishExpression (file:///Users/ollie/sites/vite-gifted/node_modules/rollup/dist/es/shared/rollup.js:19817:28)
    at Object.pp$5.parseExprAtom (file:///Users/ollie/sites/vite-gifted/node_modules/rollup/dist/es/shared/rollup.js:19680:41)

[potatohoney-p]

I can reproduce this with the lockfile in omonk/vite-gifted at a4f0c63: Vite 4.0.4 / Rollup 3.10.0 fail at GiftedChat.js:356:26 (tested on Linux / Node 24.22.1, rather than the original macOS environment).

Your optimizeDeps.esbuildOptions.loader config is for dependency optimization, which Vite 4 disables during production builds by default. It does not make CommonJS's production parsing understand JSX. A narrowly scoped Vite enforce: 'pre' transform gets the JSX out of these .js files before that parser sees them:

import { defineConfig, transformWithEsbuild } from 'vite';

// Add before react() in plugins:
{
  name: 'dependency-jsx',
  enforce: 'pre',
  async transform(code, id) {
    if (!/node_modules\/(react-native-gifted-chat|react-native-lightbox-v2|react-native-parsed-text|react-native-typing-animation)\/.*\.js$/.test(id)) return;
    return transformWithEsbuild(code, id, {
      loader: 'jsx',
      jsx: 'automatic'
    });
  }
}

The other packages are included because the locked project hits their JSX after the first error is removed. Also put your existing extensions array under resolve: { extensions, alias: ... }, not only optimizeDeps.esbuildOptions.resolveExtensions; otherwise the production build selects a native safe-area module rather than its .web variant.

This removes the reported JSX error, but it does not make the entire checked-in project build successfully. The next distinct error in my run is that react-native-typing-animation@0.1.7/src/styles.js is empty, while src/index.js imports its default export. That dependency needs a separate correction; changing JSX loaders cannot create the missing export. I have not verified the app's browser runtime, and would not treat the partial configuration change as a complete React Native Web compatibility fix.

References: Vite 4 dependency optimization and plugin ordering.