Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[vue3] Introduction page of base repro example does not render

See original GitHub issue

Describe the bug When creating a basic reproduction with npx sb repro and selection vue3 as framework/template, the “Introduction”-page does not render.

Instead there are errors in the console. Also storybook tries to post to http://localhost:6007/runtime-error, but gets a 404 error.

[HMR] bundle 'preview' has 51 warnings client.js:195
./src/stories/Introduction.stories.mdx 35:9-12
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 38:6-9
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 41:6-9
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 41:2020-2023
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 43:30-33
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 43:230-233
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 45:69-72
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 45:177-180
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 47:94-97
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 52:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 54:95-98
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 56:19-22
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 58:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 62:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 65:6-9
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 65:24-27
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 65:121-124
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 69:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 72:6-9
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 72:24-27
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 72:108-111
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 76:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 79:6-9
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 79:24-27
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 79:101-104
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 83:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 86:6-9
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 86:24-27
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 86:100-103
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 88:15-18
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 90:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 94:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 97:6-9
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 97:24-27
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 97:110-113
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 101:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 104:6-9
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 104:24-27
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 104:103-106
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 108:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 111:6-9
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 111:24-27
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 111:99-102
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 115:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 118:6-9
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 118:24-27
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 118:107-110
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 120:5-8
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 122:42-45
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 141:11-14
"export 'mdx' was not found in '@mdx-js/react'
./src/stories/Introduction.stories.mdx 144:7-10
"export 'mdx' was not found in '@mdx-js/react' client.js:196
Uncaught TypeError: Object(...) is not a function
    page Introduction.stories.mdx:229
    React 16
    node_modules 3.iframe.bundle.js:166
    _callee$ renderDocs.js:99
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep renderDocs.js:5
    _next renderDocs.js:7
    promise callback*asyncGeneratorStep renderDocs.js:5
    _next renderDocs.js:7
    node_modules 3.iframe.bundle.js:73
    node_modules 3.iframe.bundle.js:73
    _renderDocsAsync renderDocs.js:110
    renderDocsAsync renderDocs.js:17
    renderDocs renderDocs.js:13
    _callee9$ PreviewWeb.js:873
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep PreviewWeb.js:8
    _next PreviewWeb.js:10
    promise callback*asyncGeneratorStep PreviewWeb.js:8
    _next PreviewWeb.js:10
    node_modules vendors~main.iframe.bundle.js:25993
    node_modules vendors~main.iframe.bundle.js:25993
    render PreviewWeb.js:886
    _callee11$ PreviewWeb.js:891
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep PreviewWeb.js:8
    _next PreviewWeb.js:10
    promise callback*asyncGeneratorStep PreviewWeb.js:8
    _next PreviewWeb.js:10
    node_modules vendors~main.iframe.bundle.js:25993
    node_modules vendors~main.iframe.bundle.js:25993
    renderDocs PreviewWeb.js:936
    _callee8$ PreviewWeb.js:781
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep PreviewWeb.js:8
    _next PreviewWeb.js:10
    promise callback*asyncGeneratorStep PreviewWeb.js:8
    _next PreviewWeb.js:10
    promise callback*asyncGeneratorStep PreviewWeb.js:8
    _next PreviewWeb.js:10
    node_modules vendors~main.iframe.bundle.js:25993
    node_modules vendors~main.iframe.bundle.js:25993
    renderSelection PreviewWeb.js:804
    _callee3$ PreviewWeb.js:335
Introduction.stories.mdx:229
The above error occurred in the <page> component:
    in page
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in MDXProvider (created by DocsContainer)
    in ThemeProvider (created by DocsContainer)
    in SourceContainer (created by DocsContainer)
    in DocsContainer

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. iframe.html:37:21

System

Environment Info:

  System:
    OS: Linux 5.16 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 17.3.0 - /usr/bin/node
    Yarn: 3.1.1 - /usr/bin/yarn
    npm: 8.3.2 - /usr/bin/npm
  Browsers:
    Firefox: 96.0.3
  npmPackages:
    @storybook/addon-actions: ^6.4.17 => 6.4.17 
    @storybook/addon-docs: ^6.4.17 => 6.4.17 
    @storybook/addon-essentials: ^6.4.17 => 6.4.17 
    @storybook/addon-links: ^6.4.17 => 6.4.17 
    @storybook/vue3: ^6.4.17 => 6.4.17

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

bodograumanncommented, Feb 2, 2022

Doing a npm update -g solved that as well.

0reactions

ndelangencommented, Feb 2, 2022

thanks for the explanations and your thorough testing @bodograumann

Top Results From Across the Web

[vue3] Introduction page of base repro example does not ...

Describe the bug When creating a basic reproduction with npx sb repro and selection vue3 as framework/template, the “Introduction”-page does not render.

v-slot not rendering along side default slot. #1868 - GitHub

I recently switched a project from the old slot syntax to the new v-slot syntax and my snapshot started failing. Some of the...

Vue 3 & Vite built application shows blank page - Stack Overflow

If you go in production this fails and shows a blank page, and you need to changes this nameExample to '/' to show...

Server-Side Rendering (SSR) - Vue.js

Server-rendered markup doesn't need to wait until all JavaScript has been downloaded and executed to be displayed, so your user will see a...

was accessed during render but is not defined on instance ...

Note: if runing this in a windows command prompt or powershell replace && with ; (or simply run each command separately). create index.js...