search

forumone / gesso

Gesso Drupal theme
66 stars 13 forks source link

JSX imports no longer include CSS & JS on page if not used #841

Closed dcmouyard closed 1 week ago

dcmouyard commented 3 months ago

When updating from Gesso 5.2.8 to 5.3.2, I noticed that importing the stories file from another component no longer loads the CSS and JS for that component unless it’s rendered somewhere within the stories file. My hunch is that this has to do with updating to Storybook 8.

Using the homepage template as an example, in source/04-templates/homepage/homepage.stories.jsx:

// Importing components to ensure their assets get loaded in Storybook when they
// get referenced since Drupal loads them as a library.
import { Default as HeroBGImage } from '../../03-components/hero-bg-image/hero-bg-image.stories.jsx';

The stylesheet for this component no longer gets loaded. Example: https://forumone.github.io/gesso/?path=/story/templates-homepage--homepage

Replacing import { Default as HeroBGImage } from '../../03-components/hero-bg-image/hero-bg-image.stories.jsx'; with import '../../03-components/hero-bg-image/hero-bg-image.scss'; fixes this specific issue, but requires us to manually update these dependencies everywhere they’re used rather than just in the original component stories file. It’s also more cumbersome when importing components that themselves import other components.

kmonahan commented 3 months ago

If you want to import a component just for a side effects import from '../../03-components/hero-bg-image/hero-bg-image.stories.jsx' might do it. But I suspect in some of these cases, the issue might be that we're trying to import the twig and scss files when we should be importing the story for reuse instead.

dcmouyard commented 3 months ago

Using import from '../../03-components/hero-bg-image/hero-bg-image.stories.jsx' resulted in an error, but import '../../03-components/hero-bg-image/hero-bg-image.stories.jsx' worked. Thanks @kmonahan!

kmonahan commented 3 months ago

Ah, yes, that's what happens when I try to write code in GitHub comments. Glad you were able to translate that to the right syntax!

dcmouyard commented 3 months ago

We need to update the homepage template any others using this approach.

kmonahan commented 3 months ago

In the short term, yes. Longer term, I think we should restructure the homepage template a bit so that we reuse the Hero story (and probably do the same elsewhere). But that can wait a bit if we've got a workaround.

kmonahan commented 3 months ago

Another thing to try as a shorter-term fix: what if we add sideEffects: ['*.stories.jsx'] to package.json? I can try that when I get some Gesso time, but I suspect what's going on here is that unused stories are being tree-shaken (which is what you'd want in most cases), in which case that might tell webpack to always assume stories.jsx files are needed, even if they don't appear to be used.

See the second code example at https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free