Can't resolve 'react/jsx-runtime' in xxx/node_modules/@sentry/react/esm

[htCaoHaitao]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

8.5.0

Framework Version

React: 17.0.2

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

1、update sentry sdk version

yarn upgrade @sentry/[email protected] @sentry/[email protected]

2、run project in local

yarn start

Expected Result

The project run with no error as shown below ：

Actual Result

[lforst]

Hi, would you mind sharing a small reproduction example we could clone to check this error out? It is usually quite hard to troubleshoot build errors without having access to the bigger picture because there is usually so much configuration involved. Thanks!

[webdevian]

Getting same error on @sentry/[email protected] and on @sentry/[email protected] when I tried last week. With [email protected]. Node v20.6.1

Module not found: Error: Can't resolve 'react/jsx-runtime' in 'node_modules/@sentry/react/esm'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

The error seems to be referring to import { jsx } from 'react/jsx-runtime'; in node_modules/@sentry/react/esm/errorboundary.js and {"type":"module","sideEffects":false} in node_modules/@sentry/react/esm/package.json

[baw]

We have been having this issue in @sentry/react in every version since version 8.5.0

[lforst]

Hi @webdevian and @baw! It would be amazing if you could share a small reproduction example where this is happening.

[pieterbeulque]

+1 for @baw, it's hard to set up a minimal reproduction though. It looks like it might be related with us using React 17 and React Router 6, but I'm not 100% sure.

[baw]

We've seen this in one app when it was running React 16 and it continues after it was upgraded to React 17. I don't think it's a React issue.

I only see this in one of our apps and we have other apps running the latest version of @sentry/react without any issues.

I'd rather spend the time fixing the issue in our app and then get back to you than make a small reproduction example.

[AbhiPrasad]

Due to the variety of permutations of how you can set up a react app, we really need a reproduction to dive into this. Even just sharing your bundler config and showing how you are importing Sentry would be a great help!

[marcospachecows]

I've been seeing the same error after I upgraded @sentry/react from ^7.114.0 to ^8.12.0 using the npx @sentry/migr8@latest command. My React version is ^16.6.0:

{
    "dependencies": {
        ...
        "react": "^16.6.0",
        "react-dom": "^16.6.0",
        "react-router": "^5.2.1",
        "react-router-dom": "^5.3.0",
        "@sentry/react": "^8.12.0"
        ...
    }
}

[AbhiPrasad]

Our peer deps state we only support 16.14.0 or higher:

https://github.com/getsentry/sentry-javascript/blob/aafb4e7b7e855f41cddd51191f2da8d3ddadaa02/packages/react/package.json#L52

Could you upgrade your react version to 16.14.0 and check if the error still exists?

[marcospachecows]

Our peer deps state we only support 16.14.0 or higher:

https://github.com/getsentry/sentry-javascript/blob/aafb4e7b7e855f41cddd51191f2da8d3ddadaa02/packages/react/package.json#L52

Could you upgrade your react version to 16.14.0 and check if the error still exists?

Oh interesting! I believe the migration guide is outdated then since it mentions the SDK should support React 16.0.0 or later.

Anyways, I just updated to 16.14.0 but I'm still getting the same error 😢

[AbhiPrasad]

Fixing migration guide here: https://github.com/getsentry/sentry-docs/pull/10516

Anyways, I just updated to 16.14.0 but I'm still getting the same error 😢

shoot I think that's a good starting ground for us to debug regardless. What bundler are you using?

[marcospachecows]

@AbhiPrasad Thanks for looking into this. We're using webpack ^5.74.0. The ts/js files are transpiled by babel. These are our dev dependencies:

"devDependencies": {
    "@babel/core": "^7.12.17",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.13",
    "@babel/plugin-proposal-object-rest-spread": "^7.12.13",
    "@babel/plugin-proposal-optional-chaining": "^7.12.17",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-jsx": "^7.14.5",
    "@babel/plugin-transform-async-to-generator": "^7.12.13",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.18.6",
    "@mdx-js/loader": "1.6.22",
    "@sentry/types": "^8.12.0",
    "@storybook/addon-a11y": "^6.5.6",
    "@storybook/addon-essentials": "^6.5.6",
    "@storybook/addon-interactions": "^6.5.12",
    "@storybook/addons": "^6.5.6",
    "@storybook/jest": "^0.0.10",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.5.6",
    "@storybook/testing-library": "^0.0.13",
    "@testing-library/dom": "^8.1.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/react-hooks": "^7.0.2",
    "@testing-library/user-event": "^13.2.1",
    "@types/backbone": "^1.4.10",
    "@types/crypto-js": "^3.1.47",
    "@types/dompurify": "^3.0.1",
    "@types/enzyme": "^3.10.9",
    "@types/fast-levenshtein": "^0.0.2",
    "@types/history": "^4.7.9",
    "@types/jest": "^26.0.20",
    "@types/js-cookie": "^2.2.6",
    "@types/react": "^16.14.0",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-dom": "^16.9.24",
    "@types/react-redux": "^7.1.16",
    "@types/react-router": "^5.1.16",
    "@types/react-test-renderer": "^16.9.1",
    "@types/redux": "^3.6.0",
    "@types/styled-components": "^5.1.7",
    "@types/underscore": "^1.11.2",
    "@types/uuid": "^8",
    "@typescript-eslint/eslint-plugin": "^5.39.0",
    "@typescript-eslint/parser": "^5.39.0",
    "ace-builds": "^1.4.1",
    "autoprefixer": "^9.1.2",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^27.0.6",
    "babel-loader": "^8.0.4",
    "babel-plugin-graphql-tag": "^3.2.0",
    "babel-plugin-styled-components": "^1.11.1",
    "buffer-xor": "^1.0.3",
    "bundle-stats-webpack-plugin": "^3.3.9",
    "chromatic": "^7.1.0",
    "core-js": "^3.6.1",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "enzyme": "^3.11.0",
    "eslint": "^5.3.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-typescript": "^3.5.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-storybook": "^0.5.5",
    "file-loader": "^6.2.0",
    "fs-extra": "^8.1.0",
    "isomorphic-fetch": "^3.0.0",
    "jest": "^27.0.6",
    "mini-css-extract-plugin": "^2.6.0",
    "nock": "^13.1.1",
    "npm-run-all": "4.1.5",
    "postcss-loader": "^4.0.4",
    "raw-loader": "^4.0.2",
    "react-test-renderer": "^17.0.2",
    "remarkable": "^1.7.1",
    "sass-loader": "^10.1.0",
    "sentry-testkit": "^4.0.3",
    "speed-measure-webpack-plugin": "^1.5.0",
    "style-loader": "^2.0.0",
    "text-transform-loader": "^2.0.0",
    "turndown": "^7.1.2",
    "typesafe-actions": "^5.1.0",
    "typescript": "^4.8.4",
    "wait-for-expect": "^3.0.2",
    "webpack": "^5.74.0",
    "webpack-bundle-analyzer": "^4.6.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0"
  }

[marcospachecows]

@AbhiPrasad I was able to get rid of the errors, but I had to force babel to parse modules as "cjs".

[buddyjansen8]

React V17 react-scripts V5

Can't get rid of this error, tried a lot of possible solution like

 resolve: {
      alias: {
        "react/jsx-runtime": "react/jsx-runtime.js",
      },
    },

Any solutions to this, anyone?

[lforst]

Can somebody share reproduction? Thanks!

[marcosdiasdev]

I've got the same error message while trying to build an application with "react": "^17.0.2" and "@sentry/react": "^8.13.0". Downgrading Sentry to "@sentry/react": "^7.118.0" fixed it.

[lforst]

@marcosdiasdev I would like to reiterate, this issue needs reproduction. To look into this further, we need a way to reproduce this error. Please provide a stackblitz or github repo, or something similar. Thanks!

[pieterbeulque]

@lforst here you go: https://github.com/pieterbeulque/getsentry-sentry-javascript-12608/commits/main/

Run npm run build and you'll see that 8.4.0 works, 8.5.0 onwards fails.

Given the error I assume it's a combination of Webpack + Babel + React 17 + whatever changes you made going from 8.4 to 8.5. (~I left some other React-adjacent packages in the dependencies but I think they may be irrelevant.~ Edit: removed)

[lforst]

@pieterbeulque awesome thanks! I'll take a look.

[pieterbeulque]

That was fast, thanks @lforst.

[nocive]

Still running into the same issue with 8.14 (vitest).

Looking at the source code, it doesn't look like the fix had any actual effect on the resulting code since I still see the incorrect import being used.

[alexandersorokin]

I have encountered such an issue several times with other packages.

Upgrading to react@18 should fix the issue. Also configuring a bundler alias can fix the issue. Also not using esm can fix the issue.

But I have found no way to fix the issue on package side (like @sentry/react) for both react@17 and react@18. react@17 doesn't have an exports field in package.json and requires react/jsx-runtime.js (with extension). react@18 does have the exports field in package.json and support react/jsx-runtime only without extension.

[pieterbeulque]

@lforst - As mentioned above, looks like the fix doesn't actually fix it. Updated the reproduction repo.

[lforst]

Update: We're gonna move back to the classic runtime because we discovered issues with a non-faulty fix. The "fix" we merged actually did nothing because I made a mistake while testing. This will cause warnings in React 19, maybe we can find a way to provide a separate package or submodule exports for the new runtime when React 19 ships stably.

[nocive]

thanks for the fast fix & release guys, works now :tada: