Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: update webpack docs to reflect latest next.js api #5680

Merged
merged 3 commits into from
Aug 25, 2023
Merged

docs: update webpack docs to reflect latest next.js api #5680

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b35c83
docs: update to reflect latest next.js api
willwill96 Aug 6, 2023
3e68c82
Update more docs
wbinnssmith Aug 10, 2023
95e4df9
fixup! Update more docs
wbinnssmith Aug 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions docs/pages/pack/docs/features/customizing-turbopack.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ If you need loader support beyond what's built in, many webpack loaders already
- Only loaders that return JavaScript code are supported. Loaders that transform files like stylesheets or images are not currently supported.
- Options passed to webpack loaders must be plain JavaScript primitives, objects, and arrays. For example, it's not possible to pass `require()`d plugin modules as option values.

As of Next 13.2, configuring webpack loaders is possible for Next.js apps through an experimental option in `next.config.js`. `turbo.loaders` can be set as a mapping of file extensions to a list of package names or `{loader, options}` pairs:
As of Next 13.2, configuring webpack loaders is possible for Next.js apps through an experimental option in `next.config.js`. `turbo.rules` can be set as a mapping of file globs to a list of package names or `{loader, options}` pairs:

```js filename="next.config.js"
module.exports = {
experimental: {
turbo: {
loaders: {
rules: {
// Option format
'.md': [
'*.md': [
{
loader: '@mdx-js/loader',
options: {
Expand All @@ -38,13 +38,17 @@ module.exports = {
},
],
// Option-less format
'.mdx': ['@mdx-js/loader'],
'*.mdx': ['@mdx-js/loader'],
},
},
},
}
```

<Callout type="info">
Note: Prior to Next.js version 13.4.4, `experimental.turbo.rules` was named `experimental.turbo.loaders` and only accepted file extensions like `.mdx` instead of `*.mdx`.
</Callout>

If you need to pass something like the result of importing an external package as a loader option, it's possible to wrap the webpack loader with your own, specifying options there. **This is an interim solution and should not be necessary in the future.** This loader wraps `@mdx-js/loader` and configures the `rehypePrism` rehype plugin:

```js filename="my-mdx-loader.js"
Expand All @@ -70,8 +74,8 @@ Then, configure Next.js to load the wrapper loader:
module.exports = {
experimental: {
turbo: {
loaders: {
'.mdx': ['./my-mdx-loader'],
rules: {
'*.mdx': ['./my-mdx-loader'],
},
},
},
Expand Down
Loading