error compiling mdx

[KutnerUri]

Getting this error:

Failed to compile

Module parse failed: Assigning to rvalue (4:2)
File was processed with these loaders:
 * ../../../.bvm/versions/0.0.493/bit-0.0.493/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| $RefreshSetup$(module.id);
| 
> ---
| labels: ['react', 'typescript', 'input', 'search']
| description: 'basic search bard'

It seems it's trying to load the mdx with the react fast refresh, before compiling it to JS.

I will investigate.

Describe the bug

A clear and concise description of the issue.

Steps to Reproduce

1. Open workspace
2. use bit create to make a new component, ie,

❯ bit create react-component ui/input/search-box

1. bit start

--> get the error

Screenshots, exceptions and logs

Specifications

• Bit version: 0.0.493
• Workspace type: harmony
• Node version:
• npm / yarn version:
• Platform: MacOS

for harmony workspace

• relevant env: teambit.design/envs/react

[GiladShoham]

This happened from time to time to different users.
It usually fixed by delete node_modules and re install.
So make sure you are debugging it before deleting node_modules

[KutnerUri]

ah ok, it's not a blocker.
Just tried it in a new project, and it doesn't happen (😥 )

I'll keep a zip of the workspace and try it again..

[dstoyanoff]

For me this error happens when the server is started and I create a new component. To resolve it, I have to stop the server, execute bit compile and then start the server again.

[blankenshipd001]

I've also seen this error if you happen to have invalid syntax in your mdx file. I've found it useful to remove all content from the file with the exception of the top line and see if the error goes away. If it does you can start adding back a few lines at a time.

[ZyJoey]

This may be not installed bit components dependencies.
Use bit install and bit compile. Then restart server. I resolved the error with this method.

[KutnerUri]

this is likely to have been solved by #5067, so it should not happen again from v0.0.570 onwards.
The fix set react-fast-refresh loaders explicitly, making it's order preset, and should prevent incorrect loaders trying to parse markdown files.

repoen the issue if the problem resurfaces :)

[aweiu]

v0.0.638 the issue still exists:

[pkhodaveissi]

Still happens with yarn but not pnpm

[KutnerUri]

interesting. why would it happen on yarn? 🤔

also, I've noticed a distinction between *.docs.mdx and plain *.mdx files:

plugins-page/
  plugin-page.docs.mdx # <-- should work out of the box
  plugins-page.mdx # <-- needs env to be mdx
  index.ts

you can apply the mdx env by using this command:

❯ bit envs set my-component teambit.mdx/mdx 

[pkhodaveissi]

interesting. why would it happen on yarn? 🤔

also, I've noticed a distinction between *.docs.mdx and plain *.mdx files:

plugins-page/

  plugin-page.docs.mdx # <-- should work out of the box

  plugins-page.mdx # <-- needs env to be mdx

  index.ts

you can apply the mdx env by using this command:

❯ bit envs set my-component teambit.mdx/mdx 

You need to run a bit link after bit install if you're using yarn. But pnpm does that automatically I guess.

[KutnerUri]

interesting. @pkhodaveissi - can you open a new in depth issue about it? @GiladShoham will handle