builder-vite: [Bug] v0.1.38 - Cannot import .md files into .mdx

What version of vite are you using?

2.9.13

System info and storybook versions

System: OS: macOS 12.4 CPU: (10) arm64 Apple M1 Max Binaries: Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node Yarn: 3.1.1 - ~/.nvm/versions/node/v16.15.1/bin/yarn npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm Browsers: Chrome: 103.0.5060.53 Edge: 103.0.1264.37 Firefox: 101.0.1 Safari: 15.5 npmPackages: @storybook/addon-a11y: 6.5.9 => 6.5.9 @storybook/addon-essentials: 6.5.9 => 6.5.9 @storybook/builder-vite: ^0.1.38 => 0.1.38 @storybook/client-api: ^6.5.9 => 6.5.9 @storybook/core-common: 6.5.9 => 6.5.9 @storybook/vue3: 6.5.9 => 6.5.9

Describe the Bug

Storybook build fails after upgrade from 0.1.37 to 0.1.38.

No other packages have been upgraded.

info @storybook/vue3 v6.5.9
info 
info => Cleaning outputDir: /Path/to/project/docs/dist
info => Loading presets
info => Copying static files: /Path/to/project/.storybook/public at /Path/to/project/docs/dist/
info => Loading custom manager config
info => Compiling manager..
info => Loading custom manager config
info => Manager built (2.5 s)
vite v2.9.13 building for production...
✓ 460 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (1:0)
file: /Path/to/project/README.md:1:0
ERR! SyntaxError: Unexpected token (1:0)
ERR!     at Parser.pp$4.raise (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:19740:13)
ERR!     at Parser.pp$9.unexpected (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:17034:8)
ERR!     at Parser.pp$5.parseExprAtom (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:19115:10)
ERR!     at Parser.pp$5.parseExprSubscripts (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18907:19)
ERR!     at Parser.pp$5.parseMaybeUnary (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18873:17)
ERR!     at Parser.pp$5.parseExprOps (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18800:19)
ERR!     at Parser.pp$5.parseMaybeConditional (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18783:19)
ERR!     at Parser.pp$5.parseMaybeAssign (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18750:19)
ERR!     at Parser.pp$5.parseExpression (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18713:19)
ERR!     at Parser.pp$8.parseStatement (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:17224:45)
ERR!     at Parser.pp$8.parseTopLevel (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:17091:21)
ERR!     at Parser.parse (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:16863:15)
ERR!     at Function.parse (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:16913:35)
ERR!     at Graph.contextParse (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:23017:38)
ERR!     at Object.transform (/Path/to/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:16142:27)
ERR!     at /Path/to/project/node_modules/rollup/dist/shared/rollup.js:22870:37
ERR!  SyntaxError: Unexpected token (1:0)
ERR!     at Parser.pp$4.raise (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:19740:13)
ERR!     at Parser.pp$9.unexpected (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:17034:8)
ERR!     at Parser.pp$5.parseExprAtom (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:19115:10)
ERR!     at Parser.pp$5.parseExprSubscripts (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18907:19)
ERR!     at Parser.pp$5.parseMaybeUnary (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18873:17)
ERR!     at Parser.pp$5.parseExprOps (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18800:19)
ERR!     at Parser.pp$5.parseMaybeConditional (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18783:19)
ERR!     at Parser.pp$5.parseMaybeAssign (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18750:19)
ERR!     at Parser.pp$5.parseExpression (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:18713:19)
ERR!     at Parser.pp$8.parseStatement (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:17224:45)
ERR!     at Parser.pp$8.parseTopLevel (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:17091:21)
ERR!     at Parser.parse (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:16863:15)
ERR!     at Function.parse (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:16913:35)
ERR!     at Graph.contextParse (/Path/to/project/node_modules/rollup/dist/shared/rollup.js:23017:38)
ERR!     at Object.transform (/Path/to/project/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:16142:27)
ERR!     at /Path/to/project/node_modules/rollup/dist/shared/rollup.js:22870:37 {
ERR!   pos: 0,
ERR!   loc: Position { line: 1, column: 0 },
ERR!   raisedAt: 1,
ERR!   code: 'PLUGIN_ERROR',
ERR!   plugin: 'rollup-plugin-dynamic-import-variables',
ERR!   hook: 'transform',
ERR!   id: '/Path/to/project/README.md',
ERR!   watchFiles: [
ERR!     '/Path/to/project/iframe.html',
ERR!     '/virtual:/@storybook/builder-vite/vite-app.js',
ERR!     'vite/modulepreload-polyfill',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/client-api/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/client-logger/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/addon-docs/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/addon-actions/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/addon-backgrounds/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/addon-measure/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/addon-outline/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/addon-a11y/package.json',
ERR!     '/virtual:/@storybook/builder-vite/preview-entry.js',
ERR!     '/virtual:/@storybook/builder-vite/storybook-stories.js',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/dist/esm/client/index.js',
ERR!     '/Path/to/project/node_modules/@storybook/client-api/dist/esm/index.js',
ERR!     '/Path/to/project/node_modules/@storybook/client-logger/dist/esm/index.js',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/dist/esm/client/preview/config.js',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/dist/esm/client/docs/config.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-docs/preview.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-actions/preview.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-backgrounds/preview.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-measure/preview.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-outline/preview.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-a11y/preview.js',
ERR!     '/Path/to/project/.storybook/preview.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/client-api/dist/esm/ClientApi.js',
ERR!     '/Path/to/project/node_modules/@storybook/client-api/dist/esm/types.js',
ERR!     '/Path/to/project/node_modules/@storybook/client-api/dist/esm/queryparams.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/index.js',
ERR!     '/Path/to/project/node_modules/core-js/package.json',
ERR!     '/Path/to/project/node_modules/global/package.json',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.array.concat.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.array.iterator.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.object.to-string.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.set.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.string.iterator.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/web.dom-collections.iterator.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.regexp.exec.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.string.replace.js',
ERR!     '/Path/to/project/node_modules/global/window.js',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/dist/esm/client/preview/render.js',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/dist/esm/client/preview/decorateStory.js',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/dist/esm/client/preview/index.js',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/dist/esm/client/preview/types-6-0.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-docs/dist/esm/preview.js',
ERR!     '/Path/to/project/node_modules/@storybook/docs-tools/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/dist/esm/client/docs/extractArgTypes.js',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/dist/esm/client/docs/prepareForInline.js',
ERR!     '/Path/to/project/node_modules/@storybook/docs-tools/dist/esm/index.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-actions/dist/esm/preset/preview.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-measure/dist/esm/preview.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-backgrounds/dist/esm/preview.js',
ERR!     '/Path/to/project/node_modules/@storybook/addon-outline/dist/esm/preset/preview.js',
ERR!     '/Path/to/project/packages/utils/helpers/package.json',
ERR!     '/Path/to/project/packages/core/styles/src/index.css',
ERR!     '/Path/to/project/packages/utils/helpers/src/scrollbarWidthVar.ts',
ERR!     '/Path/to/project/node_modules/@storybook/addon-a11y/dist/esm/preview.js',
ERR!     '/Path/to/project/node_modules/qs/package.json',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.string.search.js',
ERR!     '/Path/to/project/node_modules/qs/lib/index.js',
ERR!     '\x00commonjsHelpers.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/StoryStore.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/parameters.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/filterArgTypes.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/inferControls.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/types.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/csf/index.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/hooks.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/decorators.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/args.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/autoTitle.js',
ERR!     '/Path/to/project/node_modules/@storybook/store/dist/esm/sortStories.js',
ERR!     '/Path/to/project/node_modules/vue/package.json',
ERR!     '/Path/to/project/node_modules/ts-dedent/package.json',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.function.name.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.array.slice.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.object.freeze.js',
ERR!     '/Path/to/project/node_modules/ts-dedent/esm/index.js',
ERR!     '/Path/to/project/node_modules/vue/dist/vue.esm-bundler.js',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/node_modules/@storybook/store/package.json',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.object.assign.js',
ERR!     '/Path/to/project/node_modules/@storybook/vue3/node_modules/@storybook/store/dist/esm/index.js',
ERR!     '/Path/to/project/node_modules/util-deprecate/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/csf/package.json',
ERR!     '/Path/to/project/node_modules/@storybook/client-api/dist/esm/StoryStoreFacade.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.symbol.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.symbol.description.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.symbol.iterator.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.array.from.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.object.get-prototype-of.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.regexp.to-string.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.object.keys.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/web.dom-collections.for-each.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.object.entries.js',
ERR!     '/Path/to/project/node_modules/core-js/modules/es.object.values.js',
ERR!     '/Path/to/project/node_modules/util-deprecate/browser.js',
ERR!     '/Path/to/project/node_modules/@storybook/csf/dist/index.js',
ERR!     '/Path/to/project/node_modules/vite/package.json',
ERR!     ... 729 more items
ERR!   ]
ERR! }
info => Loading presets
transforming (465) packages/core/assets/icons/conceptual.json%

Link to Minimal Reproducible Example

No response

Participation

  • I am willing to submit a pull request for this issue.

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 16 (7 by maintainers)

Most upvoted comments

Here is the solution, as found in the vite docs! import notes from './notes.md?raw'

+15
blowsie on Jul 8, 2022

Here is the solution, as found in the vite docs! import notes from './notes.md?raw'

Thanks, it worked like a charm

import { Meta, Markdown } from '@storybook/addon-docs';
import ChangeLog from '../packages/ui/CHANGELOG.md?raw';

<Meta title="Introduction/Changelog" />

<Markdown>{ChangeLog}</Markdown>
+7
PetterRuud on Apr 1, 2023

I’ve come across this problem, change the file extension from md to mdx works.

+1
jackysee on Jul 4, 2022

@IanVS I’ll try throw one together this weekend.

After messing around, I’ve narrowed it down to importing .md files into MDX

This fails

import { Meta } from '@storybook/addon-docs';
import Readme from '../README.md';

<Meta title="Introduction" />

<Readme />

This builds

import { Meta } from '@storybook/addon-docs';
// import Readme from '../README.md';

<Meta title="Introduction" />

{/* <Readme /> */}
+1
spacedawwwg on Jul 1, 2022
Read more comments on GitHub
← builder-vite: [Bug] Unable to find local modules using resolve alias
builder-vite: build-storybook to subfolder results in 404 from iframe.html →