Webpack is having trouble locating images within Nextjs

When I import static images with no issues using npm run dev, everything runs smoothly.

However, when attempting to utilize npm run build or next build, it fails and prevents deployment to Vercel.

next info
    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 16.14.2
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:        
      next: 13.1.1
      eslint-config-next: N/A 
      react: 18.2.0
      react-dom: 18.2.0

Upon running npm run dev/next build:

Failed to compile.

HookWebpackError: File E:\Github\Project\.next\static\media\IMG_1764.59cd3605.JPG does not exist.
    at makeWebpackError (E:\Github\Project\node_modules\next\dist\compiled\webpack\bundle5.js:28:308185)
    at E:\Github\Project\node_modules\next\dist\compiled\webpack\bundle5.js:28:105236
    at eval (eval at create (E:\Github\Project\node_modules\next\dist\compiled\webpack\bundle5.js:13:28771), <anonymous>:27:1)
    at E:\Github\Project\node_modules\next\dist\compiled\webpack\bundle5.js:28:68649
    at E:\Github\Project\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:437:143
-- inner error --
Error: File E:\Github\Project\.next\static\media\IMG_1764.59cd3605.JPG does not exist.
    at Job.emitDependency (E:\Github\Project\node_modules\next\dist\compiled\@vercel\nft\index.js:1:39473)
    at async Promise.all (index 10)
    at async Object.nodeFileTrace (E:\Github\Project\node_modules\next\dist\compiled\@vercel\nft\index.js:1:35430)
    at async E:\Github\Project\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:136:28
    at async Span.traceAsyncFn (E:\Github\Project\node_modules\next\dist\trace\trace.js:79:20)
    at async TraceEntryPointsPlugin.createTraceAssets (E:\Github\Project\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:90:9)
caused by plugins in Compilation.hooks.processAssets
Error: File E:\Github\Project\.next\static\media\IMG_1764.59cd3605.JPG does not exist.
    at Job.emitDependency (E:\Github\Project\node_modules\next\dist\compiled\@vercel\nft\index.js:1:39473)
    at async Promise.all (index 10)
    at async Object.nodeFileTrace (E:\Github\Project\node_modules\next\dist\compiled\@vercel\nft\index.js:1:35430)
    at async E:\Github\Project\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:136:28
    at async Span.traceAsyncFn (E:\Github\Project\node_modules\next\dist\trace\trace.js:79:20)
    at async TraceEntryPointsPlugin.createTraceAssets (E:\Github\Project\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:90:9)

Upon trying to build, the command npm run dev stops functioning and displays an error message.

javascriptwebpacknext.jsvercel

Answer №1

Encountered a similar issue myself. Simply modify the file extension from JPG to jpg.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Clickable list element with a button on top

Within my web application, there is a list displaying options for the user. Each 'li' element within this list is clickable, allowing the user to navigate to their selected option. Additionally, every 'li' element contains two buttons - ...

javascripthtmlcss

What could be causing the browser to only partially display an image?

Have you encountered any issues with the browser not displaying an image fully? It seems like there may be a problem with the image download or rendering process, causing only part of the image to load. My application utilizes node and socket.io. Below ar ...

javascriptnode.jshttp

How can 'this' be converted from D3 JavaScript to TypeScript?

In JavaScript, 'this' has a different meaning compared to TypeScript, as explained in this informative article 'this' in TypeScript. The JavaScript code below is used to create a thicker stroke on the selected node and give smaller stro ...

javascripttypescriptd3.jsarrow-functionslexical-scope

What is the process for releasing an NPM package to the NPM registry rather than the GitHub registry?

I have developed an NPM package available at - (https://github.com/fyndreact/nitrozen) The package was successfully published on the Github registry (), but I am looking to publish it on the NPM registry. However, I cannot locate the package in the NPM r ...

javascriptnpmnpm-publishgithub-package-registrynpm-registry

Error in Typescript: Function not being triggered on button click

As someone who is just starting out with typescript, I've been tackling a simple code that should display an alert message in the browser when a button is clicked. I've experimented with the button and input tags, as well as using both onclick ev ...

javascripthtmltypescript

Encountering a CORS error in my Next.js 13.4 application while attempting to retrieve JSON data

Here is the location of the actual fetch request in our search/page. import { useSearchParams } from "next/navigation"; import Footer from "../components/Footers"; import Header from "../components/header"; import { format } ...

javascriptreactjsnext.jscors

Exploring Angular's Implementation of D3 Force Simulation

Looking to incorporate a d3 force simulation in my Angular app. I have a run method that initializes and sets simulation options, as well as a ticked method that updates the simulation on each tick. However, I've encountered a few problems with this s ...

javascriptangulard3.js

How can I generate a list of JavaScript files to be included in a template for both production and development environments using Grunt?

I need a way to organize a list of JavaScript files in one central location, either within gruntfile.js or an external JSON file, and then dynamically implement it into a template for both development and production environments. List of JavaScript files: ...

javascriptnode.jsgruntjs

Event delegation will be ineffective when the target element is nested within another element

After receiving a recommendation from my colleagues on Stackoverflow (mplungjan, Michel), I implemented the event delegation pattern for a comment list. It has been working well and I am quite excited about this approach. However, I have encountered an iss ...

javascripthtmlcss

The detailed record of this run can be accessed at:

npm ERR! code ENOTEMPTY npm ERR! syscall rename npm ERR! path /usr/local/lib/node_modules/expo-cli npm ERR! dest /usr/local/lib/node_modules/.expo-cli-dKBr48UN npm ERR! errno -39 npm ERR! ENOTEMPTY: The directory cannot be renamed because ...

javascriptnode.jsreactjslinuxreact-native

I need to obtain the URL pathname on a server component in Next.js version 13 - how is this achieved

I'm facing an issue with retrieving the pathname of a server component located in the app directory. Despite attempting to obtain it through window.location, I haven't been successful. Is there an alternative method I can use to achieve this? ...

javascriptnext.jspathrouterreact-server-components

Is it an issue with my code or Regex101? Diagnosing JavaScript/Node error

I'm currently working on an exercise assigned by my school which involves using regex. However, I'm facing some confusion regarding whether the issue lies in my function or in my regex code. Our instructor advised us to use regex101.com for testi ...

javascriptnode.jsredex

The Alert Component fails to display when the same Error is triggered for the second time

In the midst of developing a Website using Nuxt.js (Vue.js), I've encountered an issue with my custom Alert Component. I designed a contact form on the site to trigger a specialized notification when users input incorrect data or omit required fields ...

javascripthtmlcssvue.jsnuxt.js

Guide to displaying aggregated table field values in an input field when checking the checkbox

How can I retrieve the value of the second span and display it in an input field when a checkbox is checked? For example, if there are values like 500 in the first row and 200 in the second row, when the checkbox in the first row is ticked, the value of 50 ...

javascriptjqueryhtml

Create an array that can contain a mix of nested arrays and objects

Working on my project using Angular and TypeScript includes defining an array that can contain arrays or objects. public arrangedFooterMenu: IMenuItemType[][] | IMenuItemType[] = []; typesOfData.forEach(type => { let filteredData: IMenuItemType | ...

javascriptangulartypescriptmultidimensional-arrayfrontend

How to send Multipart form data with a string payload

Many suggestions in regards to this issue recommend utilizing some form of FormData within nodejs for building a multipart form. However, I am seeking to achieve the same result without relying on the FormData library. Instead, I aim to use only request h ...

javascriptnode.jstypescripthttp

Customizing Body Color in CKEditor for Dynamic Designs

I am facing an issue with CKEditor that I am hoping to find a solution for. My scenario involves using a jQuery color picker to set the background color of a DIV element, which is then edited by the user in CKEditor. However, I have observed that it is not ...

javascriptjquerycssckeditor

dependency in useEffect hook not being properly updated

Currently, I am implementing an API call within the useEffect hook in the following manner: useEffect(() => { fetchPatientsStartAsync(patientListUrl); }, [patientListUrl]); Moreover, in my codebase I have two additional state variables and a method in ...

javascriptreactjsreact-hooks

Troubleshooting the issue with mocking API and creating a regular expression to match the dynamic part of a URL

I am struggling to create a mock for an API that includes dynamic parts in the URL. I attempted to use a regular expression, but it is not functioning as expected. The URL I am trying to mock is: https://example.com/programs/2fcce6e3-07ec-49a9-9146-fb84fb ...

javascriptregextestingautomated-teststestcafe

"Upon subscribing, the object fails to appear on the screen

Why is the subscription object not displaying? Did I make a mistake? this.service.submitGbtForm(formValue) .subscribe((status) => { let a = status; // a = {submitGbtFrom: 'success'} console.log(a, 'SINGLE ...

javascriptangularobject