`plugin-react`: Fails to bundle `@sentry/react` if `mode` is not `production`

[BeeeQueue]

Describe the bug

I am using Vite in a project using @sentry/react, and when I vite build the project with a --mode other than production it fails with the message seen in the Logs section.

I've tried to use the exclude option to exclude /node_modules/ and various other paths but they did not make a difference.

This only happens with plugin-react included and using jsxRuntime: 'automatic'

Reproduction

https://github.com/BeeeQueue/vite-sentry-repro/actions/runs/2732156122

System Info

System:
    OS: macOS 11.6.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 214.50 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/nvm-rust/shims/node
    Yarn: 1.22.15 - ~/nvm-rust/shims/yarn
    npm: 8.11.0 - ~/nvm-rust/shims/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 102.0
    Safari: 15.5
  npmPackages:
    @vitejs/plugin-react: 2.0.0 => 2.0.0
    vite: 3.0.2 => 3.0.2

Used Package Manager

pnpm

Logs

Click to expand!

[commonjs--resolver] /Users/ahaglund/projects/vite-sentry-repro/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sentry/react/esm/profiler.js: Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config. (This is an error on an internal node. Probably an internal error. Location has been estimated.)
  114 |   var Wrapped = (props) => (
  115 |     React.createElement(Profiler, { ...options, name: componentDisplayName, updateProps: props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 133}}
> 116 |       , React.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 134}} )
      |         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  117 |     )
  118 |   );
  119 |
file: /Users/ahaglund/projects/vite-sentry-repro/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sentry/react/esm/profiler.js

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[BeeeQueue]

From looking into it more, it seems like using --mode staging that the docs recommend for building "production-like behavior, but with slightly different env variables" also changes import.meta.env.PROD to be false - meaning it produces a development build.

[BeeeQueue]

Which probably would be why it also seems to cause plugin-react to use the development react version

[pantajoe]

Had the same problem. What helps is to set the environment variables NODE_ENV=production, e.g., with cross-env in your package.json script build:

// package.json
{
  // ...
   "scripts": {
     // ...
     "build": "cross-env NODE_ENV=production tsc && vite build",
     // ...
   },
   // ...
}

I also think the mode should not alter the PROD environment variable in Vite, i.e., sometimes not making a production build.

[borivojevic]

Had the same problem. Solved by adding NODE_ENV=production to .env.staging file.

// package.json
{
  // ...
   "scripts": {
     // ...
     "build:staging": "NODE_ENV=production tsc && vite build --mode staging",
     // ...
   },
   // ...
}

# .env.staging
NODE_ENV=production
VITE_APP_TITLE=My App (staging)

[rohmanhm]

Had the same problem. Solved by adding NODE_ENV=production to .env.staging file.

// package.json
{
  // ...
   "scripts": {
     // ...
     "build:staging": "NODE_ENV=production tsc && vite build --mode staging",
     // ...
   },
   // ...
}

# .env.staging
NODE_ENV=production
VITE_APP_TITLE=My App (staging)

I think it can be simplified by just adding this.

"build:staging": "tsc && NODE_ENV=production vite build --mode staging",

[pietrofxq]

I am still having the issue with --mode staging with vite 3.0.9. Issue is only fixed running dev in production mode