Storybook: Doesn't render vue-component with custom webpack config

[mimamuh]

Hi,

storybook/vue (v3.2.16) seems to break to reader a simple vue component, when there is a custom webpack.config.js. I made a simple reproduction here example.

When there is a webpack config, I get the following error in the browser console and the story stays blank, no component will be rendered:
vue.runtime.esm.js:567 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

[ndelangen]

Thank you for reporting this!

Looks like we should do a better job merging webpack configs

[DaxChen]

Hi, is there currently any workaround for this issue?
Or any hints why this occurs?
Great thanks!

[skyrpex]

Yeah :smile: The workaround is to tell webpack to use Vue's runtime compiler file. You need to add this to your webpack.config.js:

module.exports = {
  //
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
  },
}

[DaxChen]

I ended up using something like this (I'm using vue-cli webpack template):

var path = require('path')
var appBaseConfig = require('../build/webpack.base.conf')
var vueLoaderConfig = require('../build/vue-loader.conf')
var config = require('../config')
var utils = require('../build/utils')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = (baseConfig, env) => {
  baseConfig.resolve.extensions = ['.js', '.vue', '.json']

  // webpack alias
  baseConfig.resolve.alias['@'] = resolve('src')
  baseConfig.resolve.alias['~'] = resolve('src')
  baseConfig.resolve.alias.assets = resolve('src/assets')
  baseConfig.resolve.alias.style = resolve('src/style')

  baseConfig.module.rules = appBaseConfig.module.rules
    .concat(
      utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
    )

  return baseConfig
}

Thought I shared it for someone else using vue-cli's webpack template!

[ndelangen]

Thanks for sharing the working config @DaxChen
I've tried reproducing this issue, but setting a config like the one @MiMaMuh provided in his reproduction repo seems to work on our vue-kitchen-sink example. I think this got fixed.

[dora-gt]

@skyrpex Thank you so much for sharing the workaround. It helped a lot for me.