You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Turbopack: Document new advanced turbopack.rule.*.condition config options (#83246)
~I'm looking for review/feedback, but **DO NOT MERGE UNTIL NEXT 16.0 IS RELEASED.** These APIs are not available on 15.5, and merging it now would be confusing to users. If you want to try it out, use a recent canary release.~ I've been informed that docs are not currently tracking canary, so this is safe to merge.
Documented the new configuration syntax added in #82857 that should ship with Next 16.0.
## Rendered
<details>
<summary>Toggle</summary>
<img src="https://app.graphite.dev/user-attachments/assets/b2404001-6e3f-47c9-9704-160fcfb1438d.png" width=1000>
</details>
@@ -97,7 +97,7 @@ If you need loader support beyond what's built in, many webpack loaders already
97
97
- Only loaders that return JavaScript code are supported. Loaders that transform files like stylesheets or images are not currently supported.
98
98
- Options passed to webpack loaders must be plain JavaScript primitives, objects, and arrays. For example, it's not possible to pass `require()` plugin modules as option values.
99
99
100
-
To configure loaders, add the names of the loaders you've installed and any options in `next.config.js`, mapping file extensions to a list of loaders.
100
+
To configure loaders, add the names of the loaders you've installed and any options in `next.config.js`, mapping file extensions to a list of loaders. Rules are evaluated in order.
101
101
102
102
Here is an example below using the [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack) loader, which enables importing `.svg` files and rendering them as React components.
103
103
@@ -114,6 +114,10 @@ module.exports = {
114
114
}
115
115
```
116
116
117
+
> **Good to know**: Globs used in the `rules` object match based on file name, unless the glob contains a `/` character, which will cause it to match based on the full project-relative file path. Windows file paths are normalized to use unix-style `/` path separators.
118
+
>
119
+
> Turbopack uses a modified version of the [Rust `globset` library](https://docs.rs/globset/latest/globset/).
120
+
117
121
For loaders that require configuration options, you can use an object format instead of a string:
118
122
119
123
```js filename="next.config.js"
@@ -136,7 +140,81 @@ module.exports = {
136
140
}
137
141
```
138
142
139
-
> **Good to know**: Prior to Next.js version 13.4.4, `turbo.rules` was named `turbo.loaders` and only accepted file extensions like `.mdx` instead of `*.mdx`.
143
+
> **Good to know**: Prior to Next.js version 13.4.4, `turbopack.rules` was named `turbo.loaders` and only accepted file extensions like `.mdx` instead of `*.mdx`.
144
+
145
+
### Advanced webpack loader conditions
146
+
147
+
You can further restrict where a loader runs using the advanced `condition` syntax:
148
+
149
+
```js filename="next.config.js"
150
+
module.exports= {
151
+
turbopack: {
152
+
rules: {
153
+
// '*' will match all file paths, but we restrict where our
154
+
// rule runs with a condition.
155
+
'*': {
156
+
condition: {
157
+
all: [
158
+
// 'foreign' is a built-in condition.
159
+
{ not:'foreign' },
160
+
// 'path' can be a RegExp or a glob string. A RegExp matches
161
+
// anywhere in the full project-relative file path.
162
+
{ path:/^img\/[0-9]{3}\// },
163
+
{
164
+
any: [
165
+
{ path:'*.svg' },
166
+
// 'content' is always a RegExp, and can match
167
+
// anywhere in the file.
168
+
{ content:/\<svg\W/ },
169
+
],
170
+
},
171
+
],
172
+
},
173
+
loaders: ['@svgr/webpack'],
174
+
as:'*.js',
175
+
},
176
+
},
177
+
},
178
+
}
179
+
```
180
+
181
+
- Supported boolean operators are `{all: [...]}`, `{any: [...]}` and `{not: ...}`.
182
+
- Supported customizable operators are `{path: string | RegExp}` and `{content: RegExp}`. If `path` and `content` are specified in the same object, it acts as an implicit `and`.
183
+
184
+
In addition, a number of built-in conditions are supported:
185
+
186
+
-`default`: Always matched. A no-op.
187
+
-`browser`: Matches code that will execute on the client. Server code can be matched using `{not: 'browser'}`.
188
+
-`foreign`: Matches code in `node_modules`, as well as some Next.js internals. Usually you'll want to restrict loaders to `{not: 'foreign'}`. This can improve performance by reducing the number of files the loader is invoked on.
189
+
-`development`: Matches when using `next dev --turbopack`.
190
+
-`production`: Matches when using `next build --turbopack`.
191
+
-`node`: Matches code that will run on the default Node.js runtime.
192
+
-`edge-light`: Matches code that will run on the [Edge runtime](/docs/app/api-reference/edge).
193
+
194
+
Rules can be an object or an array of objects. An array is often useful for modeling disjoint conditions:
0 commit comments