optimizeDeps.esbuildOptions.loader fails on production build while it works in dev

Describe the bug

In vite.config.ts I specified loader: { '.js': 'jsx' } in optimizeDeps.esbuildOptions to be able to parse JSX syntax in JS files as advised by Vite when running yarn dev. It works superb with the Dev-Server, but it does not when building for production with yarn build.

Thank you for investigating 👋🏻

Reproduction

https://stackblitz.com/edit/vitejs-vite-xdyicm

Please run yarn build in this StackBlitz Terminal to reproduce error.

System Info

"vite": "^2.9.13"  

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.52 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.4.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.12.1 - /opt/homebrew/bin/npm
    Watchman: 2022.06.13.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 103.0.5060.114
    Safari: 15.5

Used Package Manager

yarn

Logs

~/projects/vitejs-vite-xdyicm 2m 0s
❯ yarn build
$ tsc && vite build
vite v2.9.13 building for production...
✓ 128 modules transformed.
[commonjs] Unexpected token (36:6) in /home/projects/vitejs-vite-xdyicm/node_modules/react-native-reanimated/lib/reanimated1/Transitioning.js
file: /home/projects/vitejs-vite-xdyicm/node_modules/react-native-reanimated/lib/reanimated1/Transitioning.js:36:6
34:   return (props) => {
35:     return (
36:       <TransitioningContext.Consumer>
          ^
37:         {(context) => <Comp context={context} {...props} />}
38:       </TransitioningContext.Consumer>
error during build:
SyntaxError: Unexpected token (36:6) in /home/projects/vitejs-vite-xdyicm/node_modules/react-native-reanimated/lib/reanimated1/Transitioning.js
    at pp$4.raise (/home/projects/vitejs-vite-xdyicm/node_modules/rollup/dist/shared/rollup.js:19740:13)
    at pp$9.unexpected (/home/projects/vitejs-vite-xdyicm/node_modules/rollup/dist/shared/rollup.js:17034:8)
    at pp$5.parseExprAtom (/home/projects/vitejs-vite-xdyicm/node_modules/rollup/dist/shared/rollup.js:19115:10)
    at pp$5.parseExprSubscripts (/home/projects/vitejs-vite-xdyicm/node_modules/rollup/dist/shared/rollup.js:18907:19)
    at pp$5.parseMaybeUnary (/home/projects/vitejs-vite-xdyicm/node_modules/rollup/dist/shared/rollup.js:18873:17)
    at pp$5.parseExprOps (/home/projects/vitejs-vite-xdyicm/node_modules/rollup/dist/shared/rollup.js:18800:19)
    at pp$5.parseMaybeConditional (/home/projects/vitejs-vite-xdyicm/node_modules/rollup/dist/shared/rollup.js:18783:19)
    at pp$5.parseMaybeAssign (/home/projects/vitejs-vite-xdyicm/node_modules/rollup/dist/shared/rollup.js:18750:19)
    at pp$5.parseParenAndDistinguishExpression (/home/projects/vitejs-vite-xdyicm/node_modules/rollup/dist/shared/rollup.js:19211:28)
    at pp$5.parseExprAtom (/home/projects/vitejs-vite-xdyicm/node_modules/rollup/dist/shared/rollup.js:19074:41)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[patak-dev]

You need to also use plugin-react@2.0.0-beta.1 There is no require error but something else now in dev: https://stackblitz.com/edit/vitejs-vite-kedueg Maybe you could try to create a repro for this new issue without involving optimizeDeps custom resolution. Apart from that, I think you should avoid setting these loaders and use the extensions. Resolving is costly.

[patak-dev]

Deps optimization wasn’t used in production in Vite v2. This will change in v3, you can try with the latest vite@3.0.0-beta.7: https://main.vitejs.dev/guide/migration.html#architecture-changes-and-legacy-options Please create a new issue if there are problems there. Thanks!