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

htCaoHaitao commented 3 months ago

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/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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

lforst commented 3 months ago

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

pieterbeulque commented 3 months ago

+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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

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

Reorganize commented 3 months ago

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 commented 3 months ago

Can somebody share reproduction? Thanks!

marcosdiasdev commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

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

pieterbeulque commented 2 months ago

That was fast, thanks @lforst.

nocive commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

lforst commented 2 months ago

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 commented 2 months ago

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

getsentry / sentry-javascript