create-react-app
create-react-app copied to clipboard
facebook
Update webpack.config.js
Adds mdx to file loader exclude section
Addresses this issue: https://github.com/facebook/create-react-app/issues/12166
Just edits one line in the webpack config from react-scripts as suggested here: https://github.com/mdx-js/mdx/discussions/1870#discussioncomment-2304871
I made the edit in my local version of webpack.config.js in react-scripts which is installed in my project, and that is sufficient to get mdx to work with no errors.
I don't know what other ramifications this might have. I'm not a JS dev, but this solution worked for my problem.
Hi @zingbretsen!
Thank you for your pull request and welcome to our community.
Action Required
In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.
Process
In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.
Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.
If you have received this in error or have any questions, please contact us at [email protected]. Thanks!
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!
I'm blocked in my upgrade to CRA 5.0.0 by 5.0.0 making @mdx-js/loader to not work anymore and there are lots of CVEs on CRA 4.x dependencies, so can the CRA devs this please move forward?
Also a loader definition for test: /\.(md|mdx)$/ —as proposed in https://github.com/mdx-js/mdx/discussions/1870#discussioncomment-2514902 —would be a nice addition to this PR
Btw, @thediveo: If adding https://github.com/gsoft-inc/craco to your project(s) is acceptable for you, then you could use https://github.com/mdx-js/mdx/discussions/1870#discussioncomment-2530611 as a (temporary) workaround …
Btw, @thediveo: If adding https://github.com/gsoft-inc/craco to your project(s) is acceptable for you, then you could use mdx-js/mdx#1870 (comment) as a (temporary) workaround …
CRACO unfortunately claims only CRA 4.x support. Do you have experience with it on CRA 5.0? So far, I wanted to avoid bringing in even more configuration-related mechanisms into what appears to be already a highly brittle construction.
Do you have experience with it on CRA 5.0?
Some parts of the CRACO API are not fully compatible w/CRA 5 yet; but so far all runner scripts work—as well as those features needed for the workaround …
In addition to or instead of the current change?
Hmm … actually instead, @zingbretsen
When extending the exclude list, you still have to define the MDX loader externally; or have to use import ... from '!@mdx-js/loader!...' syntax …
And when defining the loader—internally or externally—I've figured meanwhile out that you don't need to extend the exclude list anymore … but it also wouldn't hurt ;)
So I think now it'd be best to just extend the exclude list w/md|mdx—therefore ignoring https://github.com/facebook/create-react-app/pull/12167#issuecomment-1092684447 —and leave it up to the app developer how to configure their @mdx-js/loader integration …
~~On the other hand :D —according to https://mdxjs.com/docs/getting-started/#create-react-app-cra —MDX support seems to have come out of the box w/CRA < 5 … Whereby I don't know it you still needed the import ... from '!@mdx-js/loader!...' syntax … Tricky topic ;)~~
What's your opinion on all of this, @iansu & @mrmckeb?
[Update] I should've read https://mdxjs.com/docs/getting-started/#create-react-app-cra more carefully …
I added md to the excludes list in addition to mdx.
I'll defer to actual JS devs if you want any other changes as part of the PR.
[Update] I should've read https://mdxjs.com/docs/getting-started/#create-react-app-cra more carefully …
But anyway—I'm still curious: Did you really need to use the webpack !@mdx-js/loader! import syntax in your project(s), @thediveo?
But anyway—I'm still curious: Did you really need to use the webpack
!@mdx-js/loader!import syntax in your project(s), @thediveo?
I think so, here's an example of it: integrated help in lxkns service web UI. Please note that I'm using the "all-batteries-included" mdx-loader which wraps @mdx-js/loader and configures MDX plugins.
Hello @iansu @mrmckeb , is there anything left to do on this PR? Merging this would resolve a huge blocker
