Custom image Loader (react-native-web-image-loader) produces errors in Production build

[fdecampredon]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:41 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.2
  npm: 8.1.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 12.2.5
  eslint-config-next: N/A
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

In our application we use the disableStaticImages option and use react-native-web-image-loader.
After upgrading from nextjs 12.1.6 to nextjs 12.2.5, production build produces this errors :

info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: File /Users/fdecampredon/workspace/azzapp/packages/web/.next/server/chunks/static/media/qr-code.f427286c.png does not exist.
    at makeWebpackError (/Users/fdecampredon/workspace/azzapp/node_modules/next/dist/compiled/webpack/bundle5.js:49719:9)
    at /Users/fdecampredon/workspace/azzapp/node_modules/next/dist/compiled/webpack/bundle5.js:33203:12
    at eval (eval at create (/Users/fdecampredon/workspace/azzapp/node_modules/next/dist/compiled/webpack/bundle5.js:23493:10), <anonymous>:27:1)
    at /Users/fdecampredon/workspace/azzapp/node_modules/next/dist/compiled/webpack/bundle5.js:30653:26
    at /Users/fdecampredon/workspace/azzapp/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:332:143
-- inner error --
Error: File /Users/fdecampredon/workspace/azzapp/packages/web/.next/server/chunks/static/media/qr-code.f427286c.png does not exist.
    at Job.emitDependency (/Users/fdecampredon/workspace/azzapp/node_modules/next/dist/compiled/@vercel/nft/index.js:1:37090)
    at async Promise.all (index 19)
    at async Object.nodeFileTrace (/Users/fdecampredon/workspace/azzapp/node_modules/next/dist/compiled/@vercel/nft/index.js:1:32686)
    at async /Users/fdecampredon/workspace/azzapp/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:96:28
    at async Span.traceAsyncFn (/Users/fdecampredon/workspace/azzapp/node_modules/next/dist/trace/trace.js:79:20)
    at async TraceEntryPointsPlugin.createTraceAssets (/Users/fdecampredon/workspace/azzapp/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:72:9)
caused by plugins in Compilation.hooks.processAssets
Error: File /Users/fdecampredon/workspace/azzapp/packages/web/.next/server/chunks/static/media/qr-code.f427286c.png does not exist.
    at Job.emitDependency (/Users/fdecampredon/workspace/azzapp/node_modules/next/dist/compiled/@vercel/nft/index.js:1:37090)
    at async Promise.all (index 19)
    at async Object.nodeFileTrace (/Users/fdecampredon/workspace/azzapp/node_modules/next/dist/compiled/@vercel/nft/index.js:1:32686)
    at async /Users/fdecampredon/workspace/azzapp/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:96:28
    at async Span.traceAsyncFn (/Users/fdecampredon/workspace/azzapp/node_modules/next/dist/trace/trace.js:79:20)
    at async TraceEntryPointsPlugin.createTraceAssets (/Users/fdecampredon/workspace/azzapp/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:72:9)

After doing more research I found the error appeared between v12.1.7-canary.33 and v12.1.7-canary.35.
I suspect the error comes from the changes in this commit : 2addf46
and the underlying commit in vercel/nft : vercel/nft@46631cb.

by applying this patch in my project the problem is gone :

diff --git a/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js b/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js
index f0f462f..890f8cc 100644
--- a/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js
+++ b/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js
@@ -72,7 +72,7 @@ class TraceEntryPointsPlugin {
         await span.traceChild("create-trace-assets").traceAsyncFn(async ()=>{
             const entryFilesMap = new Map();
             const chunksToTrace = new Set();
-            const isTraceable = (file)=>!file.endsWith(".wasm");
+            const isTraceable = (file)=>(file.endsWith('.js') || file.endsWith('.jsx') || file.endsWith('.cjs') || file.endsWith('.mjs') || file.endsWith('.node') ||  file.endsWith('.ts') || file.endsWith('.tsx'));
             for (const entrypoint of compilation.entrypoints.values()){
                 const entryFiles = new Set();
                 for (const chunk of entrypoint.getEntrypointChunk().getAllReferencedChunks()){

Expected Behavior

Should build without error

Link to reproduction

https://github.com/fdecampredon/next-react-native-web-image-loader-bug

To Reproduce

• Install the dependencies
• Build the application

[TomaszSci]

I have a similar issue when trying to load svg images using SVGR. Last working next.js stable version is 12.1.6. Solution provided by @fdecampredon worked but is an ugly one.

HookWebpackError: File /Users/tomasz/WebstormProjects/monorepo/apps/site/.next/server/chunks/static/media/assets.6b2b4005.svg does not exist.

at makeWebpackError (/Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/compiled/webpack/bundle5.js:49719:9)
at /Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/compiled/webpack/bundle5.js:33203:12
at eval (eval at create (/Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/compiled/webpack/bundle5.js:23493:10), <anonymous>:27:1)
at /Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/compiled/webpack/bundle5.js:30653:26
at /Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:332:143

Error: File /Users/tomasz/WebstormProjects/monorepo/apps/site/.next/server/chunks/static/media/assets.6b2b4005.svg does not exist.
at Job.emitDependency (/Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/compiled/@vercel/nft/index.js:1:37090)
at async Promise.all (index 13)
at async Object.nodeFileTrace (/Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/compiled/@vercel/nft/index.js:1:32686)
at async /Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:96:28
at async Span.traceAsyncFn (/Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/trace/trace.js:79:20)
at async TraceEntryPointsPlugin.createTraceAssets (/Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:72:9)
caused by plugins in Compilation.hooks.processAssets  

Error: File /Users/tomasz/WebstormProjects/monorepo/apps/site/.next/server/chunks/static/media/assets.6b2b4005.svg does not exist.
at Job.emitDependency (/Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/compiled/@vercel/nft/index.js:1:37090)
at async Promise.all (index 13)
at async Object.nodeFileTrace (/Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/compiled/@vercel/nft/index.js:1:32686)
at async /Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:96:28
at async Span.traceAsyncFn (/Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/trace/trace.js:79:20)
at async TraceEntryPointsPlugin.createTraceAssets (/Users/tomasz/WebstormProjects/monorepo/apps/site/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js:72:9)

[TomaszSci]

@younanjo

[fdecampredon]

Resolved in latest versions

[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.