[Bug] Setup with sveltekit fails
CarlAmbroselli opened this issue · 6 comments
CarlAmbroselli commented
Describe the bug
I'm trying to get this to run, but it fails to start.
Key differences from readme:
- Monorepo setup (hence my node_modules are one folder up)
- in vite config:
import { sveltekit } from '@sveltejs/kit/vite';instead of using@sveltejs/vite-plugin-svelte - in storyboard config: framework is
@storybook/sveltekitinstead of@storybook/svelte-vite
I'm using a monorepo, hence the node_modules folder is one layer above my project.
My .storybook/main.js file looks like the following:
import { join, dirname } from 'path';
/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value) {
return dirname(require.resolve(join(value, 'package.json')));
}
/** @type { import('@storybook/sveltekit').StorybookConfig } */
const config = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)'],
addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@storybook/addon-interactions'),
getAbsolutePath('@storybook/addon-svelte-csf')
],
framework: {
name: getAbsolutePath('@storybook/sveltekit'),
options: {}
},
docs: {
autodocs: 'tag'
}
};
export default config;
One thing that stands out to me is the getAbsolutePath('@storybook/sveltekit'), piece, which differs from the README, but is afaik the new supported framework. The getAbsolutePath part of it was auto-generated from the npx storybook@latest init command already, which detected the monorepo setup.
Also, this is sveltekit, so in my vite config I'm not using '@sveltejs/vite-plugin-svelte, but instead import { sveltekit } from '@sveltejs/kit/vite';, which also differs from the README.
Screenshots and/or logs
storybook dev -p 6006
@storybook/cli v7.5.3
(node:78056) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: ./.storybook/main.js.
Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
If you believe this is a bug, please open an issue on Github.
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: /Developer/test_project/node_modules/@storybook/addon-svelte-csf/dist/index.js.
Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
If you believe this is a bug, please open an issue on Github.
/Developer/test_project/node_modules/@storybook/addon-svelte-csf/dist/components/Meta.svelte:1
<script>
^
SyntaxError: Unexpected token '<'
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
at Module._compile (node:internal/modules/cjs/loader:1340:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Object.newLoader (/Developer/test_project/node_modules/esbuild-register/dist/node.js:2262:9)
at extensions..js (/Developer/test_project/node_modules/esbuild-register/dist/node.js:4838:24)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at loadPreset (/Developer/test_project/node_modules/@storybook/core-common/dist/index.js:15:82)
at loadPreset (/Developer/test_project/node_modules/@storybook/core-common/dist/index.js:15:82)
at async Promise.all (index 1)
at async loadPresets (/Developer/test_project/node_modules/@storybook/core-common/dist/index.js:15:505)
at async getPresets (/Developer/test_project/node_modules/@storybook/core-common/dist/index.js:15:1525)
at async buildDevStandalone (/Developer/test_project/node_modules/@storybook/core-server/dist/index.js:119:1599)
at async withTelemetry (/Developer/test_project/node_modules/@storybook/core-server/dist/index.js:103:3903)
at async dev (/Developer/test_project/node_modules/@storybook/cli/dist/generate.js:473:401)
at async Command.<anonymous> (/Developer/test_project/node_modules/@storybook/cli/dist/generate.js:475:225)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
WARN Failed to load preset: {"type":"presets","name":"/Developer/test_project/node_modules/@storybook/addon-svelte-csf/dist/index.js"} on level 1
/Developer/test_project/node_modules/@storybook/addon-svelte-csf/dist/components/Meta.svelte:1
<script>
^
SyntaxError: Unexpected token '<'
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
at Module._compile (node:internal/modules/cjs/loader:1340:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Object.newLoader (/Developer/test_project/node_modules/esbuild-register/dist/node.js:2262:9)
at extensions..js (/Developer/test_project/node_modules/esbuild-register/dist/node.js:4838:24)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Environment
- OS: MacOS
- Node.js version: v21.1.0
- NPM version: 10.2.0
- Browser (if applicable): Chrome
Versions
"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-interactions": "^7.5.3",
"@storybook/addon-links": "^7.5.3",
"@storybook/addon-svelte-csf": "^4.0.13",
"@storybook/blocks": "^7.5.3",
"@storybook/svelte": "^7.5.3",
"@storybook/svelte-vite": "^7.5.3",
"@storybook/sveltekit": "^7.5.3",
"@storybook/testing-library": "^0.2.2",
"@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/adapter-vercel": "^3.0.3",
"@sveltejs/kit": "^1.23.0",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"eslint-plugin-storybook": "^0.6.15",
"eslint-plugin-svelte": "^2.33.0",
"prettier-plugin-svelte": "^3.0.3",
"storybook": "^7.5.3",
"svelte": "^4.2.0",
I'd appreciate any help around what else I could try to get this to work!
tomolenet commented
Same here but using svelte-vite without sveltekit.
We can fix this by removing getAbsolutePath and do not use workspaces in the package.json of our monorepo.
j3rem1e commented
Do you have a repo where I can test this setup ?
tomolenet commented
Try it here: https://github.com/tomolenet/addon-svelte-csf-160
tomolenet commented
Any news on this? Can we support? Looks like the compiler can not parse Svelte?
/home/devs/addon-svelte-csf-160/node_modules/@storybook/addon-svelte-csf/dist/components/Meta.svelte:1
<script>
^
SyntaxError: Unexpected token '<'
JReinhold commented
@tomolenet does the workaround mentioned at storybookjs/builder-vite#321 (comment) solve your issue?