question-mark
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.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
blowsiecommented, Jul 8, 2022

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

0reactions
IanVScommented, Jul 8, 2022

I’m not very familiar with mdx, I don’t use it myself. Is that something that should be supported? Maybe you can use something like https://www.npmjs.com/package/vite-raw-plugin to get the raw contents of the file?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting MDX
This article goes through several common problems and errors that might occur when using MDX.
Read more >
MDX Preview - Visual Studio Marketplace
New in v0.2: Type Script Preview and Hot Update https://vimeo.com/334605913. MDX ... You can import other files with .md or .mdx extension.
Read more >
gatsby-plugin-mdx
gatsby-plugin-mdx is the official integration for using MDX with Gatsby. ... This is necessary for MDX files that you want to import into...
Read more >
Guide to Writing MDX and Markdown | Chicago Docs
This means you can import and embed React components right into your Markdown ... In an MDX file, a block of Markdown text...
Read more >
How to Build Your Own Blog with Next.js and MDX
MDX brings this flexibility into a markdown file by allowing you to literally write or import JavaScript (React) components into your ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found