diff --git a/docs/docs/getting-started.server.mdx b/docs/docs/getting-started.server.mdx index bda8b931e..7a38ede69 100644 --- a/docs/docs/getting-started.server.mdx +++ b/docs/docs/getting-started.server.mdx @@ -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). + +
+ Expand CRACO example + + ```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 + } + ``` +
+ + + **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. + See also [¶ Webpack][webpack], which is used in CRA, and see [¶ React][react], which you’re likely using, for more info.