Module errors when running in storybook 7.1

[hobbes7878]

Describe the bug

This may be a mite early, but this add-on errors with module issues on [email protected]. See logs below.

Couple things looked odd to me: Seems a little weird that the cjs build of the add-on is using import statements. I also notice the package.json doesn't declare any exports.

Steps to reproduce the behavior

1. Repo: https://github.com/hobbes7878/addon-svelte-csf-repro/tree/main
2. Install deps and run npm run dev
3. See error immediately

Expected behavior

Should not throw module errors.

Screenshots and/or logs

ERR! /Users/jon/Scripts/addon-svelte-csf-repro/node_modules/@storybook/addon-svelte-csf/dist/cjs/preset/index.js:1
ERR! import { svelteIndexer } from './indexer.js';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at Object.compileFunction (node:vm:360:18)
ERR!     at wrapSafe (node:internal/modules/cjs/loader:1094:15)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1129:27)
ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
ERR!     at Object.newLoader (/Users/jon/Scripts/addon-svelte-csf-repro/node_modules/esbuild-register/dist/node.js:2262:9)
ERR!     at Object.extensions..js (/Users/jon/Scripts/addon-svelte-csf-repro/node_modules/esbuild-register/dist/node.js:4807:24)
ERR!     at Module.load (node:internal/modules/cjs/loader:1043:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:878:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1067:19)
ERR!     at require (node:internal/modules/cjs/helpers:103:18)

Environment

• OS: MacOS
• Node.js version: 16.19.0
• NPM version: 8.19.3
• Browser (if applicable): n/a
• Browser version (if applicable): n/a
• Device (if applicable): n/a

[JReinhold]

Thanks for reporting. For my own sanity I've confirmed that this is indeed broken in this fresh sandbox: https://stackblitz.com/edit/github-i91vd4?file=package.json

Using import in CJS is weird to me too, I introduced that here to get around a Svelte Vite issue, but I would imagine that there's a better solution. I don't fully understand the build system being used in this project.

#84

[ndelangen]

You can use imperative imports in CJS, but you can't use import statements, so the dist is wrong/

I'm not aware of how this works in 7.0.

[hobbes7878]

Hey, again. Just trying to figure out how I can be helpful here.

It sounds like the whole build system needs a refresh. I can try to take that on in a branch with tsup. But I am quite sure I will be slower to figure things out than someone who already knows their way around this repo. But if there's no one left, I will endeavour it. Keen to get this working with the new 7.1.

[shilman]

🚀 Issue was released in v3.0.5 🚀