小编Ani*_*mus的帖子

我使用 React 和 Nest 创建了一个小型应用程序，以了解 WebScoket api。不仅仅是浪费时间，我想将其包装为可部署的应用程序，并将其托管在某个地方。

代码在这里： https: //github.com/An1mus/chitchat

在添加一些基本工作流程时，我遇到了以下错误的问题，该错误在运行测试后出现（测试用例通过）：

/Users/andrewpetrov/Projects/an1mus/chitchat/client/node_modules/.pnpm/xmlhttprequest-ssl@2.0.0/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js:628
        setImmediate(function() { self["on" + event]() })
        ^

ReferenceError: setImmediate is not defined
    at XMLHttpRequest.dispatchEvent (/Users/andrewpetrov/Projects/an1mus/chitchat/client/node_modules/.pnpm/xmlhttprequest-ssl@2.0.0/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js:628:9)
    at setState (/Users/andrewpetrov/Projects/an1mus/chitchat/client/node_modules/.pnpm/xmlhttprequest-ssl@2.0.0/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js:654:12)
    at XMLHttpRequest.handleError (/Users/andrewpetrov/Projects/an1mus/chitchat/client/node_modules/.pnpm/xmlhttprequest-ssl@2.0.0/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js:572:5)
    at ClientRequest.errorHandler (/Users/andrewpetrov/Projects/an1mus/chitchat/client/node_modules/.pnpm/xmlhttprequest-ssl@2.0.0/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js:490:14)
    at ClientRequest.emit (node:events:527:28)
    at Socket.socketErrorListener (node:_http_client:454:9)
    at Socket.emit (node:events:527:28)
    at emitErrorNT (node:internal/streams/destroy:164:8)
    at emitErrorCloseNT (node:internal/streams/destroy:129:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

由于某种原因，当我运行测试时它会触发，即使我唯一的测试是这样的：

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders the app', async () => {
  // this is a …

我有一个div,其中包含图像和描述.当我更改margin-top时.describing,容器div移动:

HTML:

<div class="project">
    <a href="img/projects/a/a6.png" data-lightbox="a" data-title="A* algorithm realization">
        <img class="projim" src="img/projects/a/acover.png" onmouseover="this.src='img/projects/a/a6.png'"  onmouseout="this.src='img/projects/a/acover.png'"/>
    </a>
    <a class="hidden" href="img/projects/a/a1.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <a class="hidden" href="img/projects/a/a2.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>            
    <a class="hidden" href="img/projects/a/a3.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <a class="hidden" href="img/projects/a/a4.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <a class="hidden" href="img/projects/a/a5.png" data-lightbox="a" data-title="A* algorithm realization">
    </a>
    <p class="describing">
        My realization of A* pathfinding algorithm.
    </p>
</div>

<div class="project">
    <a href="img/projects/fl/fl1.png" data-lightbox="fl" data-title="Follow the light">
        <img class="projimfl" src="img/projects/fl/flcover.jpg" onmouseover="this.src='img/projects/fl/fl1.png'" …

我决定尝试一下app目录，但很多东西都被破坏了。例如，图像导入。png 工作得很好，但导入 SVG 图像会使其在/app.

例如，这个特定的 URL 仅适用于 fin /pages，不适用于/app：

import Logo from 'public/company.svg';

导入的图像对象（从组件内部）在控制台中如下所示：

{
  src: '/_next/static/media/company.99a082b8.svg',
  height: 32,
  width: 162
}

文件本身不存在于/media文件夹中。

如何将 SVG 图像导入 NextJS 13+ 项目？

更新：

我添加了 SVGR 以将 SVG 作为组件导入，一切正常，但它并没有解决构建问题。