How to allow node_modules assets in React4XP

Help
1

Enonic version: 7.13
OS: Linux

Hi,

We have a storybook whose components (react) we intend to import within a React4XP project.
So far it’s structured as: the storybook is served as a npm module, its path included in the tsconfigs and the components should be imported/called directly.

We’re facing an issue, though, with the storybook’s images, as the URLs are built from the server’s, giving an error.
For instance, the storybook url('../../assets/images/gifs/animated-icon2.svg' later becomes http://localhost:8080/admin/site/preview/siteseeds/draft/_/service/assets/images/gifs/animated-icon2.svg in the page, throwing a 404.

Is there a way to allow the use of assets from npm modules?

2

I think you can use CopyWebpackPlugin | webpack to copy the files into the assets folder at compiletime.

3

I’m not very versed in webpack, but doesn’t that mean we’d need to adjust the storybook?
I mean, could there be a way of solving through maybe a config in the XP folder?

Currently this is the project structure:

  • root
    • storybook (src)
    • xp
      • node_modules/@seeds/storybook/src/assets/… (where the ‘url’ call with relative path relies)
      • src/main/resources/site/ (where we mostly import @seeds/storybook)
4

When you import js code from node_modules into your React4xp code, I believe the build system is smart enough to bundle the imported code into the chunks.

The same goes for sass, less, etc, if it’s setup to be built into css.

Assets however are separate files, so they are typically not bundled or built.

There are various file plugins for webpack, that might handle assets too.

React4XP build system is currently webpack, which is why I suggested using that.

1 Like