Loading @carbon/charts-react via require() gives internal error of ‘__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED’. #1800
Comments
|
The example above only shows the usage of the component but not how you're importing or building the project. Are you using webpack and the UMD version of Also, seems like the source map is not displaying a useful stack trace. What browser are you using? |
|
Also, are you able to try this with React 18.2.0? |
Oh, we're using Webpack, it's loading @carbon/charts-react/dist/index.js or possibly index.mjs. I'm seeing this on a development build; I haven't tried production.
I'm using Chrome. I see that there's a @carbon/charts-react/dist/index.js.map file but I guess it's not working for us. My advice is that you should stop trying to rollup your source into a single file. If you look at other distributions like @carbon itself they just distribute all the files (except converted from Typescript to Javascript). You can release a UMD version too, but there's no reason to rollup the ESM version. Having said that, I don't think it's the cause of this bug.
Yes, I just tried it now (React 18.2.0, @carbon/charts 1.13.18, @carbon/charts-react 1.13.18). The error reproduces. |
|
I am seeing the same error. The last working version for me is and this error started with
LineGraphWithLoader line 11 is the import for the chart My microservice is using React version 17.0.2, and it's not a trivial change for me to upgrade to React 18. We use webpack. |
|
@aaronsahlin - the stack trace suggests webpack is loading What happens if you explicitly import from the ESM... I recall something about webpack not supporting certain types of package.json exports (I use vite which follows other conventions). Also, why is your project also loading |
|
A question about your Webpack config... does it include mjs in resolve.extensions? resolve: {
// Add `.mjs` to support ECMAScript Modules explicitly
extensions: ['.mjs', '.js', '.json']
}, |
|
I 've always import both @carbon/charts and @carbon/charts-react, was it a requirement at one time? I'll switch to just importing charts-react. I'm still trying to get our webpack configured for mjs files....
|
|
In the past, both were required because you would get the styles.css from |
|
@aaronsahlin - Looking at https://unpkg.com/@carbon/[email protected]/package.json, the exports are there for the index.mjs (module as well as exports.import). It seems like webpack is not reading package.json's module property). Can you share the calculated webpack config as well as what version of webpack you are using? Also, would you have the ability to experiment by doing a build with vite or rollup? Just trying to understand if the issue is that webpack is not getting the exports from the current package.json configuration. |
|
We are using webpack version 5.89.0. Here are the webpack config files we use. Doing a build with vite or rollup not really an option for us. |
|
@aaronsahlin - thanks for sharing your webpack configs. It looks like neither explicitly resolve mjs extensions per https://webpack.js.org/configuration/resolve/#resolveextensions. The default for resolve.extensions appears to be Could you try adding this line after line 77 in webpack.base.config.js (could also add after line 49 of webpack.dev.config.js)... extensions: ['.js', '.json', '.wasm', '.mjs'], |
|
Thanks for the suggestion, but no change... after adding the extensions section in I still get the same error when using the standard import.
And if I try
|
|
In your webpack.base.config.js, can you add this line in resolve.alias... '@carbon/charts-react': path.resolve(projectDirectory, 'node_modules/@carbon/charts-react/dist/index.mjs'),then change your import to: import { LineChart } from '@carbon/charts-react' |
|
BTW, we're getting that same weird behavior where webpack pulls in the CJS/UMD files: var _chartsReact = __webpack_require__(/*! @carbon/charts-react */ "./node_modules/@carbon/charts-react/dist/index.js");
var _charts = __webpack_require__(/*! @carbon/charts */ "./node_modules/@carbon/charts/dist/umd/bundle.umd.js");Not sure why, your package.json file looks good to me. It even has the "exports" section, the modern way of specifying all the exports. I tried adding that line to resolve.alias, but it didn't make any difference. |
|
PS: I figured out part of the mystery. We are using the babel plugin called "@babel/plugin-transform-modules-commonjs". @aaronsahlin might be using it too, perhaps unknowingly, since it's included as part of @babel/preset-env. The plugin converts our ESM code to CJS. And when Webpack sees the CJS version of our code (that calls Why would anyone use that babel plugin? It sounds like a dumb idea, since ESM is the standard, tree shaking works better with ESM, etc. But I think it was done to support running the code on Node without using Webpack. In the old days, Node couldn't read ESM format (especially not if they have the .js extension instead of the .mjs extension). I don't know if any of this is related to that React error though. |
|
@wkeese - That probably solved the mystery as to why the UMD bundle is getting loaded instead of ESM despite the webpack config being setup to handle mjs extensions. Out of curiosity, if you do not use @aaronsahlin - not sure why the source map wasn't used to generate your stack trace in Chrome. Could you see if Firefox uses the source map for your error? I sometimes get better results with Firefox loading source maps - worth a shot. |
|
@nstuyvesant I tried the alias suggestion, no change. @wkeese We are specifying |
|
@aaronsahlin - Nice! About @babel/preset-env, it turns out that although the transform is included in @babel/preset-env, but you have to enable it via the modules option. (I don't understand exactly how PS: I wondering if this problem is related to the Dual package hazard. |
|
@aaronsahlin - thanks for confirming! So it does sound like the issue is specific to the UMD bundle being used by Webpack and Common JS. That helps narrow things down quite a bit. |
theiliad
changed the title
|
FYI, likewise for me, after removing @babel/plugin-transform-modules-commonjs, the problem goes away, even with the 1.15.7 release. Before changing that, I tried to trace down the exact commit where the problem started, but was getting contradictory results. Sometimes I traced it down to 766dcac (which seems likely), but other times I confirmed that it started with 8fcb5b9 (which seems impossible). I guess it was a problem with caching but I tried to be careful about not caching anything. Or just an intermittent problem. It's unclear. |
|
@wkeese - in the first commit you referenced, the main difference for the optimizeDeps: {
disabled: true, // deprecated in more recent versions of vite
include: ['@carbon/charts', '@carbon/icons-react'],
exclude: [
// Will cause errors when running storybook if in the include list
'@carbon/telemetry'
]
},Other changes were reverted. The line of code raising your error is in the core package so it could be related to optimization default which are currently used. |
|
Hmm, I tried adding back the Have you guys tried running a web page using the UMD version of @carbon/charts-react? If that's failing, then you have something to investigate. Otherwise, I'm not sure it's worth pursuing the cause of this failure. The problem only happens with UMD, and IMO no one should be using UMD anyway. @aaronsahlin and I were using it by accident. It's possible (but seems unlikely) that other people are using it on purpose. But you can wait to see if they are getting problems with the latest code. FWIW, I don't think you should be creating a rollup for ESM (using |
|
PS: I think you asked me or @aaronsahlin why we were directly importing @carbon/charts. For me, it was to get some type definitions / enums that you didn't export from @carbon/charts-react. Specifically |
|
@wkeese - Thanks for the feedback. A few comments...
Given your feedback, what are your thoughts about closing this issue? |
Thanks for the response. But I was talking about a CJS example for @carbon/charts-react, not a CJS/UMD example for vanilla @carbon/charts. I reproduced the problem in https://stackblitz.com/edit/carbon-charts-react-webpack-cjs-example?file=src%2Findex.html. I'm seeing the error in the console there. Do you see it?
I guess the problem is that your package.json points to that UMD bundle, and it gets used by accident (see above test case) by anyone who is unfortunately still using CJS.
Thanks! |
wkeese
changed the title
|
should we point to a non-mjs entry by default, but keep mjs as a module entry? |
|
@theiliad - if by default you mean package.json's main, it points to the non-mjs (the UMD)... "type": "module",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
"./package.json": "./package.json",
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/index.js"
},
"./styles.min.css": "./dist/styles.min.css",
"./styles.css": "./dist/styles.css"
},There were two issues (@wkeese and @aaronsahlin - please correct anything here that looks incorrect)...
|
|
For my case, I may be able to remove |
|
@wkeese - Thanks for creating the repro on StackBlitz at https://stackblitz.com/edit/carbon-charts-react-webpack-cjs-example?file=src%2Findex.html. When I load this using Chrome, I see the error you reported. So I tried creating my own StackBlitz example where I use Common JS to load the chart. This example uses |
Actually I disagree, it looks to me like Vite is pulling in the ESM version @carbon/charts-react. Notice the 
If you really want to narrow down if it's a Webpack problem, I suggest writing a test without Webpack or Vite, just transpiling the JSX into JS (with Babel), and then it directly instantiates the chart with the @carbon/charts-react UMD package. I guess you would need to include RequireJS for the main index.jsx file to be able to load the charts-react UMD bundle. |
|
Hi @wkeese - While StackBlitz has a React Vite template (which uses a WebContainer like your example), the example I shared used the create-react-app which does not. While you can browse the src folder for 
Had it loaded the ESM version, the file would have been dist/index.mjs which looks like this (without the source map since I just opened it in VS Code)... 
Just add a breakpoint to the UMD code and reload the preview in StackBlitz and you'll see what I mean. Regarding StackBlitz's create-react-app template, it looks like they are using Webpack. Please see https://github.com/stackblitz/create-react-app-template. |
|
Ah right, I stand corrected. Well, maybe it is due to Webpack. It's still hard to tell for me. For example, my failing test case loads the CJS version of React (node_modules/react/cjs/react.development.js), whereas in your test case, I can't tell which version it's loading. |
(edited with latest information)
Application/Team
IKC
What happened?
After trying to upgrade to @carbon/charts-react 1.15.7, I’m getting a TypeError of
Cannot read properties of undefined (reading ‘__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED’)
For me, the problem happens creating a
SimpleBarChart. It also happens withLineChart.I see it’s something in react-jsx-runtime.production.min.js, which for some reason is bundled into @carbon/charts-react/dist/index.js (and also index.mjs).
Apparently, the workaround is to downgrade to 1.6.14.
Version
@carbon/charts 1.15.7
@carbon/charts-react 1.15.7
react 18.3.1
react-dom 18.3.1
Data & options used
Relevant log output
StackBlitz example
https://stackblitz.com/edit/carbon-charts-react-webpack-cjs-example
Reproduction
It only happens when loading via require(), either explicitly using require() or using @babel/plugin-transform-modules-commonjs. Also presumably when using @babel/preset-env with certain settings of
module.Unclear if it only happens with Webpack or not. I'm guessing it would happen without Webpack, although you do need babel to compile the JSX file into JS.
What priority level would this be in your opinion?
P0
When did it break?
I traced it down to breaking sometime between 1.13.8 and 1.13.18. Unfortunately lots of files changed between then, and I can't easily narrow it down further because the releases were completely broken from 1.13.9 - 1.13.17.
v1.13.8...v1.13.18
1.13.8 works
1.13.9 No matching version found for @carbon/[email protected]
1.13.10 ~ 1.13.15 other build problems (Can't resolve '@carbon/charts-react’)
1.13.17 Error: Package path . is not exported from package /Users/bill/wkc/mdi/node_modules/@carbon/charts-react
1.13.18 breaks
Theories
The text was updated successfully, but these errors were encountered: