Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Major breaking change in some recent release #1954

Closed
1 of 6 tasks
TannerS opened this issue Feb 7, 2025 · 8 comments · Fixed by #1955
Closed
1 of 6 tasks

[Bug]: Major breaking change in some recent release #1954

TannerS opened this issue Feb 7, 2025 · 8 comments · Fixed by #1955

Comments

@TannerS
Copy link

TannerS commented Feb 7, 2025

Relevant package(s)

  • @carbon/charts
  • @carbon/charts-svelte
  • @carbon/charts-react
  • @carbon/charts-angular
  • @carbon/charts-vue
  • Documentation website

Carbon Charts Version

^1.22.7

Which bundler are you using?

Webpack

What happened and what did you expect to happen?

We havev't touched our code in a long time, but we have to update the dependencies to fix vuln. In our service, we ran npm install and it updated "@carbon/charts-react": "^1.22.7" to some new version. When it did, we pushed our code to the console (ibm cloud) pipeline and during the stage to build webpack, we got this

ERROR in ./node_modules/@carbon/charts-react/dist/index.mjs 4:0-58
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/charts-react/dist'
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.
resolve 'react/jsx-runtime' in '/home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/charts-react/dist'
  Parsed request is a module
  using description file: /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/charts-react/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/charts-react/dist/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/charts-react/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules
        existing directory /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/react
          using description file: /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/react/package.json (relative path: .)
            using description file: /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/react/package.json (relative path: ./jsx-runtime)
              Field 'browser' doesn't contain a valid alias configuration
              /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/react/jsx-runtime doesn't exist
      /home/jenkins/agent/workspace/node/build/feedback/git/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/build/feedback/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/build/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/node_modules doesn't exist or is not a directory
      /home/jenkins/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/client/components/managment/reports/charts/IssueStateBarGraph.js 3:0-55 43:38-53
 @ ./src/client/components/managment/reports/GithubReports.js 8:0-61 37:63-81
 @ ./src/client/components/Management.js 20:0-62 164:42-55
 @ ./src/client/App.js 10:0-49 48:38-48

webpack 5.97.1 compiled with 1 error and 39 warnings in 186966 ms

11:16:40  [error] [npm] Failed to run script 'build'
11:16:40  [error] [job] Job failed in step "*buildModule*":

There is a slack convo going on with this with others having same issue

https://ibm-cloudplatform.slack.com/archives/CCA7L4MS9/p1738862305761429

Chart data and options (automatically formatted so no need for backticks)

N/A

JavaScript console or build output (if relevant)

ERROR in ./node_modules/@carbon/charts-react/dist/index.mjs 4:0-58
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/charts-react/dist'
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.
resolve 'react/jsx-runtime' in '/home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/charts-react/dist'
  Parsed request is a module
  using description file: /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/charts-react/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/charts-react/dist/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/charts-react/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/@carbon/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules
        existing directory /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/react
          using description file: /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/react/package.json (relative path: .)
            using description file: /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/react/package.json (relative path: ./jsx-runtime)
              Field 'browser' doesn't contain a valid alias configuration
              /home/jenkins/agent/workspace/node/build/feedback/git/module/node_modules/react/jsx-runtime doesn't exist
      /home/jenkins/agent/workspace/node/build/feedback/git/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/build/feedback/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/build/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/workspace/node_modules doesn't exist or is not a directory
      /home/jenkins/agent/node_modules doesn't exist or is not a directory
      /home/jenkins/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/client/components/managment/reports/charts/IssueStateBarGraph.js 3:0-55 43:38-53
 @ ./src/client/components/managment/reports/GithubReports.js 8:0-61 37:63-81
 @ ./src/client/components/Management.js 20:0-62 164:42-55
 @ ./src/client/App.js 10:0-49 48:38-48

webpack 5.97.1 compiled with 1 error and 39 warnings in 186966 ms

11:16:40  [error] [npm] Failed to run script 'build'
11:16:40  [error] [job] Job failed in step "*buildModule*":

StackBlitz repro

https://stackblitz.com/edit/github-1qm8hle9?file=package.json,webpack.config.js,.babelrc,src%2Findex.js,dist%2Findex.html,package-lock.json&file=package.json&terminal=

IBM Application/Team (if relevant)

Multiple teams

What priority level would this be in your opinion?

P0 (Critical)
@tombrunet
Copy link

Same here:

        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-scripts": "5.0.1",

"@carbon/charts-react": "1.22.11" works for us, but, after that fails.

The basic issue is jsx-runtime is a file, not a folder. See https://cdn.jsdelivr.net/npm/[email protected]/jsx-runtime.js. ESM modules require files to include extensions now, whereas CJS imports would automatically check for .json, .js, etc if the extension was not specified.

@arjunkgit
Copy link

As created and tested the issue using a StackBlitz setup that closely mirrors our codebase configuration. The problem started when I attempted to use the latest @carbon/[email protected], whereas an older version ( <1 or 0.54.12) worked fine.

After reviewing the release notes of charts-react, I noticed that starting from 1.22.9, the Charts team excluded jsx-runtime from the bundle, which could be the potential cause of this issue. Hence only 1.22.8 works fine for us.

Environment:
React 16.x (also tested with React 17.x, and the error remains the same)
Webpack 5.x
Issue observed in both local and test setups.

@nstuyvesant nstuyvesant mentioned this issue Feb 8, 2025
Merged
@nstuyvesant
Copy link
Contributor

Hi @TannerS - I was looking at the StackBlitz repro you provided above and something that caught my eye...

    "@carbon/charts": "^0.54.12",
    "@carbon/charts-react": "^1.22.0"

Looks like you are just using the CSS from @carbon/charts. These can be imported directly from @carbon/charts-react so you don't need @carbon/charts and even if you do want to do a direct import from it, you will want to use the same version.

The latest is 1.22.16 which does not attempt to externalize the jsx-runtime.

Also, you mentioned you are having to upgrade dependencies in the project right now. Would it be possible to at least upgrade to React 17 (if not 19)?

@arjunkgit
Copy link

nstuyvesant That StackBlitz was created purely for experimental purposes to reproduce the issue and doesn’t reflect any specific standards for library usage. I do understand that @carbon/charts-react alone is sufficient for styling, but since my focus was on reproducing the issue, I didn’t pay much attention to version alignment or optimization. The setup was left as is while making changes in the codebase.

@nstuyvesant
Copy link
Contributor

@arjunkgit - Do you still have issues with 1.22.16?

@arjunkgit
Copy link

No issues, 1.22.16 is working fine for us.

@nstuyvesant
Copy link
Contributor

@TannerS - did 1.22.16 resolve your issue?

@TannerS
Copy link
Author

TannerS commented Feb 12, 2025 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Remove externalization of jsx-runtime, bump dependencies nstuyvesant/carbon-charts
4 participants
@nstuyvesant @arjunkgit @TannerS @tombrunet