next.js 由于Webpack错误,下一个js生成失败

sxpgvts3  于 2023-03-22  发布在  Webpack
关注(0)|答案(1)|浏览(182)

由于某种原因,当我运行npm run build时,npm无法创建next.js应用程序的构建。当它试图获取logo.png时,它崩溃了,logo.png最初位于public目录中,我在那里提供所有静态资产,如图像和图标。我真的不明白发生了什么,为什么我会得到这个错误:\

info  - Linting and checking validity of types
    info  - Creating an optimized production build
    Failed to compile.

HookWebpackError: File C:\Users\Daniil\MY_PROJECT_DIR\.next\static\media\logo.ecfa485c.PNG does not exist.
    at makeWebpackError (C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\compiled\webpack\bundle5.js:28:308185)
    at C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\compiled\webpack\bundle5.js:28:105236
    at eval (eval at create (C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\compiled\webpack\bundle5.js:13:28771), <anonymous>:27:1)
    at C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\compiled\webpack\bundle5.js:28:68649
    at C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:414:143
-- inner error --
Error: File C:\Users\Daniil\MY_PROJECT_DIR\.next\static\media\logo.ecfa485c.PNG does not exist.
    at Job.emitDependency (C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\compiled\@vercel\nft\index.js:1:39473)
    at async Promise.all (index 5)
    at async Object.nodeFileTrace (C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\compiled\@vercel\nft\index.js:1:35430)
    at async C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:135:28
    at async Span.traceAsyncFn (C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\trace\trace.js:79:20)
    at async TraceEntryPointsPlugin.createTraceAssets (C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:89:9)
caused by plugins in Compilation.hooks.processAssets
Error: File C:\Users\Daniil\MY_PROJECT_DIR\.next\static\media\logo.ecfa485c.PNG does not exist.
    at Job.emitDependency (C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\compiled\@vercel\nft\index.js:1:39473)
    at async Promise.all (index 5)
    at async Object.nodeFileTrace (C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\compiled\@vercel\nft\index.js:1:35430)
    at async C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:135:28
    at async Span.traceAsyncFn (C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\trace\trace.js:79:20)
    at async TraceEntryPointsPlugin.createTraceAssets (C:\Users\Daniil\MY_PROJECT_DIR\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:89:9)

> Build failed because of webpack errors

我的项目结构如下所示

C:.
├───.next
│   ├───cache
│   │   ├───eslint
│   │   ├───swc
│   │   │   └───plugins
│   │   │       └───v4
│   │   └───webpack
│   │       ├───client-development
│   │       ├───server-development
│   │       └───server-production
│   └───server
├───components
├───node_modules
├───pages
│   ├───catalog
│   │   └───product
│   └───news
├───public
│   ├───about_us
│   ├───catalog
│   ├───contacts
│   ├───footer
│   ├───gallery
│   ├───our_works
│   ├───reviews
│   └───why_we
└───styles

我真的很感激任何帮助!

wz3gfoph

wz3gfoph1#

所以问题出在我导入图像的方式上。出于某种原因,我是这样做的:

import logo from '@/public/logo.PNG'

...

<img src={logo.src} />

但正确的方法是直接将path指向img元素中的image:

<img src='/logo.PNG' />

相关问题