To compile vue3 template we have to use @vue/compiler-sfc (because vue-template-compiler is for vue2 only).

https://github.com/vuejs/vue-next/issues/670#issuecomment-579785869

I think this is an issue that should be fixed in vue-cli-plugin-vue-next by not including vue-template-compiler (which is for 2.x only)

So we have to replace parseComponent(...) from vue-template-compiler with parse(...).descriptor from @vue/compiler-sfc

Here:

1. https://github.com/vue-styleguidist/vue-styleguidist/blob/69c848bfcd9bcf5ee0e33053324d5ed206c85eb6/packages/vue-styleguidist/src/loaders/utils/parseVue.ts#L14
2. https://github.com/vue-styleguidist/vue-styleguidist/blob/daf043224af2a1b8bde19af5fe4426dab466596b/packages/vue-styleguidist/src/loaders/utils/getScript.ts#L7
3. https://github.com/vue-styleguidist/vue-styleguidist/blob/f5b70bf1bdca13495fd041a3eb6e844bf9f9e4c4/packages/vue-styleguidist/src/loaders/utils/processComponent.ts#L44

Current behavior

After upgrading to our app to webpack5 https://github.com/nextcloud/nextcloud-vue/pull/1781, vue-styleguidist build fails with the following output:

Building style guide ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■    92%(node:70115) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
	Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
	Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
Building style guide ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 99%TypeError: message.split is not a function
    at formatMessage (/var/www/nextcloud/apps/nextcloud-vue/node_modules/react-dev-utils/formatWebpackMessages.js:18:23)
    at Array.map (<anonymous>)
    at formatWebpackMessages (/var/www/nextcloud/apps/nextcloud-vue/node_modules/react-dev-utils/formatWebpackMessages.js:106:39)
    at /var/www/nextcloud/apps/nextcloud-vue/node_modules/vue-styleguidist/lib/scripts/binutils.js:98:58
    at Hook.eval [as callAsync] (eval at create (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:26:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at emitRecords.err (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:468:23)
    at Compiler.emitRecords (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:846:39)
    at emitAssets.err (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:460:11)
    at hooks.afterEmit.callAsync.err (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:828:14)
    at eval (eval at create (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
    at compiler.hooks.afterEmit.tapAsync (/var/www/nextcloud/apps/nextcloud-vue/node_modules/stylelint-webpack-plugin/dist/linter.js:65:7)
    at Hook.eval [as callAsync] (eval at create (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at asyncLib.forEachLimit.err (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:825:27)
    at /var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/neo-async/async.js:2818:7
    at done (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/neo-async/async.js:3522:9)
    at alreadyWritten (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:668:8)
    at outputFileSystem.readFile (/var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/lib/Compiler.js:756:19)
    at /var/www/nextcloud/apps/nextcloud-vue/node_modules/webpack/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

The main reason for the failure seems to be TypeError: message.split is not a function. A similar problem was also reported for react-styleguidist: https://github.com/styleguidist/react-styleguidist/issues/1703. Maybe this helps finding the reason for the problem.

Hi!

I updated vue-styleguidist from 2.1.2 to 3.13.4. After the update requiring json-data for the documentation examples in the markdown does not work. The example below works on 2.1.2 but is broken on 3.13.4. I did not notice any comments related to this in the release-notes.

My markdown looks something like this:

const tableData = require('./tabledata.json')

<div>
  <my-fancy-table
    :data="tableData" />
</div>

Current behavior

Does not render the component, but it renders an error:

"Error: import or require() statements can be added only by editing a Markdown example file"

Expected behavior

Should render the component with required sample data.

I am playing around with the basic example (https://github.com/vue-styleguidist/vue-styleguidist/tree/master/examples/basic) and it takes around 15 seconds from the moment I save until the styleguide demo is refreshed with the changes. Is this delay normal?

From the gif and description on the projects main page, I was led to believe that the refresh times would be rather quick. Am I missing a configuration option that is not part of the basic example?

Current behavior

To reproduce

I am using this configuration:

'components': './client/components/**/*.vue',

Change it to this configuration:

'sections': [{
    'name': 'Atoms',
    'sections': [
      { 'components': './client/components/atoms/TButton.vue' },
      { 'components': './client/components/atoms/TInput.vue' }
    ],
  }, {
    'name': 'Molecules',
    'components': [],
  }, {
    'name': 'Organisms',
    'components': [
      './client/components/atoms/TCollapsableMenu.vue',
    ],
  }],

And now all components do not show up. Only white screen is shown.

Expected behavior

I expect it to work the same way.

In vuetify (and other libraries), people do not use Vue.extend, they use somthingimportant.helloWorld().whynotHereasWell.extend to create their components in typescript.

vue-docgen-api could simply still parse it.

Update resolveExportedComponent.ts to accept anything before the .extend({

CC @jcchrrr

Hello, I'm so happy to use this awesome project (v 3.23.1) to document my own. I need to add a comment like this:

 /**
  * Computing event
  * 
  * @event computing
  * @type { boolean }
  * @property { boolean } status Computing status
  */
function () {
  // some function that not has a line code with this.$emit
}

to a function that not explicitly call $emit.

Another problem is how to document a slot like this:

  /**
   * @slot Some comment
   */
  render () {
    return this.$scopedSlots.default({
      ready: this.ready,
      computing: this.computing,
      compute: this.compute
    })
  }

Thank you for any suggestion. All the best!

Current behavior

I have a core component library that I publish to npm, and then extend those core components in a Nuxt project that I am building out. To do that I import each core component from node_modules into my project base components, and spread the core component props in, in order to keep the props in sync. Example:

<template>
    <zr-button class="base-button" v-bind="$props">
        <slot></slot>
        <base-icon v-if="icon"
                   class="btn-icon"
                   :icon="icon">
        </base-icon>
    </zr-button>
</template>

<script>
  import ZrButton from '@zaneray/vue-components/components/base/ZrButton.vue';

  /**
   * Button component that leverages the Zaneray BaseButton documented at https://zr-vue.netlify.com/#/Base%20Components/ZrButton
   */

  export default {
    name: "BaseButton",
    components: {
      ZrButton
    },
    props: {
      ...ZrButton.props,
      /**
       * Icon to display in the button.
       */
      icon: {
        type: String
      }
    }
  }
</script>

This BaseButton component documentation then renders as so:

...where the icon prop is documented, but the props spread in from ZrButton are not documented.

The spread props are properly available for use on on the BaseButton component, even though they are not documented.

I am using the latest version of Vue Styleguidist: 4.1.1

To reproduce In a Vue component that is documented with VSG, import another Vue component from a library like https://www.npmjs.com/package/@zaneray/vue-components . Spread the props of the imported component into the props of the component you are documenting, and see that the spread props do not make it through to the documentation

Expected behavior I would expect that the props spread in from the imported component are documented in VSG just like normal props would be.

Hello,

I am trying to get vue-styleguidist configured in my existing app. I have attempted to install via Vue CLI 3 or vue-styleguidist directly, and with our without webpackConfig defined in styleguide.config.js, but no combinations are working for me.

Do you see anything wrong with my setup?

package.json

{
  "name": "fm-client",
  "version": "0.1.0",
  "private": true,
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "scripts": {
    "serve": "npx vue-cli-service serve",
    "devstart": "npx vue-cli-service serve",
    "deve2e": "npx cypress open",
    "build": "npx vue-cli-service build",
    "servebuild": "npx serve -p 8080 -s dist",
    "lint": "npx vue-cli-service lint",
    "test:unit": "npx vue-cli-service test:unit",
    "test:e2e": "npx cypress run",
    "styleguide": "vue-cli-service styleguidist",
    "styleguide:build": "vue-cli-service styleguidist:build"
  },
  "dependencies": {
    "@amcharts/amcharts4": "^4.9.22",
    "@ibm/plex": "^4.0.2",
    "@sentry/browser": "^5.15.5",
    "@sentry/integrations": "^5.15.5",
    "auth0-js": "^9.13.2",
    "auth0-lock": "^11.24.0",
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "jsonwebtoken": "^8.5.1",
    "lodash-es": "^4.17.15",
    "material-design-icons-iconfont": "^5.0.1",
    "moment": "^2.25.3",
    "moment-timezone": "^0.5.28",
    "retry-axios": "^2.1.3",
    "sharp": "^0.25.2",
    "short-uuid": "^3.1.1",
    "sortablejs": "^1.10.2",
    "survey-vue": "^1.7.6",
    "surveyjs-widgets": "^1.7.6",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vue-wait": "^1.4.8",
    "vue2-editor": "^2.10.2",
    "vuedraggable": "^2.23.2",
    "vuejs-logger": "^1.5.4",
    "vuetify": "^2.2.28",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
    "@cypress/code-coverage": "^3.7.2",
    "@vue/cli-plugin-babel": "^4.3.1",
    "@vue/cli-plugin-eslint": "^4.3.1",
    "@vue/cli-service": "^4.3.1",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/test-utils": "^1.0.2",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.0.1",
    "css-loader": "^3.5.3",
    "cypress": "^4.5.0",
    "cypress-failed-log": "^2.7.0",
    "deepmerge": "^4.2.2",
    "eslint": "^7.0.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-vue": "^6.2.2",
    "eslint-plugin-vuetify": "^1.0.0-beta.6",
    "fibers": "^5.0.0",
    "istanbul-lib-coverage": "^3.0.0",
    "jimp": "^0.10.3",
    "lint-staged": "^10.2.2",
    "lodash": "^4.17.15",
    "nyc": "^15.0.1",
    "replace-in-file": "^6.0.0",
    "responsive-loader": "^1.2.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "serve": "^11.3.0",
    "style-loader": "^1.2.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-styleguidist": "^4.23.3",
    "vue-cli-plugin-vuetify": "^2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.4.3",
    "webpack-bundle-analyzer": "^3.7.0"
  }
}

vue.config.js

const replace = require('replace-in-file');
// eslint-disable-next-line import/no-extraneous-dependencies
const ResponsiveLoader = require('responsive-loader/sharp');
// eslint-disable-next-line import/no-extraneous-dependencies
const path = require('path');

module.exports = {
  configureWebpack: {
    // See https://github.com/webpack/docs/wiki/build-performance#sourcemaps
    // And devtool must be `eval` for istanbul coverage to work on .vue files
    // https://github.com/istanbuljs/nyc/issues/718#issuecomment-569346546
    devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'eval',
  },
  chainWebpack: (config) => {
    // When using lerna and simlinks,
    // mode some modules that should be ignored are not
    // we add them here to avoid errors
    const vueBrowserCompilerPath = path.resolve(
      path.dirname(require.resolve('vue-inbrowser-compiler')),
      '../',
    );

    const eslintRule = config.module.rule('eslint');
    if (eslintRule) {
      const vsgPath = path.resolve(path.dirname(require.resolve('vue-styleguidist')), '../');
      const docgenPath = path.resolve(path.dirname(require.resolve('vue-docgen-api')), '../');

      eslintRule.exclude.add(vsgPath);
      eslintRule.exclude.add(docgenPath);
      eslintRule.exclude.add(vueBrowserCompilerPath);
    }

    const jsRule = config.module.rule('js');
    if (jsRule) {
      jsRule.exclude.add(vueBrowserCompilerPath);
    }

    if (process.env.BABEL_ENV === 'test') {
      // https://github.com/istanbuljs/nyc/issues/718#issuecomment-569346546
      replace.sync({
        files: 'node_modules/istanbul-lib-source-maps/lib/get-mapping.js',
        from: 'source: pathutils.relativeTo(start.source, origFile),',
        to: 'source: origFile,',
      });
    }

    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap((options) => ({
        ...options,
        transformAssetUrls: {
          video: ['src', 'poster'],
          source: 'src',
          img: 'src',
          image: 'xlink:href',
          'v-img': ['src', 'srcset', 'lazy-src'],
          'v-card': 'src',
          'v-card-media': 'src',
          'v-responsive': 'src',
        },
      }));

    config.module
      .rule('gifs')
      .test(/\.(gif)$/i)
      .use('file-loader')
      .loader('file-loader');

    config.module.rule('images').uses.clear();

    config.module
      .rule('responsive-images')
      .test(/\.(jpe?g|png)$/i)
      .use('responsive-loader')
      .loader('responsive-loader')
      .tap((options) => ({
        ...options,
        adapter: ResponsiveLoader,
        sizes: [250, 600, 1200, 3000],
        placeholder: true,
        placeholderSize: 50,
        disable: process.env.NODE_ENV !== 'production',
      }));
  },
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "@/scss/colors.scss";',
      },
    },
  },
  transpileDependencies: [
    'regexpu-core',
    'strip-ansi',
    'ansi-regex',
    'ansi-styles',
    'react-dev-utils',
    'chalk',
    'unicode-match-property-ecmascript',
    'unicode-match-property-value-ecmascript',
    'acorn-jsx',
    'vuetify',
    'camelcase',
  ],
};

styleguide.config.js

module.exports = {
  title: 'Default Style Guide',
  components: 'src/components/testing/[A-Z]*.vue',
  defaultExample: false,
  ribbon: {
    text: 'Back to examples',
    url: '/',
  },
  sections: [
    {
      name: 'First Section',
      components: 'src/components/testing/[A-Z]*.vue',
    },
  ],
  // eslint-disable-next-line global-require
  webpackConfig: require('./node_modules/@vue/cli-service/webpack.config.js'),
  exampleMode: 'expand',
};

If I run with the config above, it results in the following error.

> Executing task in folder fm-client: npm run styleguide <

> vue-cli-service styleguidist

 ERROR  Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
    at VueLoaderPlugin.apply (/Users/rachel/dev/local/fm-client/node_modules/vue-loader/lib/plugin-webpack4.js:59:13)
    at webpack (/Users/rachel/dev/local/fm-client/node_modules/webpack/lib/webpack.js:51:13)
    at createServer (/Users/rachel/dev/local/fm-client/node_modules/vue-styleguidist/lib/scripts/create-server.js:45:42)
    at server (/Users/rachel/dev/local/fm-client/node_modules/vue-styleguidist/lib/scripts/server.js:14:49)
    at Object.commandServer (/Users/rachel/dev/local/fm-client/node_modules/vue-styleguidist/lib/scripts/binutils.js:130:41)
    at Object.server (/Users/rachel/dev/local/fm-client/node_modules/vue-styleguidist/lib/scripts/index.js:76:25)
    at /Users/rachel/dev/local/fm-client/node_modules/vue-cli-plugin-styleguidist/index.js:47:64
    at Service.run (/Users/rachel/dev/local/fm-client/node_modules/@vue/cli-service/lib/Service.js:245:12)
    at Object.<anonymous> (/Users/rachel/dev/local/fm-client/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
    at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] styleguide: `vue-cli-service styleguidist`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] styleguide script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rachel/.npm/_logs/2020-05-28T02_59_33_299Z-debug.log
The terminal process terminated with exit code: 1

I read here that with Vue CLI 3 I shouldn't need to include webpackConfig in styleguide.config.js, but when I remove webpackConfig it fails to compile:

> Executing task in folder fm-client: npm run styleguide <

> vue-cli-service styleguidist

ℹ ｢wds｣: Project is running at http://localhost:6060/
ℹ ｢wds｣: webpack output is served from 
ℹ ｢wds｣: Content not from webpack is served from /Users/rachel/dev/local/fm-client

You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://192.168.42.10:6060/

 FAIL  Failed to compile

./src/components/testing/AppButton.vue (./node_modules/vue-styleguidist/lib/loaders/examples-loader.js?customLangs=vue|js|jsx!./src/components/testing/AppButton.vue)
Error: Cannot find module 'acorn'
Require stack:
- /Users/rachel/dev/local/fm-client/node_modules/acorn-dynamic-import/lib/index.js
- /Users/rachel/dev/local/fm-client/node_modules/buble/dist/buble.cjs.js
- /Users/rachel/dev/local/fm-client/node_modules/vue-inbrowser-compiler/lib/vue-inbrowser-compiler.cjs.js
- /Users/rachel/dev/local/fm-client/node_modules/vue-styleguidist/lib/loaders/examples-loader.js
- /Users/rachel/dev/local/fm-client/node_modules/loader-runner/lib/loadLoader.js
- /Users/rachel/dev/local/fm-client/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/rachel/dev/local/fm-client/node_modules/webpack/lib/NormalModule.js
- /Users/rachel/dev/local/fm-client/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/rachel/dev/local/fm-client/node_modules/webpack/lib/Compiler.js
- /Users/rachel/dev/local/fm-client/node_modules/webpack/lib/webpack.js
- /Users/rachel/dev/local/fm-client/node_modules/vue-styleguidist/lib/scripts/build.js
- /Users/rachel/dev/local/fm-client/node_modules/vue-styleguidist/lib/scripts/index.js
- /Users/rachel/dev/local/fm-client/node_modules/vue-cli-plugin-styleguidist/index.js
- /Users/rachel/dev/local/fm-client/node_modules/@vue/cli-service/lib/Service.js
- /Users/rachel/dev/local/fm-client/node_modules/@vue/cli-service/bin/vue-cli-service.js
 @ ./src/components/testing/AppButton.vue (./node_modules/vue-styleguidist/lib/loaders/vuedoc-loader.js!./src/components/testing/AppButton.vue) 71:15-216
 @ ./node_modules/vue-styleguidist/lib/loaders/styleguide-loader.js!./node_modules/vue-styleguidist/lib/client/index.js
 @ ./node_modules/vue-styleguidist/lib/client/index.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/vue-styleguidist/lib/client/index
./node_modules/markdown-to-jsx/dist/esm.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/markdown-to-jsx/dist'
./node_modules/react-icons/lib/esm/iconBase.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-icons/lib/esm'
./node_modules/react-icons/lib/esm/iconContext.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-icons/lib/esm'
./node_modules/react-simple-code-editor/lib/index.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-simple-code-editor/lib'
./node_modules/react-styleguidist/lib/client/rsg-components/Argument/ArgumentRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Argument'
./node_modules/react-styleguidist/lib/client/rsg-components/Arguments/ArgumentsRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Arguments'
./node_modules/react-styleguidist/lib/client/rsg-components/Code/CodeRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Code'
./node_modules/react-styleguidist/lib/client/rsg-components/Components/Components.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Components'
./node_modules/react-styleguidist/lib/client/rsg-components/Components/ComponentsRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Components'
./node_modules/react-styleguidist/lib/client/rsg-components/ComponentsList/ComponentsList.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/ComponentsList'
./node_modules/react-styleguidist/lib/client/rsg-components/ComponentsList/ComponentsListRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/ComponentsList'
./node_modules/react-styleguidist/lib/client/rsg-components/Context/Context.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Context'
./node_modules/react-styleguidist/lib/client/rsg-components/Error/ErrorRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Error'
./node_modules/react-styleguidist/lib/client/rsg-components/Examples/Examples.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Examples'
./node_modules/react-styleguidist/lib/client/rsg-components/Examples/ExamplesRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Examples'
./node_modules/react-styleguidist/lib/client/rsg-components/Heading/HeadingRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Heading'
./node_modules/react-styleguidist/lib/client/rsg-components/Link/LinkRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Link'
./node_modules/react-styleguidist/lib/client/rsg-components/Logo/LogoRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Logo'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Markdown.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Blockquote/BlockquoteRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Blockquote'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Checkbox/CheckboxRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Checkbox'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Details/DetailsRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Details'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Details/DetailsSummaryRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Details'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Hr/HrRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Hr'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/List/ListRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/List'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/MarkdownHeading/MarkdownHeadingRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/MarkdownHeading'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Pre/PreRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Pre'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Table/TableRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Table'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Table/TableHeadRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Table'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Table/TableBodyRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Table'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Table/TableCellRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Table'
./node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Table/TableRowRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Markdown/Table'
./node_modules/react-styleguidist/lib/client/rsg-components/Name/NameRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Name'
./node_modules/react-styleguidist/lib/client/rsg-components/NotFound/NotFoundRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/NotFound'
./node_modules/react-styleguidist/lib/client/rsg-components/Para/ParaRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Para'
./node_modules/react-styleguidist/lib/client/rsg-components/Pathline/PathlineRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Pathline'
./node_modules/react-styleguidist/lib/client/rsg-components/Playground/Playground.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Playground'
./node_modules/react-styleguidist/lib/client/rsg-components/Playground/PlaygroundRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Playground'
./node_modules/react-styleguidist/lib/client/rsg-components/PlaygroundError/PlaygroundErrorRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/PlaygroundError'
./node_modules/react-styleguidist/lib/client/rsg-components/ReactComponent/ReactComponent.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/ReactComponent'
./node_modules/react-styleguidist/lib/client/rsg-components/ReactComponent/ReactComponentRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/ReactComponent'
./node_modules/react-styleguidist/lib/client/rsg-components/Ribbon/Ribbon.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Ribbon'
./node_modules/react-styleguidist/lib/client/rsg-components/Ribbon/RibbonRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Ribbon'
./node_modules/react-styleguidist/lib/client/rsg-components/Section/Section.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Section'
./node_modules/react-styleguidist/lib/client/rsg-components/Section/SectionRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Section'
./node_modules/react-styleguidist/lib/client/rsg-components/Sections/Sections.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Sections'
./node_modules/react-styleguidist/lib/client/rsg-components/Sections/SectionsRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Sections'
./node_modules/react-styleguidist/lib/client/rsg-components/Slot/Slot.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Slot'
./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/StyleGuide.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide'
./node_modules/react-styleguidist/lib/client/rsg-components/Styled/Styled.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Styled'
./node_modules/react-styleguidist/lib/client/rsg-components/TabButton/TabButtonRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/TabButton'
./node_modules/react-styleguidist/lib/client/rsg-components/TableOfContents/TableOfContents.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/TableOfContents'
./node_modules/react-styleguidist/lib/client/rsg-components/TableOfContents/TableOfContentsRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/TableOfContents'
./node_modules/react-styleguidist/lib/client/rsg-components/Text/TextRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Text'
./node_modules/react-styleguidist/lib/client/rsg-components/ToolbarButton/ToolbarButtonRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/ToolbarButton'
./node_modules/react-styleguidist/lib/client/rsg-components/Type/TypeRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Type'
./node_modules/react-styleguidist/lib/client/rsg-components/Version/VersionRenderer.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/lib/client/rsg-components/Version'
./node_modules/react-styleguidist/node_modules/react-group/index.js
Module not found: Can't resolve 'react' in '/Users/rachel/dev/local/fm-client/node_modules/react-styleguidist/node_modules/react-group'

I've spent two full days tweaking my config trying to get vue styleguidist working. Any suggestions would be greatly appreciated!

Note aside from building the docs, application, unit tests, and code coverage all work correctly.

Current Dependencies

"dependencies": {
        "lodash": "4.17.11",
        "vue": "2.5.17",
        "vue-awesome": "3.2.0",
        "vue-scrollto": "2.13.0"
    },
    "devDependencies": {
        "avoriaz": "6.3.0",
        "babel-core": "6.26.0",
        "babel-eslint": "8.0.1",
        "babel-loader": "7.1.2",
        "babel-plugin-istanbul": "4.1.1",
        "babel-plugin-transform-runtime": "6.23.0",
        "babel-polyfill": "6.26.0",
        "babel-preset-env": "1.6.1",
        "chai": "4.2.0",
        "cross-env": "3.0.0",
        "css-loader": "0.25.0",
        "eslint": "4.19.1",
        "eslint-config-standard": "11.0.0",
        "eslint-friendly-formatter": "4.0.1",
        "eslint-loader": "2.1.1",
        "eslint-plugin-html": "4.0.6",
        "eslint-plugin-import": "2.14.0",
        "eslint-plugin-node": "8.0.0",
        "eslint-plugin-promise": "4.0.1",
        "eslint-plugin-standard": "3.1.0",
        "eslint-plugin-vue": "4.7.1",
        "extract-text-webpack-plugin": "3.0.2",
        "file-loader": "1.1.5",
        "karma": "3.1.1",
        "karma-coverage": "1.1.1",
        "karma-es6-shim": "1.0.0",
        "karma-mocha": "1.3.0",
        "karma-mocha-reporter": "2.2.5",
        "karma-phantomjs-launcher": "1.0.4",
        "karma-phantomjs-shim": "1.5.0",
        "karma-sinon-chai": "1.3.1",
        "karma-sourcemap-loader": "0.3.7",
        "karma-spec-reporter": "0.0.32",
        "karma-webpack": "3.0.5",
        "karma-webpack-grep": "1.0.1",
        "less": "2.7.1",
        "less-loader": "4.0.5",
        "mocha": "5.2.0",
        "moment": "2.19.1",
        "phantomjs-prebuilt": "2.1.14",
        "rimraf": "2.6.2",
        "sinon": "5.1.1",
        "sinon-chai": "3.2.0",
        "style-loader": "0.19.0",
        "uglifyjs-webpack-plugin": "1.2.7",
        "url-loader": "0.6.2",
        "validator": "9.0.0",
        "vue-loader": "14.2.2",
        "vue-style-loader": "4.1.2",
        "vue-styleguidist": "1.8.11",
        "vue-template-compiler": "2.5.17",
        "webpack": "3.11.0",
        "webpack-dev-server": "2.9.1",
        "webpack-merge": "4.1.2",
        "webpack-node-externals": "1.7.2"
    },

errors recieved trying to build the docs

> [email protected] styleguide:build C:\Dev\GeniusAvenue\GeniusAvenue-UIKit
> vue-styleguidist build

Building style guide...

TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function


TypeError: this.setDynamic is not a function

Style guide published to:
C:\Dev\GeniusAvenue\GeniusAvenue-UIKit\styleguide

Supporting console output

TypeError: this.setDynamic is not a function

Warning: Cannot parse src\Components\textbox\textbox-component.vue: Error: TypeError: this.setDynamic is not a function

It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

AND

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Dev\GeniusAvenue\GeniusAvenue-UIKit\node_modules\vue-styleguidist\loaders\vuedoc-loader.js!C:\Dev\GeniusAvenue\GeniusAvenue-UIKit\src\Components\textboxgroup\textboxgroup-component.vue
    Used by 1 module(s), i. e.
    C:\Dev\GeniusAvenue\GeniusAvenue-UIKit\node_modules\vue-styleguidist\loaders\styleguide-loader.js!C:\Dev\GeniusAvenue\GeniusAvenue-UIKit\node_modules\vue-styleguidist\lib\index.js
* C:\Dev\GeniusAvenue\GeniusAvenue-UIKit\node_modules\vue-styleguidist\loaders\vuedoc-loader.js!C:\Dev\GeniusAvenue\GeniusAvenue-UIKit\src\components\textboxgroup\textboxgroup-component.vue
    Used by 1 module(s), i. e.
    C:\Dev\GeniusAvenue\GeniusAvenue-UIKit\node_modules\vue-styleguidist\loaders\styleguide-loader.js!C:\Dev\GeniusAvenue\GeniusAvenue-UIKit\node_modules\vue-styleguidist\lib\index.js
Style guide published to:
C:\Dev\GeniusAvenue\GeniusAvenue-UIKit\styleguide

This current dependency chain works fine

 "dependencies": {
        "lodash": "4.17.5",
        "vue": "2.5.16",
        "vue-awesome": "2.3.4",
        "vue-scrollto": "2.11.0"
    },
    "devDependencies": {
        "avoriaz": "6.3.0",
        "babel-core": "6.26.0",
        "babel-eslint": "8.0.1",
        "babel-loader": "7.1.2",
        "babel-plugin-istanbul": "4.1.1",
        "babel-plugin-transform-runtime": "6.23.0",
        "babel-polyfill": "6.26.0",
        "babel-preset-env": "1.6.1",
        "chai": "4.1.2",
        "cross-env": "3.0.0",
        "css-loader": "0.25.0",
        "eslint": "4.8.0",
        "eslint-config-standard": "10.2.1",
        "eslint-friendly-formatter": "3.0.0",
        "eslint-loader": "1.9.0",
        "eslint-plugin-html": "3.2.2",
        "eslint-plugin-import": "2.7.0",
        "eslint-plugin-node": "5.2.0",
        "eslint-plugin-promise": "3.5.0",
        "eslint-plugin-standard": "3.0.1",
        "eslint-plugin-vue": "3.13.1",
        "extract-text-webpack-plugin": "3.0.1",
        "file-loader": "1.1.5",
        "karma": "2.0.2",
        "karma-coverage": "1.1.1",
        "karma-es6-shim": "1.0.0",
        "karma-mocha": "1.3.0",
        "karma-mocha-reporter": "2.2.5",
        "karma-phantomjs-launcher": "1.0.4",
        "karma-phantomjs-shim": "1.4.0",
        "karma-sinon-chai": "1.3.1",
        "karma-sourcemap-loader": "0.3.7",
        "karma-spec-reporter": "0.0.31",
        "karma-webpack": "2.0.2",
        "karma-webpack-grep": "1.0.1",
        "less": "2.7.1",
        "less-loader": "4.0.5",
        "mocha": "5.1.1",
        "moment": "2.19.1",
        "phantomjs-prebuilt": "2.1.14",
        "rimraf": "2.6.2",
        "sinon": "4.5.0",
        "sinon-chai": "3.0.0",
        "style-loader": "0.19.0",
        "uglifyjs-webpack-plugin": "1.2.7",
        "url-loader": "0.6.2",
        "validator": "9.0.0",
        "vue-loader": "14.2.2",
        "vue-style-loader": "4.1.0",
        "vue-styleguidist": "1.7.13",
        "vue-template-compiler": "2.5.16",
        "webpack": "3.11.0",
        "webpack-dev-server": "2.9.1",
        "webpack-merge": "4.1.2",
        "webpack-node-externals": "1.7.2"
    },

Reproduce repository : https://github.com/PhmNgocNghia/reproduce-styleguidist-bug Reproduce instruction:

• Clone
• Install dependency
• npm run styleguide
• Error How to fix: Replace import state of child component to require('path').default

Not sure is it a bug with stlyeguidist or my project got misconfig webpack... It's seem like webpack doesn't transpile import statement with babel. idk

Current behavior

When i use typescript casting using <> operator, e,g. const { checked } = <HTMLInputElement>event.target;, i get Unexpected token error. I have installed Storybook which uses version 4.56.0 of vue-docgen-api.

To reproduce

Simply use this in any component logic

      const a='test';
      const b=<string>a

Expected behavior

It should not throw error when we cast to typescript type using <> operator.

Current behavior

Even though some kind of dependency updates are running automatically, it seems like not all dependencies are properly updated with that. This leads to quite old dependencies, e.g. css-loader is on v2.1.1 in vue-styleguidist, while the current version of css-loader is 6.7.3. Unfortunately this meanwhile leads to a bunch of conflicting dependencies on up-to-date applications.

To reproduce

1. Clone https://github.com/nextcloud/nextcloud-vue
2. npm ci
3. See the following:

Current behavior

Getting error while running vue-cli-service styleguidist

To reproduce

Node: v16.13.0

vue-cli-plugin-styleguidist: ~4.54.4

File package.json

{
  "name": "gw",
  "version": "0.1.155",
  "private": true,
  "scripts": {
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint --fix",
    "deploy": "node ./tools/sshDeploy.js",
    "build:only": "cf dist && vue-cli-service build",
    "dev": "vue-cli-service serve",
    "generate": "node ./tools/generate.js",
    "postbuild": "$npm_execpath run deploy",
    "prebuild": "cf dist",
    "styleguide": "vue-cli-service styleguidist",
    "styleguide:build": "vue-cli-service styleguidist:build",
    "update-web-types": "vue-docgen-web-types",
  },
  "dependencies": {
    "@bit/planetadeleste.gui.form.form-observer": "^1.0.5",
    "@bit/planetadeleste.gui.ui.breadcrumbs": "^1.0.0",
    "@bit/planetadeleste.gui.ui.svg-icon": "^1.0.0",
    "@casl/ability": "^5.3.1",
    "@casl/vue": "1.x",
    "@mdi/font": "5.9.55",
    "@planetadeleste/vue-mc": "^1.0.114",
    "@planetadeleste/vue-mc-gw": "^1.0.83",
    "@planetadeleste/vue-mc-location": "^1.0.47",
    "@planetadeleste/vue-mc-shopaholic": "^1.1.27",
    "@yzfe/svgicon": "^1.0.1",
    "@yzfe/vue-svgicon": "^4.0.2",
    "animated-number-vue": "^1.0.0",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "credit-card-type": "^9.1.0",
    "deepdash-es": "^5.3.9",
    "filepond": "^4.18.0",
    "filepond-plugin-file-encode": "^2.1.10",
    "filepond-plugin-file-validate-type": "^1.2.8",
    "filepond-plugin-image-exif-orientation": "^1.0.11",
    "filepond-plugin-image-preview": "^4.6.11",
    "i18n": "^0.13.2",
    "lodash": "^4.17.21",
    "mathjs": "^10.6.4",
    "mitt": "^3.0.0",
    "moment": "^2.29.1",
    "pusher-js": "^7.4.0",
    "register-service-worker": "^1.7.1",
    "roboto-fontface": "*",
    "treeflex": "^2.0.1",
    "v-mask": "^2.2.4",
    "vue": "^2.6.11",
    "vue-2-breadcrumbs": "^0.8.0",
    "vue-axios": "^3.2.4",
    "vue-class-component": "^7.2.3",
    "vue-code-highlight": "^0.7.8",
    "vue-filepond": "^6.0.3",
    "vue-frag": "^1.1.5",
    "vue-i18n": "^8.24.3",
    "vue-lodash": "^2.1.2",
    "vue-mc": "^0.6.0",
    "vue-moment": "^4.1.0",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.2.0",
    "vue-router-user-roles": "^0.1.92",
    "vue-toastification": "^1.7.11",
    "vue2-editor": "^2.10.2",
    "vue2-transitions": "^0.3.0",
    "vuedraggable": "^2.24.3",
    "vuetify": "^2.6.0",
    "vuetify-confirm": "^2.0.6",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@bit/planetadeleste.shopaholic.types.api": "^0.0.10",
    "@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat",
    "@types/lodash": "^4.14.168",
    "@types/node": "^18.8.2",
    "@typescript-eslint/eslint-plugin": "^4.23.0",
    "@typescript-eslint/parser": "^4.23.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@yzfe/svgicon-loader": "^1.0.5",
    "@yzfe/vue-cli-plugin-svgicon": "~1.0.3",
    "autoprefixer": "^9",
    "chalk": "^4.1.1",
    "clear-folder": "^3.0.0",
    "eslint": "^7.5.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "generate-template-files": "^3.0.0",
    "lint-staged": "^9.5.0",
    "postcss": "^7",
    "prettier": "^2.5.1",
    "sass": "~1.32",
    "sass-loader": "^10.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "tslib": "^2.4.0",
    "typescript": "~4.2.4",
    "vee-validate": "^3.4.5",
    "vue-cli-plugin-compression": "~1.2.0",
    "vue-cli-plugin-styleguidist": "~4.54.4",
    "vue-cli-plugin-vuetify": "^2.3.1",
    "vue-docgen-web-types": "^0.1.8",
    "vue-eslint-parser": "^8.0.0",
    "vue-intellisense": "^1.0.1",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0",
    "vuex-module-decorators": "^1.0.1",
    "yargs": "^17.6.0"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "web-types": "./web-types.json"
}

Error message

⚠ ｢wds｣: transportMode is an experimental option, meaning its usage could potentially change without warning
 ERROR  TypeError: Cannot read properties of undefined (reading 'tapAsync')
TypeError: Cannot read properties of undefined (reading 'tapAsync')
    at /media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js:62:63
    at SyncHook.eval [as call] (eval at create (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:15:1)
    at SyncHook.lazyCompileHook (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/webpack/lib/Compiler.js:631:26)
    at /media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/webpack/lib/Compiler.js:662:28)
    at /media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/webpack/lib/Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:33:1)
    at AsyncSeriesHook.lazyCompileHook (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/tapable/lib/Hook.js:154:20)
    at Watching._go (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/webpack/lib/Watching.js:41:32)
    at /media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/webpack/lib/Watching.js:33:9
    at Compiler.readRecords (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/webpack/lib/Compiler.js:529:11)
    at new Watching (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/webpack/lib/Watching.js:30:17)
    at Compiler.watch (/media/alvaro/Trabajos/Proyectos/gestionweb.uy/web-app/gw/node_modules/webpack/lib/Compiler.js:244:10)

Expected behavior Start style a guide dev server and open in browser.

    Hi @elevatebart,

This fix causes the line break element to be escaped for the props that are set as model. For example;

/**
 * Provides a two-way data binding interface to the component
 * @model
 */
modelValue: {
  type: Boolean,
  default: false,
},

Sets the prop as a model which is also passed through to the documentation. But after this fix it gets escaped like this.

- | v-model | Provides a two-way data binding interface to the component<br/>`@model` true | boolean | -                                                          | false |
+ | v-model | Provides a two-way data binding interface to the component&lt;br/&gt;`@model` true | boolean | -                                                          | false |

...which results it to be rendered as a plain text

Originally posted by @sevilyilmaz in https://github.com/vue-styleguidist/vue-styleguidist/issues/1433#issuecomment-1351504119

Current behavior

When creating an interactive example using a markdown file, the "view code" section on the webpage contains the code twice. For example the markdown content:

<template>
    <span>A simple vue example</span>
</template>
<script lang="ts">
export default {
}
</script>

Will be converted to:

To reproduce

Please clone the repository from here and execute:

npm i
npm run Documentation

Expected behavior

The code should only be printed once, as it was in vue-styleguidist <= 4.50.0.

Thank you very much for your support.