Cannot parse -mdx files

[ottopaulsen]

Can anyone follow this course?
When I run npm run storybook:serve I get the following error:

Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import LimitedInput from "./LimitedInput";
| 
> <Meta title="Forms/LimitedInput" />
| 
| # LimitedInput
Error: Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import LimitedInput from "./LimitedInput";
| 
> <Meta title="Forms/LimitedInput" />
| 
| # LimitedInput
    at Object../src/components/LimitedInput.stories.mdx (http://localhost:6006/main.13a39dac4c358abb89c0.bundle.js:753:7)
    at __webpack_require__ (http://localhost:6006/runtime~main.13a39dac4c358abb89c0.bundle.js:849:30)
    at fn (http://localhost:6006/runtime~main.13a39dac4c358abb89c0.bundle.js:151:20)
    at webpackContext (http://localhost:6006/main.13a39dac4c358abb89c0.bundle.js:444:9)
    at http://localhost:6006/vendors~main.13a39dac4c358abb89c0.bundle.js:5884:31
    at Array.forEach (<anonymous>)
    at http://localhost:6006/vendors~main.13a39dac4c358abb89c0.bundle.js:5883:22
    at Array.forEach (<anonymous>)
    at http://localhost:6006/vendors~main.13a39dac4c358abb89c0.bundle.js:5882:14
    at render (http://localhost:6006/vendors~main.13a39dac4c358abb89c0.bundle.js:3977:13)

All I have done is download the code and run npm ci.

[elevatebart]

Testing right now on a MacBook pro with node 12.
Will report back soon.

[elevatebart]

Thanks @ottopaulsen for bringing this to our attention.

To help track down the problem, could you please add what Operating System and node version you are using?

This seems like a problem that is tracked down and tackled during the course: the configuration of the webpack instance that storybook uses. But it is normally all done automagically by the storybook plugin.

[ottopaulsen]

Thanks for responding.

macOs Catalina 10.15.7
node v14.9.0

[elevatebart]

Thank @ottopaulsen

I just installed node 14.9.0 and it still seems to be working.
Would you do a quick npm -v to know which version of npm you are using?
Maybe this checkout is made inside another monorepo or sub-git directory.

This issue might have some kind of an answer...

storybookjs/storybook#7729

But I still have no idea what is different between my setup and yours.

How did you "download" the source? Did you clone this repository or download a zip of it?

[elevatebart]

Can you try in a command prompt (terminal) all the following commands?

cd ~
mkdir vueschool-test
git clone https://github.com/vueschool/storybook-fundamentals.git
npm ci
npm run styleguide

This I the set of command I just tried and that worked.
What do you think could have happened?

[ottopaulsen]

Hi. Sorry for late response. Your answers come in the middle of the night here, so I forgot about it.
I tried these commands:

  cd ~
  mkdir vueschool-test
  cd vueschool-test/
  git clone https://github.com/vueschool/storybook-fundamentals.git
  cd storybook-fundamentals/
  npm ci
  npm run styleguide

The last one failed, as it is not in package.json, but npm run storybook:serve now works!

I also deleted the folder I worked on before and did this again in there, and it works now.

I don't know what I did defferently earlier, but the problem seems to have gone, so thanks a lot :-)

Otto

[elevatebart]

Woops, really sorry @ottopaulsen 😳😳,

I maintain this other library called styleguidist and mixed up the two. you are absolutely right storybook:serve should work.

I am reassured now. I know storybook uses some smart caching techniques that can be unfriendly when installing a new one.

It has been my experience that, when this kind of "mystery" occurs, you better start over.

• restart your browser or use another one
• delete node_modules
• reinstall using yarn --force --freeze-lock or npm ci

Then it usually works

Thank you for your patience.