storybookjs/vue-cli-plugin-storybook

[Feature Request] Support vue-cli 5

bodograumann opened this issue · 6 comments

bodograumann commented

With vue-cli 5 comes webpack 5 and so we probably need to change some things.
Currently I am getting:

ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR! - configuration.module.rules[0].resolve has an unknown property 'fullySpecified'. These properties are valid:
ERR! object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, ignoreRootsErrors?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, preferAbsolute?, resolver?, roots?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
ERR! -> Options for the resolver
ERR! at Object.webpack [as get] ([...]/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)

So I guess we at least have to switch to builder-webpack5.

bodograumann commented

I tried using builder-webpack5 with storybook 6.2, but only got this:

/home/[…]/node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13
mainCompilation.fileSystemInfo.createSnapshot(
^

TypeError: Cannot read property 'createSnapshot' of undefined

Upgrading to 6.3.0-rc.8 gives:

Error: Cannot find module '@storybook/core/server'

So there might be another change required to support v6.3?

bodograumann commented

After updating storybook 6.3-rc.11 and nuking the package-lock, everything seems to work.

  • Added @storybook/builder-webpack5
  • Added @storybook/manager-webpack5
  • Configured the following in main.js: 
    core: {
  builder: "webpack5",
},

I guess this could also be handled in the plugin. I’m just not sure how to distinguish between webpack 4 and 5 yet. vue-cli 5 also has a fallback mode for webpack 4...

  • 👍2
  • ❤️1
cmitz commented

@bodograumann Hey man, you saved us a lot of time with your latest comment 😄
Thank you so much!

  • ❤️2
bodograumann commented

Webpack-4 support was now dropped from vue-cli-5, so I think we can probably do the same and release a new major version which only works with vue-cli-5 and webpack-5.

bodograumann commented

For storybook-6.4 compatibility I had to add the following to resolve in preset.js:

        fallback: {
          ...webpackConfig.resolve && webpackConfig.resolve.fallback,
          path: require.resolve("path-browserify"),
        },