Storybook: svelte: Unable to load an external svelte components (.svelte files)

[soullivaneuh]

Describe the bug
I cannot import svelte module from external components library like this one: https://gitlab.com/nexylan/svelty

To Reproduce
Steps to reproduce the behavior:

1. Follow Svelty installation (package.json edit). (For my case, I put it on dependencies because I want it installed while my library is added, but devDependencies causes the same issue).
2. Try to import and use the Copy component.
3. Launch test and/or build

You will have the following error:

    Cannot find module 'svelty' from 'RideStepPlace.svelte'

      1 | <script>
    > 2 |   import { Copy } from 'svelty';
        |                ^
      3 | 
      4 |   export let ride;
      5 |   export let step;

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
      at Object.<anonymous> (src/components/RideStepPlace.svelte:2:16)

Expected behavior
The module should be loaded

Please note that the library works well with the roll-up component build. This is only not working with Storybook.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

  System:
    OS: Linux 4.19 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Binaries:
    Node: 12.11.1 - /usr/bin/node
    Yarn: 1.19.1 - /usr/bin/yarn
    npm: 6.12.1 - /usr/bin/npm
  Browsers:
    Firefox: 70.0
  npmPackages:
    @storybook/addon-a11y: ^5.3.6 => 5.3.6 
    @storybook/addon-actions: ^5.3.6 => 5.3.6 
    @storybook/addon-knobs: ^5.3.6 => 5.3.6 
    @storybook/addon-links: ^5.3.6 => 5.3.6 
    @storybook/addon-notes: ^5.3.6 => 5.3.6 
    @storybook/addon-storyshots: ^5.3.6 => 5.3.6 
    @storybook/addon-storysource: ^5.3.6 => 5.3.6 
    @storybook/addon-viewport: ^5.3.6 => 5.3.6 
    @storybook/addons: ^5.3.6 => 5.3.6 
    @storybook/svelte: ^5.3.6 => 5.3.6 

[soullivaneuh]

Here is the workaround I found:

cd node_modules/svelty
npm install
# Build svelte files onto dist js files. Needed for StoryBook
# @see https://github.com/storybookjs/storybook/issues/9542
npm run build-components
cd -

Put that on the install script, it generate the compiled js file to get StoryBook working.

Still, it is possible to load .svelte files directly with rollup and webpack.

Maybe a missing configuration/loader on the Storybook compiler? Which one do you use?

[pocka]

@soullivaneuh
Your package's main and module fields rely on dist/ which does not exist. Try using a prepare hook instead of prepublishOnly. The prepublishOnly hook won't run when the package is installed as git dependency.

If you want Storybook to resolve to the file specified in package.json#svelte, configuring resolve.mainFields would help.

// main.js
module.exports = {
  webpackFinal(config) {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        mainFields: ['svelte', 'browser', 'module', 'main']
    }
  }
}

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!