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

htCaoHaitao · 2024-06-24T05:50:48Z

Is there an existing issue for this?

I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
I have reviewed the documentation https://docs.sentry.io/
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/react@8.5.0 @sentry/types@8.5.0

2、run project in local

yarn start

Expected Result

The project run with no error as shown below ：

Actual Result

lforst · 2024-06-24T12:24:24Z

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 · 2024-06-24T15:24:00Z

Getting same error on @sentry/react@8.11.0 and on @sentry/react@8.10.0 when I tried last week. With react@17.0.2. 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 · 2024-06-24T16:04:43Z

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

lforst · 2024-06-25T10:34:56Z

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

pieterbeulque · 2024-06-26T14:08:31Z

+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 · 2024-06-26T14:28:12Z

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 · 2024-06-26T14:45:06Z

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 · 2024-06-26T17:06:06Z

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 · 2024-06-26T17:10:20Z

Our peer deps state we only support 16.14.0 or higher:

sentry-javascript/packages/react/package.json

Line 52 in aafb4e7

"react": "^16.14.0 || 17.x || 18.x || 19.x"

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

marcospachecows · 2024-06-26T17:27:36Z

Our peer deps state we only support 16.14.0 or higher:

sentry-javascript/packages/react/package.json

Line 52 in aafb4e7

"react": "^16.14.0 || 17.x || 18.x || 19.x"

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 · 2024-06-26T17:30:41Z

Fixing migration guide here: getsentry/sentry-docs#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 · 2024-06-26T18:24:44Z

@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 · 2024-06-26T21:39:16Z

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

Reorganize · 2024-06-27T12:50:01Z

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 · 2024-06-27T14:50:06Z

Can somebody share reproduction? Thanks!

marcosdiasdev · 2024-07-01T14:31:55Z

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 · 2024-07-02T07:32:30Z

@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 · 2024-07-03T07:55:15Z

@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 · 2024-07-03T12:19:42Z

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

pieterbeulque · 2024-07-04T06:23:25Z

That was fast, thanks @lforst.

nocive · 2024-07-04T10:24:29Z

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 · 2024-07-04T10:57:00Z

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 · 2024-07-04T11:01:58Z

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

lforst · 2024-07-04T13:11:50Z

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 · 2024-07-05T09:44:12Z

thanks for the fast fix & release guys, works now 🎉

Adds a react 17 test app so we can hopefully catch breaking react 17, as we did recently (#12608) with #12204 and #12740.

htCaoHaitao added the Type: Bug label Jun 24, 2024

getsantry bot added the Waiting for: Product Owner label Jun 24, 2024

github-actions bot added the Package: browser Issues related to the Sentry Browser SDK label Jun 24, 2024

getsantry bot removed the Waiting for: Product Owner label Jun 24, 2024

lforst added the Waiting for: Community label Jun 24, 2024

getsantry bot added Waiting for: Product Owner and removed Waiting for: Community labels Jun 24, 2024

getsantry bot removed the Waiting for: Product Owner label Jun 25, 2024

getsantry bot added the Waiting for: Product Owner label Jun 26, 2024

getsantry bot removed the Waiting for: Product Owner label Jun 26, 2024

getsantry bot added the Waiting for: Product Owner label Jun 26, 2024

getsantry bot removed the Waiting for: Product Owner label Jun 26, 2024

getsantry bot added the Waiting for: Product Owner label Jun 26, 2024

getsantry bot removed the Waiting for: Product Owner label Jun 26, 2024

getsantry bot added the Waiting for: Product Owner label Jun 26, 2024

getsantry bot removed the Waiting for: Product Owner label Jun 27, 2024

getsantry bot added the Waiting for: Product Owner label Jul 1, 2024

getsantry bot removed the Waiting for: Product Owner label Jul 2, 2024

getsantry bot added the Waiting for: Product Owner label Jul 3, 2024

lforst self-assigned this Jul 3, 2024

getsantry bot removed the Waiting for: Product Owner label Jul 3, 2024

lforst mentioned this issue Jul 3, 2024

fix(react): Fix React jsx runtime import for esm #12740

Merged

lforst closed this as completed in #12740 Jul 3, 2024

lforst reopened this Jul 4, 2024

andreiborza mentioned this issue Jul 5, 2024

fix(react): Revert back to jsxRuntime: 'classic' to prevent breaking react 17 #12775

Merged

andreiborza closed this as completed in #12775 Jul 5, 2024

andreiborza closed this as completed in 69b6531 Jul 5, 2024

andreiborza mentioned this issue Jul 5, 2024

chore(e2e): Add react-17 e2e test app #12778

Merged

andreiborza added a commit that referenced this issue Jul 5, 2024

chore(e2e): Add react-17 e2e test app (#12778)

f4e7203

Adds a react 17 test app so we can hopefully catch breaking react 17, as we did recently (#12608) with #12204 and #12740.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

htCaoHaitao commented Jun 24, 2024 •

edited

Loading

lforst commented Jun 24, 2024

webdevian commented Jun 24, 2024

baw commented Jun 24, 2024 •

edited

Loading

lforst commented Jun 25, 2024

pieterbeulque commented Jun 26, 2024

baw commented Jun 26, 2024

AbhiPrasad commented Jun 26, 2024

marcospachecows commented Jun 26, 2024

AbhiPrasad commented Jun 26, 2024 •

edited

Loading

marcospachecows commented Jun 26, 2024

AbhiPrasad commented Jun 26, 2024

marcospachecows commented Jun 26, 2024

marcospachecows commented Jun 26, 2024

Reorganize commented Jun 27, 2024 •

edited

Loading

lforst commented Jun 27, 2024

marcosdiasdev commented Jul 1, 2024

lforst commented Jul 2, 2024

pieterbeulque commented Jul 3, 2024 •

edited

Loading

lforst commented Jul 3, 2024

pieterbeulque commented Jul 4, 2024

nocive commented Jul 4, 2024 •

edited

Loading

alexandersorokin commented Jul 4, 2024 •

edited

Loading

pieterbeulque commented Jul 4, 2024

lforst commented Jul 4, 2024

nocive commented Jul 5, 2024

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

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

Comments

htCaoHaitao commented Jun 24, 2024 • edited Loading

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

lforst commented Jun 24, 2024

webdevian commented Jun 24, 2024

baw commented Jun 24, 2024 • edited Loading

lforst commented Jun 25, 2024

pieterbeulque commented Jun 26, 2024

baw commented Jun 26, 2024

AbhiPrasad commented Jun 26, 2024

marcospachecows commented Jun 26, 2024

AbhiPrasad commented Jun 26, 2024 • edited Loading

marcospachecows commented Jun 26, 2024

AbhiPrasad commented Jun 26, 2024

marcospachecows commented Jun 26, 2024

marcospachecows commented Jun 26, 2024

Reorganize commented Jun 27, 2024 • edited Loading

lforst commented Jun 27, 2024

marcosdiasdev commented Jul 1, 2024

lforst commented Jul 2, 2024

pieterbeulque commented Jul 3, 2024 • edited Loading

lforst commented Jul 3, 2024

pieterbeulque commented Jul 4, 2024

nocive commented Jul 4, 2024 • edited Loading

alexandersorokin commented Jul 4, 2024 • edited Loading

pieterbeulque commented Jul 4, 2024

lforst commented Jul 4, 2024

nocive commented Jul 5, 2024

htCaoHaitao commented Jun 24, 2024 •

edited

Loading

baw commented Jun 24, 2024 •

edited

Loading

AbhiPrasad commented Jun 26, 2024 •

edited

Loading

Reorganize commented Jun 27, 2024 •

edited

Loading

pieterbeulque commented Jul 3, 2024 •

edited

Loading

nocive commented Jul 4, 2024 •

edited

Loading

alexandersorokin commented Jul 4, 2024 •

edited

Loading