Skip to content

Commit

Permalink
Add improved getting started for current CRA 5 integration
Browse files Browse the repository at this point in the history
Closes GH-2004.
Closes GH-2010.

Reviewed-by: Titus Wormer <tituswormer@gmail.com>
  • Loading branch information
userzimmermann authored May 9, 2022
1 parent 3c51a43 commit 7f9a5f4
Showing 1 changed file with 45 additions and 1 deletion.
46 changes: 45 additions & 1 deletion docs/docs/getting-started.server.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -483,6 +483,14 @@ Which in turn lets us choose whether to use the `@mdx-js/mdx` or
#### Create React App (CRA)
<Note type="info">
**Note**: rewiring with CRACO (see below) is currently required for CRA 5,
due to a bug in `react-scripts`
([`facebook/create-react-app#12166`](https://github.com/facebook/create-react-app/issues/12166)),
which is also tracked at
[`mdx-js/mdx#1870`](https://github.com/mdx-js/mdx/discussions/1870).
</Note>
<details>
<summary>Expand example</summary>
Expand All @@ -506,7 +514,43 @@ Which in turn lets us choose whether to use the `@mdx-js/mdx` or
through webpack loader syntax in imports.
Install the webpack loader [`@mdx-js/loader`][mdx-loader].
There is no need to configure it.
<details>
<summary>Expand CRACO example</summary>
```js path="craco.config.js"
const {addAfterLoader, loaderByName} = require('@craco/craco')
module.exports = {
webpack: {
configure(webpackConfig) {
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.mdx?$/,
loader: require.resolve('@mdx-js/loader')
})
return webpackConfig
}
}
}
```
```jsx path="src/App.jsx"
import Content from './content.mdx'
export default function App() {
return <Content />
}
```
</details>
For importing MDX without the `!@mdx-js/loader!` prefix, you can add
the loader to the webpack config, by rewiring `react-scripts` using
[CRACO](http://github.com/gsoft-inc/craco).
<Note type="info">
**Note**: warnings about CRACO having `incorrect peer dependency
"react-scripts@^4.0.0"` can be ignored for the above to work.
</Note>
See also [¶ Webpack][webpack], which is used in CRA, and see [¶ React][react],
which you’re likely using, for more info.
Expand Down

1 comment on commit 7f9a5f4

@vercel
Copy link

@vercel vercel bot commented on 7f9a5f4 May 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mdx – ./

mdx-git-main-mdx.vercel.app
mdx-mdx.vercel.app
v2.mdxjs.com
mdxjs.com

Please sign in to comment.