Codesandbox-client: React project that works locally does not work in codesandbox

[kentcdodds]

🐛 bug report

Description of the problem

I have this repo that works locally with regular react-scripts, but does not work in codesandbox.

The specific error is: Loader 'mdx-loader' could not be found.

The way it works is I have a package @kentcdodds/react-workshop-app which reads the filesystem to know which files are available and generates code for the entry file. Markdown files are loaded via mdx-loader using inline loader syntax.

I've attempted adding mdx-loader as a dep explicitly and that didn't fix the issue. Same error either way.

How has this issue affected you? What are you trying to accomplish?

I have 8 of these repositories for teaching people React and I'd love to be able to let people work through this stuff directly in codesandbox without having to pull things down locally.

Link to sandbox: link (optional)

Your Environment

| Software | Name/Version |
| ---------------- | ------------ |
| Сodesandbox | Codesandbox.io
| Browser | Chrome 81
| Operating System | macOS (latest)

Thanks!

[CompuIves]

Hmm, this is an interesting one. We don't have mdx-loader in our bundler, and we can't really use the webpack loader since we're not running Webpack itself.

I think the best solution would be to add mdx-loader, but it's quite an involved loader (https://unpkg.com/browse/[email protected]/index.js), using 12 dependencies by itself.

Ideally we'd support loading webpack loaders from dependencies. I think that would work with 90% of the loaders if we write a converter that can make webpack loaders behave like sandpack loaders. In the meantime, we should probably make a custom mdx-loader for sandpack to make this case work. I can work on that after React Europe/.

[kentcdodds]

Ah! That's new information to me. I didn't realize that webpack loaders didn't work out of the box.

Getting this update would be spectacular!

[kentcdodds]

What can I do to get this prioritized?

[kentcdodds]

Awesome to see some progress on this issue @CompuIves! Thanks.

Unfortunately, the linked project still does not work on codesandbox 😬

[CompuIves]

Yep, that's true! There are some other things I need to resolve as well, which are in PR #4191. Aiming to merge that today.

[CompuIves]

It works now if you add mdx-loader to the dependencies!

[kentcdodds]

Sweet! Thanks a bunch!

I think it would make more sense if I didn't have to add mdx-loader to the deps because that dep comes from @kentcdodds/react-workshop-app.

Also, the "isolated pages" don't seem to be working either. Would you like a separate issue for this?

For example:

• Codesandbox | Production
• Codesandbox (this one seems to work sometimes, but not others) | Production

It's odd because when it doesn't work, I see the app up and working, and then it disappears and we get "Transpiling Modules" for a second and then a white screen (and nothing's mounted to the root).

Here's the codesandbox: https://codesandbox.io/s/hardcore-hertz-otsfu (it's basically the github repo just with mdx-loader added to the dependencies).

[CompuIves]

I think it would make more sense if I didn't have to add mdx-loader to the deps because that dep comes from @kentcdodds/react-workshop-app.

Yes, I agree. I'm not sure why it can't find the dependency, I have a hunch that it's related to the dynamic import (import()), so we can't find the dependency statically and don't install it.

Interesting that those pages don't work, they're just supposed to load the main app? Could you open a separate issue for it? I only see a single warning: Node cannot be found in the current page..

[CompuIves]

Oh I see more dynamic imports! I was thinking of fixing that today, so maybe this will be fixed today!

[kentcdodds]

Awesome! Thanks!

--- original message ---
On Mon, Jun 1 at 03:02 AM, [e-mail] Ives van Hoorne wrote:

Oh I see more dynamic imports! I was thinking of fixing that today, so maybe this will be fixed today!

—

You are receiving this because you authored the thread.

Reply to this email directly, view it on GitHub, or unsubscribe.
--- end of original message ---

[CompuIves]

New fix is live! I got a different error though: Failed to resolve module specifier '!babel-loader!mdx-loader!./exercise/01.md'. Do you recognize this @kentcdodds ?

[CompuIves]

Oh, no, nevermind, I think I know what causes this!

[CompuIves]

Fix going live for that to master now

[CompuIves]

Wow, it works now!!

[kentcdodds]

Fantastic! I just tried as well and it works stupendously! Thank you so much!

One _little_ thing is the URL doesn't not update when I click the "Open on Isolated page" link (it does locally).

That's not using a client-side router, that's a regular <a> tag, so maybe that has something to do with it? However, the good news is that I can link directly to that URL (like so: https://codesandbox.io/s/affectionate-bird-icmbi?fontsize=14&hidenavigation=1&initialpath=%2Fisolated%2Fexercise%2F06.js&module=%2Fsrc%2Fexercise%2F06.js&theme=dark) so that works out ok for my use cases.

Thank you so much for prioritizing this and getting it fixed 🎊🎉👏

[CompuIves]

Great to hear!! Clicking the a tag works now for me! Maybe something changed, but if it still doesn't work for you, which browser are you using?

[kentcdodds]

Yep! It's working now! Awesome work 👏👏👏👏