Ensure SvelteKit plugin is used

.storybook/main.cjs

@@ -1,5 +1,6 @@
 const preprocess = require('svelte-preprocess');
 const path = require('path');
+const { loadConfigFromFile, mergeConfig } = require('vite');
 
 module.exports = {
 	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
@@ -26,17 +27,19 @@ module.exports = {
 		experimental: { inspector: false }
 	},
 
-	async viteFinal(config) {
-		config.resolve.alias = {
-			...(config.resolve.alias || {}),
-			...{
-				$app: path.resolve('./.svelte-kit/runtime/app'),
-				$lib: path.resolve('./src/lib')
+	async viteFinal(config, { configType }) {
+		const { config: userConfig } = await loadConfigFromFile(
+			path.resolve(__dirname, "../vite.config.js")
+		);
+		// Remove Svelte plugins added by Storybook plugin so SvelteKit plugins don't duplicate them
+		config.plugins = config.plugins.flat(10).filter(p => !p.name.startsWith('vite-plugin-svelte'));
+		return mergeConfig(config, {
+			...userConfig,
+			server: {
+				fs: {
+					allow: ['.storybook']
+				}
 			}
-		};
-		config.server.fs.strict = false;
-		config.server.fs.allow = ['.'];
-		// Merge custom configuration into the default config
-		return config;
-	}
+		});
+  	}
 };

README.md

@@ -11,11 +11,7 @@ What works, what doesn't, and what hasn't been attempted:
 
 - 🟢 Basic storybook init/demo stories. (Requires minor tweaks to filenames.)
 - 🟢 Typescript (components and stories)
-- 🟡 Aliased imports. E.g. `$app/stores`. _Once the aliases are added,_ then some of these will work.
-  - 🟢 `$app/env` Variables _are_ set. Notable because they make use of `import.meta.env`.
-  - 🟢 `$app/paths` Can be imported but these are unset. (Need to call `set_paths` fn.)
-  - 🔴 `$app/navigation`. Closely linked to app state. Probably need to pursue some version of a [mocking strategy](https://github.com/storybookjs/storybook/issues/14952#issuecomment-1023188255).
-  - 🔴 `$app/stores` Similar story
+- 🟢 Aliased imports. E.g. `$app`, `$lib`, etc.
 - ❓ Tailwind, etc. (I don't think this should be much of a problem.)
 - 🟢 Stories that are `*.stories.svelte` files (via `@storybook/addon-svelte-csf`). This appears to work just fine. I did swap out these stories for less-fancy stories just to see if this package was introducing any additional complications/limitations. (Related: https://github.com/storybookjs/storybook/issues/14952#issuecomment-862043558)
 
@@ -32,9 +28,6 @@ To try to run storybook with the current repo:
 git clone [email protected]:michaelwooley/storybook-experimental-vite.git
 cd storybook-experimental-vite
 npm i
-
-npm run build # Need to build for storybook
-
 npm run storybook
 ```
 
@@ -230,4 +223,4 @@ Thu Jun 30 02:52:07 AM EDT 2022
 - https://github.com/sveltejs/kit/issues/5184
 - https://github.com/madeleineostoja/sveltekit-boilerplate
 - https://github.com/storybookjs/storybook/issues/14952
-- https://storybook.js.org/docs/react/builders/vite
+- https://storybook.js.org/docs/react/builders/vite

package.json

@@ -12,7 +12,7 @@
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
 		"format": "prettier --write --plugin-search-dir=. .",
-		"storybook": "npm run build && start-storybook -p 6006",
+		"storybook": "start-storybook -p 6006",
 		"build-storybook": "build-storybook"
 	},
 	"devDependencies": {