[docs] Fix charts demo using too deep import #10263

LukasTy · 2023-09-07T12:02:14Z

Part of #10195

Adding @Janpot as a preferred reviewer as he approved #10111, which might be related.

Ended up only fixing the demo imports.
The root cause is covered with #10272

mui-bot · 2023-09-07T12:32:13Z

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-10263--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	-214.7	-10	-138	-104.76	70.562
Sort 100k rows	ms	610.1	1,269.2	1,269.2	1,011.52	220.812
Select 100k rows	ms	595.7	715.3	681.3	670.78	39.923
Deselect 100k rows	ms	145.6	203.3	192.8	181.56	21.381

Generated by 🚫 dangerJS against 2eb23f3

Janpot · 2023-09-07T13:55:31Z

Not sure if related, but bumping into mui/material-ui#38860 while debugging this.

After I relocate the tsconfig.json, I can't seem to replicate the behavior of this PR locally. @LukasTy Did you manage to?

LukasTy · 2023-09-07T14:02:17Z

After I relocate the tsconfig.json, I can't seem to replicate the behavior of this PR locally. Did you manage to?

Do you mean if I'm able to reproduce the problem(s) locally? Then no, it's evident only in codesandbox. 🤔

Janpot · 2023-09-07T14:14:46Z

We're still having issues with deeper imports targeting specific files, instead of a root/re-export:

When you use the exports field, that becomes the only paths that will resolve in your module. /hooks/useDrawingArea doesn't match any path in the exports field, so I'd say it's expected to not resolve. If these hooks are public API, then we need we need to expose them in the exports field. Have you tried adding the following to the exports?

   "./hooks/*": {
      "types": "./hooks/*/index.d.ts",
      "require": "./hooks/*/index.js",
      "import": "./esm/hooks/*/index.js"
    }

If these subpaths are not intended to be public API, then I guess we should change the import to

import { useDrawingArea } from "@mui/x-charts";

LukasTy · 2023-09-07T15:22:20Z

Thanks for the input @Janpot .
It does not seem that we want to endorse using 2+ levels deep imports, because of this, maybe it's a good enough compromise for now to just change the demo(s) to avoid such usage and see if this approach works.
The only gripe I have is that such imports are perfectly viable in both pickers and data grid packages. 🤔

flaviendelangle · 2023-09-07T15:33:52Z

docs/data/charts/pie-demo/PieChartWithCenterLabel.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PieChart } from '@mui/x-charts/PieChart';
-import { useDrawingArea } from '@mui/x-charts/hooks/useDrawingArea';


We have a lint rule that was probably not set-up for the charts

This code is in the docs folder. I don't think that eslint targets it. 🤔

TreeView imports are restricted in the doc.
I don't know which line of the lint prevents it though because I don't find any restricted import targeting the doc in our lint config.

Janpot · 2023-09-08T06:58:13Z

The only gripe I have is that such imports are perfectly viable in both pickers and data grid packages. 🤔

Yes, they don't have the exports field and thus fall back to the old resolution.

The reason for the setup is as follows. d3 switched to ESM-only setup, which forces @mui/charts to either not use it, switch to ESM, or jump through a hoop to get cjs working. We decided to start with the second option and use @mui/x-charts as a canary for a potential switch in more of our libs in the next major. We can always add the third option later if it turns out the community isn't ready for it yet.

LukasTy · 2023-09-08T07:04:59Z

The reason for the setup is as follows. <...>

Thank you for providing the insight I was not aware of. 👍
Then everything checks out, I'm fine with the contents of the PR.
Can I get approval to include it in the release? 🤔

Janpot · 2023-09-08T07:16:12Z

packages/x-charts/package.json

@@ -71,12 +71,14 @@
    ".": {
      "types": "./index.d.ts",
      "require": "./index.js",
-      "import": "./esm/index.js"
+      "import": "./esm/index.js",
+      "default": "./modern/index.js"


@LukasTy Is this still necessary? I'm hesitant adding more conditions if they don't solve an actual issue.

Yes, it is the main change that fixed all the demos.
Without it none of the demos load in codesandbox.
The changes on one of the demos is for import depth fixing. 😉

Any idea on why react-scripts isn't resolving to the import condition?

It's probably something that codesandbox is doing on their side, because StackBlitz is working fine. 🤷

Yep, it feels a bit like we're solving the problem in the wrong location. When I fix the codesandbox so that the files are actually covered by the tsconfig.json I get a different error: https://codesandbox.io/s/peaceful-austin-8ktz7l?file=/tsconfig.json

I have a feeling that could be related to us not adding file extensions to our imports.

Or we could focus on solving #10257?
Maybe solving it could also cover the issue that codesandbox is having. 🤔

It seems that just removing the require condition also fixes the issue: #10272
It's a problematic condition because it wouldn't work in the first place. That code is trying to require a ESM only module (d3).
Still no clue as to why react-scripts in this specific codesandbox setup gives precedence to the default condition though.

Feel free to incorporate #10272 in this PR and merge.

Or maybe just merge your PR specifically targeting the fix you've done, invested time, and resolved? 🤔

Janpot

Can I get approval to include it in the release? 🤔

Ok for me. But I'd remove the "default" condition if it's not needed. The ESM landscape is already full of misconfigured setups. Let's keep our chances of adding another one to a minimum 😄

play-around

6ca4c3b

LukasTy added the component: charts This is the name of the generic UI component, not the React module! label Sep 7, 2023

LukasTy self-assigned this Sep 7, 2023

LukasTy changed the title ~~Experiment with charts bundling~~ [WIP] Experiment with charts bundling Sep 7, 2023

Just a default

7e610ee

Use modern build as fallback

e3e08ad

LukasTy changed the title ~~[WIP] Experiment with charts bundling~~ [charts] Fix module loading in codesandbox Sep 7, 2023

LukasTy requested review from Janpot, flaviendelangle and alexfauquette September 7, 2023 12:55

Avoid 3rd level import

5bc821e

flaviendelangle reviewed Sep 7, 2023

View reviewed changes

Janpot reviewed Sep 8, 2023

View reviewed changes

Janpot approved these changes Sep 8, 2023

View reviewed changes

LukasTy mentioned this pull request Sep 8, 2023

[charts] series not drawing since v6.0.0-alpha.8 #10257

Closed

2 tasks

Janpot mentioned this pull request Sep 8, 2023

[charts] Remove require condition from package.json exports #10272

Merged

Remove default

2eb23f3

LukasTy changed the title ~~[charts] Fix module loading in codesandbox~~ [docs] Fix charts demo using too deep import Sep 8, 2023

LukasTy added the docs Improvements or additions to the documentation label Sep 8, 2023

LukasTy enabled auto-merge (squash) September 8, 2023 11:14

LukasTy merged commit 5744ddb into mui:master Sep 8, 2023
16 checks passed

LukasTy deleted the charts-exports-experiment branch September 8, 2023 11:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Fix charts demo using too deep import #10263

[docs] Fix charts demo using too deep import #10263

LukasTy commented Sep 7, 2023 •

edited

Loading

mui-bot commented Sep 7, 2023 •

edited

Loading

Janpot commented Sep 7, 2023

LukasTy commented Sep 7, 2023

Janpot commented Sep 7, 2023 •

edited

Loading

LukasTy commented Sep 7, 2023 •

edited

Loading

flaviendelangle Sep 7, 2023

LukasTy Sep 8, 2023

flaviendelangle Sep 8, 2023

Janpot commented Sep 8, 2023

LukasTy commented Sep 8, 2023

Janpot Sep 8, 2023

LukasTy Sep 8, 2023

Janpot Sep 8, 2023

LukasTy Sep 8, 2023

Janpot Sep 8, 2023 •

edited

Loading

LukasTy Sep 8, 2023

Janpot Sep 8, 2023 •

edited

Loading

Janpot Sep 8, 2023

LukasTy Sep 8, 2023

Janpot left a comment •

edited

Loading

[docs] Fix charts demo using too deep import #10263

[docs] Fix charts demo using too deep import #10263

Conversation

LukasTy commented Sep 7, 2023 • edited Loading

mui-bot commented Sep 7, 2023 • edited Loading

Netlify deploy preview

Updated pages

Janpot commented Sep 7, 2023

LukasTy commented Sep 7, 2023

Janpot commented Sep 7, 2023 • edited Loading

LukasTy commented Sep 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Janpot commented Sep 8, 2023

LukasTy commented Sep 8, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Janpot Sep 8, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Janpot Sep 8, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Janpot left a comment • edited Loading

Choose a reason for hiding this comment

LukasTy commented Sep 7, 2023 •

edited

Loading

mui-bot commented Sep 7, 2023 •

edited

Loading

Janpot commented Sep 7, 2023 •

edited

Loading

LukasTy commented Sep 7, 2023 •

edited

Loading

Janpot Sep 8, 2023 •

edited

Loading

Janpot Sep 8, 2023 •

edited

Loading

Janpot left a comment •

edited

Loading