Module not found: Can't resolve './_next/static/media/b1db3e28af9ef94a-s.woff2' After set assetPrefix to '.',

[coderup2021]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

❯ pnpm next info

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 19.6.0: Sun Nov 14 19:58:51 PST 2021; root:xnu-6153.141.50~1/RELEASE_X86_64
    Binaries:
      Node: 16.18.1
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: 7.17.1
    Relevant packages:
      next: 13.2.4
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.2.4", newest: "13.2.5-canary.20".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

no

To Reproduce

pnpm create next-app (with default options)

modify next.config.js as following

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  assetPrefix: '.',    // or './'
}

module.exports = nextConfig

pnpm build

then will get following error

pnpm build

> [email protected] build /Users/lj/Study/web3.0/next-test
> next build

info  - Linting and checking validity of types  
Failed to compile.

src/pages/index.tsx
Module not found: Can't resolve './_next/static/media/d1d9458b69004127-s.woff2'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/font/google/target.css?{"path":"src/pages/index.tsx","import":"Inter","arguments":[{"subsets":["latin"]}],"variableName":"inter"}
./src/pages/index.tsx

src/pages/index.tsx
Module not found: Can't resolve './_next/static/media/b967158bc7d7a9fb-s.woff2'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/font/google/target.css?{"path":"src/pages/index.tsx","import":"Inter","arguments":[{"subsets":["latin"]}],"variableName":"inter"}
./src/pages/index.tsx

src/pages/index.tsx
Module not found: Can't resolve './_next/static/media/ae9ae6716d4f8bf8-s.woff2'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/font/google/target.css?{"path":"src/pages/index.tsx","import":"Inter","arguments":[{"subsets":["latin"]}],"variableName":"inter"}
./src/pages/index.tsx

src/pages/index.tsx
Module not found: Can't resolve './_next/static/media/c0f5ec5bbf5913b7-s.woff2'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/font/google/target.css?{"path":"src/pages/index.tsx","import":"Inter","arguments":[{"subsets":["latin"]}],"variableName":"inter"}
./src/pages/index.tsx

src/pages/index.tsx
Module not found: Can't resolve './_next/static/media/b1db3e28af9ef94a-s.woff2'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/font/google/target.css?{"path":"src/pages/index.tsx","import":"Inter","arguments":[{"subsets":["latin"]}],"variableName":"inter"}
./src/pages/index.tsx


> Build failed because of webpack errors
info  - Creating an optimized production build . ELIFECYCLE  Command failed with exit code 1.

Describe the Bug

I am not sure what happend, please help

Expected Behavior

expected pnpm build can work ok with assetPrefix config

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[JesseKoldewijn]

You're missing the part where you add this woff2 font. Could you maybe link a repo or something like that where we could actually see the project's code to diagnose this issue for ya?

[balazsorban44]

Hmm. It looks like the repro steps given are enough to reproduce. (The default template uses next/font)

[balazsorban44]

After some digging, I believe this is intentionally not working. The assetPrefix is expected to be a full URL or an absolute path, and not start with a .. This is how it is documented as well: https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

So I think we just need a better error message and clarify the docs.

This will be invalid for other use cases like `next/image as well, but that component will already surface this via the following error message:

[JesseKoldewijn]

After some digging, I believe this is intentionally not working. The assetPrefix is expected to be a full URL or an absolute path, and not start with a .. This is how it is documented as well: https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

So I think we just need a better error message and clarify the docs.

This will be invalid for other use cases like `next/image as well, but that component will already surface this via the following error message:

Well in my case I programatically import the image file and throw it into a Image component. It works on deployments to vercel and in dev but it breaks on static.

[balazsorban44]

Well in my case I programatically import the image file and throw it into a Image component. It works on deployments to vercel and in dev but it breaks on static.

Can you clarify this part? What do you mean by "programmatically importing"? Maybe you can attach a reproduction?

The above error is shown when you import the image in the module scope and pass it to the src prop, this is what triggers the image loader to emit the files in the static folder.

next.js/packages/next/src/build/webpack/loaders/next-image-loader/index.ts

Lines 20 to 25 in a3acbf4

	const interpolatedName = loaderUtils.interpolateName(
	this,
	'/static/media/[name].[hash:8].[ext]',
	opts
	)
	const outputPath = assetPrefix + '/_next' + interpolatedName

next/font has the same path generation:

next.js/packages/next/src/build/webpack/loaders/next-font-loader/index.ts

Lines 69 to 76 in a3acbf4

	const interpolatedName = loaderUtils.interpolateName(
	this,
	`static/media/[hash]${isUsingSizeAdjust ? '-s' : ''}${
	preload ? '.p' : ''
	}.${ext}`,
	opts
	)
	const outputPath = `${assetPrefix}/_next/${interpolatedName}`

It just does not verify invalid URLs later on, as next/image does:

next.js/packages/next/src/shared/lib/image-loader.ts

Lines 26 to 41 in a3acbf4

	if (src.startsWith('//')) {
	throw new Error(
	`Failed to parse src "${src}" on \`next/image\`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)`
	)
	}
	if (!src.startsWith('/') && (config.domains || config.remotePatterns)) {
	let parsedSrc: URL
	try {
	parsedSrc = new URL(src)
	} catch (err) {
	console.error(err)
	throw new Error(
	`Failed to parse src "${src}" on \`next/image\`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)`
	)
	}

[JesseKoldewijn]

Well in my case I programatically import the image file and throw it into a Image component. It works on deployments to vercel and in dev but it breaks on static.

Can you clarify this part? What do you mean by "programmatically importing"? Maybe you can attach a reproduction?

The above error is shown when you import the image in the module scope and pass it to the src prop, this is what triggers the image loader to emit the files in the static folder.

next.js/packages/next/src/build/webpack/loaders/next-image-loader/index.ts

Lines 20 to 25 in a3acbf4

	const interpolatedName = loaderUtils.interpolateName(
	this,
	'/static/media/[name].[hash:8].[ext]',
	opts
	)
	const outputPath = assetPrefix + '/_next' + interpolatedName

next/font has the same path generation:

next.js/packages/next/src/build/webpack/loaders/next-font-loader/index.ts

Lines 69 to 76 in a3acbf4

	const interpolatedName = loaderUtils.interpolateName(
	this,
	`static/media/[hash]${isUsingSizeAdjust ? '-s' : ''}${
	preload ? '.p' : ''
	}.${ext}`,
	opts
	)
	const outputPath = `${assetPrefix}/_next/${interpolatedName}`

It just does not verify invalid URLs later on, as next/image does:

next.js/packages/next/src/shared/lib/image-loader.ts

Lines 26 to 41 in a3acbf4

	if (src.startsWith('//')) {
	throw new Error(
	`Failed to parse src "${src}" on \`next/image\`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)`
	)
	}
	if (!src.startsWith('/') && (config.domains || config.remotePatterns)) {
	let parsedSrc: URL
	try {
	parsedSrc = new URL(src)
	} catch (err) {
	console.error(err)
	throw new Error(
	`Failed to parse src "${src}" on \`next/image\`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)`
	)
	}

I got my images in a images folder in the src dir. I import them from that dir in my code and then dump the image into a Image component. My repo is located in https://github.com/ShiftCodeEU/shiftcode.eu

[balazsorban44]

This seems to be unrelated to the original issue though since I cannot see an assetPrefix config. (I also see output: "export" commented out/third-party tool generating the output, maybe it should be reported as a separate issue.)

[JesseKoldewijn]

This seems to be unrelated to the original issue though since I cannot see an assetPrefix config. (I also see output: "export" commented out/third-party tool generating the output, maybe it should be reported as a separate issue.)

You're right that I'm not using the asset prefix. I did have the output export enabled while testing which is why it's commented out. As far as I know and from my experience with the pages dir I was under the impression it would still work the same as it does with importing images ending up in the _next/static dir.

[koba04]

@balazsorban44 I've created a PR to improve the error message #49403

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.