Vue2 with vite, cannot get it to start up.

[jens-morten-mikkelsen]

Describe the bug
I'm working on a project where we are using Vite for compiling, but due to a hard ie11 requirement we are using vue2, which works great using vue-demi.
But when i try and setup Storybook on the project, either using npx sb init --builder @storybook/builder-vite or npx storybook init. It first of all breaks vue-demi in a way that it cant find its own installation of @vue/composition-api, but this i got around by just manually installing @vue/composition-api.
But no matter what then, when i try and run npm run storybook it breaks with:

WARN   Failed to load preset: "C:\\projects\\main\\project\\src\\foo\\client\\src\\modern\\node_modules\\@storybook\\manager-webpack4\\dist\\cjs\\presets\\manager-preset.js"
ERR! Error: Cannot find module 'react/package.json'
ERR! Require stack:

To Reproduce
broken repo: https://github.com/jens-morten-mikkelsen/modern

System
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 101.0.4951.67
Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.47)
npmPackages:
@storybook/addon-actions: ^6.5.3 => 6.5.3
@storybook/addon-essentials: ^6.5.3 => 6.5.3
@storybook/addon-interactions: ^6.5.3 => 6.5.3
@storybook/addon-links: ^6.5.3 => 6.5.3
@storybook/builder-vite: ^0.1.35 => 0.1.35
@storybook/testing-library: ^0.0.11 => 0.0.11
@storybook/vue: ^6.5.3 => 6.5.3

Additional context
The Vite/Vue2 setup live inside an OLD angularJS project, and we are using it to slowly move away from angularJS and into vue. But this should not have any effect on the project.

[Dschungelabenteuer]

I remember a comment from eirslett (who originally wrote the Vite builder) before it moved to the Storybook organization. This might be the reason why you're running into issues. One of the latest replies mentions a fork to have Vue2 compatibility, just keep in mind this might not be as much up-to-date than the "official" integration of the builder.

[jens-morten-mikkelsen]

Thanks @Dschungelabenteuer, that got me a little further :)
I am however still runing into an issue, though a new one now.
Now when i try and run npm run storybook it give me a new error:

ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\projects\_testing\modern'
i ｢wdm｣: Failed to compile.
WARN Force closed manager build
ERR! Error: [vite-plugin-mdx] "react" must be installed

Anybody have any ideas? :)

[jens-morten-mikkelsen]

@yannbf I see you've self-assigned yourself, please dont hesitate to ask if there is anything i can do or provide to help :)

[shilman]

@jens-morten-mikkelsen I looked into this briefly at some point in the past month. Here is a basic repo I got working in case it's of any help: https://github.com/shilman/vue2-vite

The vite builder intentionally does not support Vue2. I think if you want support you'll need to convince the maintainers that it is worthwhile. AFAIK they are, understandably, trying to not get dragged down by legacy support.

[jens-morten-mikkelsen]

@shilman Thanks for the reply, i'll have a look at your repo :)
it is a shame, and we are trying our best to make our vue2 as close to vue 3 as possible, so we hopefully can transition over to vue3 in the future, but sadly for now our customer has to have IE11 support.
But again thanks, i'll have a look at your repo, if it works i'll close this issue. But if it doesn't would you like me to keep it open? :)

[jens-morten-mikkelsen]

@shilman I've updated my storybook/main.js, and is now getting a new error:

ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\projects\_testing\modern'
i ｢wdm｣: Failed to compile.
WARN Force closed manager build
ERR! Error: [vite-plugin-mdx] "react" must be installed

I can see that in your repo you get a react folder under node_modules, but i dont, so i'll look into it more when i get time :)

[jens-morten-mikkelsen]

After installing @mdx-js/react i get a new error:

C:\projects\_testing\modern\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:13
    mainCompilation.fileSystemInfo.createSnapshot(
                                   ^

TypeError: Cannot read properties of undefined (reading 'createSnapshot')
    at C:\projects\_testing\modern\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (C:\projects\_testing\modern\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:12:10)
    at C:\projects\_testing\modern\node_modules\html-webpack-plugin\lib\cached-child-compiler.js:219:35

[jens-morten-mikkelsen]

A little update, i'm still not able to get this working, it seems like there is something, somewhere that has one or more dependencies that are either not listed or not installed.
I did how ever (on a clean project) manage to get it kinda working by using yarn, but i cannot find out why.

[Dschungelabenteuer]

Just in case this helps you, IIRC last time I ran into this createSnapshot error, this was because of mismatching versions between webpack and html-webpack-plugin :

• You may have [email protected] and [email protected] (webpack4 compatible version) installed in node_modules.
• I might be wrong but I think Storybook's manager is still using webpack 4

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.35 containing PR #19230 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[jens-morten-mikkelsen]

@shilman I just tried running npx sb@next init --builder=vite on my project. But sadly it is still not working. it is now throwing this error:

ERR! TypeError: vite.createFilter is not a function
ERR!     at viteReact (C:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@vitejs\plugin-react\dist\index.cjs:202:21)
ERR!     at null.pluginConfig (c:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\builder-vite\dist\cjs\vite-config.js:96:35)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at null.commonConfig (c:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\builder-vite\dist\cjs\vite-config.js:50:14)
ERR!     at null.createViteServer (c:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\builder-vite\dist\cjs\vite-server.js:18:21)
ERR!     at Object.start (c:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\builder-vite\dist\cjs\index.js:64:12)
ERR!     at async storybookDevServer (C:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\core-server\dist\cjs\dev-server.js:200:23)
ERR!     at async buildDevStandalone (C:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\core-server\dist\cjs\build-dev.js:130:31)
ERR!     at async xn (C:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\cli\dist\generate.js:266:1900)
ERR!  TypeError: vite.createFilter is not a function
ERR!     at viteReact (C:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@vitejs\plugin-react\dist\index.cjs:202:21)
ERR!     at null.pluginConfig (c:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\builder-vite\dist\cjs\vite-config.js:96:35)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at null.commonConfig (c:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\builder-vite\dist\cjs\vite-config.js:50:14)
ERR!     at null.createViteServer (c:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\builder-vite\dist\cjs\vite-server.js:18:21)
ERR!     at Object.start (c:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\builder-vite\dist\cjs\index.js:64:12)
ERR!     at async storybookDevServer (C:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\core-server\dist\cjs\dev-server.js:200:23)
ERR!     at async buildDevStandalone (C:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\core-server\dist\cjs\build-dev.js:130:31)
ERR!     at async xn (C:\projects\horkram\hokadk\src\Portal.Website\client\src\modern\node_modules\@storybook\cli\dist\generate.js:266:1900)

after running npm run storybook.

But since i am coming to terms with the sad fact that it might just be a vue2.6 issue, and the fact that we currently have no scope on being able to move to 2.7 or 3. I will not reopen this issue, but only leave this as an information to you :)

[shilman]

Pretty sure we're Vite3+ now. @IanVS can you chime in here?

[IanVS]

@jens-morten-mikkelsen yes, that error indicates that you're using an older version of vite and/or vite plugins. Please update to vite 3 and the latest version of your vite plugin for vue.