Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix broken css url when used "asset" rule type [1 pull requests, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#89828•Fetched 2026-04-08 00:21:16
View on GitHub
Comments
0
Participants
1
Timeline
2
Reactions
0
Author
megastelsmegastels
Participants
megastelsmegastels
Timeline (top)
issue_type_added ×1labeled ×1

PR fix notes

PR #88788: Turbopack: add rules.*.type config to allow changing the type of a module

Description (problem / solution / changelog)

What?

This PR adds support for the type option in Turbopack rules, enabling users to set the module type directly without requiring a custom loader. This mirrors webpack's type option (e.g., type: 'asset/resource').

Users can now configure how files are processed by setting the module type directly:

// next.config.js
module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        type: 'asset',
      },
    },
  },
}

When using type: 'asset', importing the file returns its URL:

import svgUrl from './icon.svg'

export default function Page() {
  return <img src={svgUrl} alt="Icon" />
}

More types are available. See docs

Changed files

  • crates/next-core/src/next_config.rs (modified, +7/-0)
  • crates/next-core/src/next_shared/webpack_rules/babel.rs (modified, +1/-0)
  • crates/next-core/src/next_shared/webpack_rules/sass.rs (modified, +1/-0)
  • docs/01-app/03-api-reference/05-config/01-next-config-js/turbopack.mdx (modified, +42/-0)
  • packages/next/src/build/swc/index.ts (modified, +10/-5)
  • packages/next/src/server/config-schema.ts (modified, +14/-1)
  • packages/next/src/server/config-shared.ts (modified, +36/-1)
  • test/e2e/app-dir/webpack-loader-module-type/app/layout.tsx (added, +7/-0)
  • test/e2e/app-dir/webpack-loader-module-type/app/page.tsx (added, +19/-0)
  • test/e2e/app-dir/webpack-loader-module-type/app/test.data (added, +1/-0)
  • test/e2e/app-dir/webpack-loader-module-type/app/test.svg (added, +3/-0)
  • test/e2e/app-dir/webpack-loader-module-type/next.config.js (added, +26/-0)
  • test/e2e/app-dir/webpack-loader-module-type/types.d.ts (added, +4/-0)
  • test/e2e/app-dir/webpack-loader-module-type/webpack-loader-module-type.test.ts (added, +37/-0)
  • turbopack/crates/turbopack/src/module_options/mod.rs (modified, +24/-5)
  • turbopack/crates/turbopack/src/module_options/module_options_context.rs (modified, +1/-0)
  • turbopack/crates/turbopack/src/module_options/module_rule.rs (modified, +47/-1)

Code Example

// app/style.css
.bg{
  // should correct load image
  background: url("./img.svg");
}

---

.bg {
  background: url("../media/img.8569dc29.svg");
}

---

.bg {
  background: url("./img.svg");
}

---

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 16.2.0-canary.35 // Latest available version is detected (16.2.0-canary.35).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/dark-snow-hcjkjk?workspaceId=ws_NqRDDqBfUUDAADRYf9SdN9&embed=1&file=%2Fnext.config.ts

To Reproduce

  1. npm install
  2. npm run dev
  3. Go to http://localhost:3000
  4. enable/disable rule for svg inside next.config.ts to see bug
// app/style.css
.bg{
  // should correct load image
  background: url("./img.svg");
}

Current vs. Expected behavior

Expected behavior

.bg {
  background: url("../media/img.8569dc29.svg");
}

Current behavior

.bg {
  background: url("./img.svg");
}

without rule for svg it works correct

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 16.2.0-canary.35 // Latest available version is detected (16.2.0-canary.35).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

CSS

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Related PR https://github.com/vercel/next.js/pull/88788

extent analysis

Fix Plan

Enable SVG Rule in next.config.ts

To fix the issue, we need to enable the SVG rule in next.config.ts. We can do this by adding the following code:

module.exports = {
  // ... other configurations ...
  images: {
    domains: ['localhost'],
    formats: ['image/webp'],
    loader: 'imgix',
    path: '/_next/image',
    // Enable SVG rule
    disableStaticImages: false,
  },
};

Update app/style.css

We also need to update the app/style.css file to use the correct URL for the SVG image. We can do this by changing the background property to use the correct URL:

.bg {
  background: url("../media/img.8569dc29.svg");
}

Verify the Fix

To verify that the fix worked, we can check the browser console for any errors and make sure that the SVG image is being loaded correctly. We can also check the network requests to ensure that the correct URL is being used to load the SVG image.

Extra Tips

  • Make sure to update the next.config.ts file to enable the SVG rule for production builds as well.
  • If you're using a different image loader, make sure to update the configuration accordingly.
  • You can also use the next/image component to load the SVG image, which will automatically handle the correct URL and caching.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

FAQ

Expected behavior

.bg {
  background: url("../media/img.8569dc29.svg");
}
#api#ssr#installation#tensor shape#autograd error#GPU setup#container setup#orchestration issue#cache issue#memory leak

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - ✅(Solved) Fix broken css url when used "asset" rule type [1 pull requests, 1 participants]