Cannot find module react/jsx-runtime

[kYem]

Unable to run vitest tests, due to failing jsx-runtime import.

It only started to happen after installing latest @sentry/react v8 that pulls in profiler.js file that includes

import { jsx } from 'react/jsx-runtime';
import { startInactiveSpan } from '@sentry/browser';
import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, withActiveSpan, spanToJSON } from '@sentry/core';
import { timestampInSeconds } from '@sentry/utils';
import hoistNonReactStatics from 'hoist-non-react-statics';
import * as React from 'react';
import { REACT_MOUNT_OP, REACT_UPDATE_OP, REACT_RENDER_OP } from './constants.js';

const UNKNOWN_COMPONENT = 'unknown';

/**
 * The Profiler component leverages Sentry's Tracing integration to generate
 * spans based on component lifecycles.
 */
class Profiler extends React.Component {
...

Build: OK Dev: Ok Test (vitest): FAIL

Error: Cannot find module '/app/node_modules/react/jsx-runtime' imported from /app/node_modules/@sentry/react/esm/profiler.js
Did you mean to import "react/jsx-runtime.js"?

vite.config.ts

    test: {
     // Tried this as potential solution without much success
      deps: {
        optimizer: {
          web: {
            include: ['react/jsx-runtime'],
          }
        },
      },
      globals: true,
      globalSetup: './globalSetup.ts',
      environment: 'jsdom',
      setupFiles: './src/setupTests.ts',
      coverage: {
        provider: 'v8',
        reporter: ['lcov', 'html', 'json', 'clover'],
        exclude: [
          'node_modules/',
          'src/setupTests.ts',
          'integration-test',
          'deploy'
        ],
      },
    },
    plugins: [
      react(),
      getCheckerPlugin(isDevMode),
      oxlintPlugin({
        path: 'src',
        params: '--import-plugin',
        allow: ['correctness'],
      }),
      viteTsconfigPaths(),
      svgrPlugin(),
      ViteEjsPlugin({
        robots: env.REACT_APP_ROBOTS || 'noindex',
        internationalization: env.REACT_APP_INTERNATIONALIZATION || '0',
      }),
      sentryVitePlugin({
        disable: isDevMode,
        authToken: process.env.SENTRY_AUTH_TOKEN,
        org: process.env.SENTRY_ORG ,
        project: process.env.SENTRY_PROJECT,
        release: {
          name: name,
          dist: env.BITBUCKET_BUILD_NUMBER || '0',
        },
        telemetry: false,
      }),
    ],

A bit lost where to go from here, sentry add the import, but given that it works in dev and build modes, that somehow indicate that the problem is test mode, that is not covered by this plugin? Any suggestions?

[ArnaudBarre]

Pleas provide a small repoduction starting from a small template to help debug that. Also if this is failing only for vitest, please open an issue there with a reproduction

[jasonwarta]

For other people ending up here... my solution was to add this deps block to my vitest config.

test: {
  deps: {
    inline: ['@sentry/react'],
  },
},

[kYem]

That does actually fix the issue, was weird because I was using suggest deps. optimizer.{web,ssr}.include option that did not, but the alternative (not the deprecated field) server. deps.inline also fixed it.

   test: {
      server: {
        deps: {
          inline: ['@sentry/react'],
        }
      },
   },
   // ...