Skip to content

Commit

Permalink
docs: Describe current issue w/CRA 5 integration
Browse files Browse the repository at this point in the history
  • Loading branch information
userzimmermann committed Apr 22, 2022
1 parent 0ff4ab3 commit c3f9a28
Showing 1 changed file with 41 additions and 1 deletion.
42 changes: 41 additions & 1 deletion docs/docs/getting-started.server.mdx
Expand Up @@ -506,7 +506,47 @@ 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.

To enable direct MDX imports w/o `!@mdx-js/loader!` prefix, the loader can
further be added to webpack’s config, using a
[`react-scripts`](http://github.com/facebook/create-react-app/tree/main/packages/react-scripts)
rewiring tool, e.g. [CRACO](http://github.com/gsoft-inc/craco).

<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: /\.(md|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>

<Note type="info">
**Note**: due to [broken MDX import forwarding](http://github.com/facebook/create-react-app/issues/12166)
in `react-scripts` 5.x, rewiring is currently necessary when using CRA 5.
There’s an [ongoing discussion](http://github.com/mdx-js/mdx/discussions/1870)
about this issue.
</Note>

See also [¶ Webpack][webpack], which is used in CRA, and see [¶ React][react],
which you’re likely using, for more info.
Expand Down

0 comments on commit c3f9a28

Please sign in to comment.