Turbopack: absolute requests in webpack loader (#84575)

mischnic · web-flow · commit 32acdc03e808 · 2025-10-07T16:02:01.000+02:00
Recent sass-loader versions use this heavily: `this.getResolver()(..., "/Users/foo/..../bar.scss")`
diff --git a/test/e2e/app-dir/webpack-loader-binary/webpack-loader-binary.test.ts b/test/e2e/app-dir/webpack-loader-binary/webpack-loader-binary.test.ts
@@ -1,11 +1,13 @@
 import { nextTestSetup } from 'e2e-utils'
 
 describe('webpack-loader-ts-transform', () => {
-  const { next } = nextTestSetup({
+  const { next, skipped } = nextTestSetup({
     files: __dirname,
     skipDeployment: true,
   })
 
+  if (skipped) return
+
   it('should allow passing binary assets to and from a Webpack loader', async () => {
     const $ = await next.render$('/')
     expect($('#text').text()).toBe('Got a buffer of 18 bytes')
diff --git a/test/e2e/app-dir/webpack-loader-conditions/webpack-loader-conditions.test.ts b/test/e2e/app-dir/webpack-loader-conditions/webpack-loader-conditions.test.ts
@@ -4,11 +4,13 @@ import { nextTestSetup } from 'e2e-utils'
 ;(process.env.IS_TURBOPACK_TEST ? describe : describe.skip)(
   'webpack-loader-conditions',
   () => {
-    const { next } = nextTestSetup({
+    const { next, skipped } = nextTestSetup({
       files: __dirname,
       skipDeployment: true,
     })
 
+    if (skipped) return
+
     it('should render correctly on server site', async () => {
       const res = await next.fetch('/')
       const html = (await res.text()).replaceAll(/<!-- -->/g, '')
diff --git a/test/e2e/app-dir/webpack-loader-fs/webpack-loader-fs.test.ts b/test/e2e/app-dir/webpack-loader-fs/webpack-loader-fs.test.ts
@@ -1,11 +1,13 @@
 import { nextTestSetup } from 'e2e-utils'
 
 describe('webpack-loader-fs', () => {
-  const { next } = nextTestSetup({
+  const { next, skipped } = nextTestSetup({
     files: __dirname,
     skipDeployment: true,
   })
 
+  if (skipped) return
+
   it('should allow reading the input FS', async () => {
     const $ = await next.render$('/')
     expect($('#test').text()).toBe(
diff --git a/test/e2e/app-dir/webpack-loader-resolve/app/file.test-file.ts b/test/e2e/app-dir/webpack-loader-resolve/app/file.test-file.ts
@@ -0,0 +1 @@
+export default 'wrong'
diff --git a/test/e2e/app-dir/webpack-loader-resolve/app/layout.tsx b/test/e2e/app-dir/webpack-loader-resolve/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/webpack-loader-resolve/app/page.js b/test/e2e/app-dir/webpack-loader-resolve/app/page.js
@@ -0,0 +1,11 @@
+import absolute from './file.test-file?absolute=data1'
+import relative from './file.test-file?relative=data2'
+
+export default function Page() {
+  return (
+    <div>
+      <p id="absolute">{absolute}</p>
+      <p id="relative">{relative}</p>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/webpack-loader-resolve/data1.js b/test/e2e/app-dir/webpack-loader-resolve/data1.js
@@ -0,0 +1 @@
+export default 'abc'
diff --git a/test/e2e/app-dir/webpack-loader-resolve/data2.js b/test/e2e/app-dir/webpack-loader-resolve/data2.js
@@ -0,0 +1 @@
+export default 'xyz'
diff --git a/test/e2e/app-dir/webpack-loader-resolve/next.config.js b/test/e2e/app-dir/webpack-loader-resolve/next.config.js
@@ -0,0 +1,19 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  turbopack: {
+    rules: {
+      '*.test-file.ts': [require.resolve('./test-file-loader.js')],
+    },
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.test-file\.ts/,
+      use: require.resolve('./test-file-loader.js'),
+    })
+    return config
+  },
+}
+
+module.exports = nextConfig
diff --git a/test/e2e/app-dir/webpack-loader-resolve/test-file-loader.js b/test/e2e/app-dir/webpack-loader-resolve/test-file-loader.js
@@ -0,0 +1,21 @@
+const fs = require('fs')
+const path = require('path')
+
+module.exports = async function () {
+  let params = new URLSearchParams(this.resourceQuery.slice(1))
+  let file
+  if (params.has('absolute')) {
+    file = path.join(__dirname, params.get('absolute'))
+  } else if (params.has('relative')) {
+    file = './' + params.get('relative')
+  } else {
+    this.callback(null, "throw new Error('no file specified')")
+    return
+  }
+
+  const resolve = this.getResolve({})
+  const result = await resolve(__dirname, file)
+  this.addDependency(result)
+
+  return fs.readFileSync(result, 'utf8')
+}
diff --git a/test/e2e/app-dir/webpack-loader-resolve/webpack-loader-resolve.test.ts b/test/e2e/app-dir/webpack-loader-resolve/webpack-loader-resolve.test.ts
@@ -0,0 +1,19 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('webpack-loader-resolve', () => {
+  const { next, skipped } = nextTestSetup({
+    files: __dirname,
+    // This test is skipped because it's only expected to run in turbopack, which isn't enabled for builds
+    skipDeployment: true,
+  })
+
+  if (skipped) {
+    return
+  }
+
+  it('should support resolving absolute path via loader getResolve', async () => {
+    const $ = await next.render$('/')
+    expect($('#absolute').text()).toBe('abc')
+    expect($('#relative').text()).toBe('xyz')
+  })
+})
diff --git a/test/e2e/app-dir/webpack-loader-resource-query/turbopack-loader-resource-query.test.ts b/test/e2e/app-dir/webpack-loader-resource-query/turbopack-loader-resource-query.test.ts
@@ -1,12 +1,13 @@
 import { nextTestSetup } from 'e2e-utils'
 
 describe('webpack-loader-resource-query', () => {
-  const { next } = nextTestSetup({
+  const { next, skipped } = nextTestSetup({
     files: __dirname,
     skipDeployment: true,
   })
 
-  // Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API.
+  if (skipped) return
+
   it('should pass query to loader', async () => {
     await next.render$('/')
 
diff --git a/test/e2e/app-dir/webpack-loader-ts-transform/webpack-loader-ts-transform.test.ts b/test/e2e/app-dir/webpack-loader-ts-transform/webpack-loader-ts-transform.test.ts
@@ -1,16 +1,13 @@
 import { nextTestSetup } from 'e2e-utils'
 
 describe('webpack-loader-ts-transform', () => {
-  const { next, isTurbopack, skipped } = nextTestSetup({
+  const { next, skipped } = nextTestSetup({
     files: __dirname,
     // This test is skipped because it's only expected to run in turbopack, which isn't enabled for builds
     skipDeployment: true,
   })
 
-  if (!isTurbopack || skipped) {
-    it('should only run the test in turbopack', () => {})
-    return
-  }
+  if (skipped) return
 
   it('should accept Typescript returned from Webpack loaders', async () => {
     const $ = await next.render$('/')
diff --git a/turbopack/crates/turbopack-node/js/src/transforms/webpack-loaders.ts b/turbopack/crates/turbopack-node/js/src/transforms/webpack-loaders.ts
@@ -16,6 +16,7 @@ import {
   type TransformIpc,
 } from './transforms'
 import fs from 'fs'
+import path from 'path'
 
 export type IpcInfoMessage =
   | {
@@ -301,6 +302,22 @@ const transform = (
               request: string,
               callback?: (err?: Error, result?: string) => void
             ) => {
+              if (path.isAbsolute(request)) {
+                // Relativize absolute requests. Turbopack disallow them in JS code, but here it's
+                // generated programatically and there is a smaller problem of
+                // non-cacheable/non-portable builds.
+                request = path.relative(lookupPath, request)
+
+                // On Windows, the path might be still absolute if it's on a different drive. Just
+                // let the resolver throw the error in that case.
+                if (
+                  !path.isAbsolute(request) &&
+                  request.split(path.sep)[0] !== '..'
+                ) {
+                  request = './' + request
+                }
+              }
+
               const promise = ipc
                 .sendRequest({
                   type: 'resolve',
