Javascript '；找不到模块'；使用网页包加载程序时

我将我的应用程序的自定义网页与Next.js一起使用：

const path = require('path');
const Webpack = require('webpack');

module.exports = {
  webpack: (config, { dev }) => {
    config.plugins.push(
      new Webpack.DefinePlugin([{
          __BROWSER__: "typeof window !== 'undefined'",
          __NETLIFY_BRANCH__: JSON.stringify(process.env.BRANCH),
          __CONFIG__: JSON.stringify({
            GRAPHQL_URL: process.env.GRAPHQL_URL,
            SEGMENT_WRITEKEY: process.env.SEGMENT_WRITEKEY,
          }),
        }])
      )
      config.module.rules.push(
        {
          test: /\.png$/,
          use: {
          loader: 'url-loader',
           options: {
             limit: 10000,
             name: 'graphics/[name].[ext]',
           },
         },
       },
       {
      test: /\.svg$/,
      loader: [
        {
          loader: 'babel-loader',
          query: {
            presets: ['es2015']
          }
        },
        {
          loader: 'svg-react-loader',
        },
        {
          loader: 'string-replace-loader',
          options: {
            search: ' xmlns="http://www.w3.org/2000/svg"',
            replace: '',
                    },
                  },
                ],
              },
            );
      return config;
  },
};

但是，当我尝试将映像添加到组件时，启动了本地主机，但收到错误：

Cannot find module '../assets/logo.svg'

我像往常一样将图像导入组件，没有图像，我的应用程序正在运行。也许我应该在我的网页上添加一些东西？ 在目录资源中设置的所有图像

import logo from '../assets/logo.svg'; 

export default class Layout extends React.Component {
render () {
    return (
    <img src={logo} alt="logo" />
  )
 }
}

从“../assets/logo.svg”导入徽标；
导出默认类布局扩展React.Component{
渲染（）{
返回(
)
}
}

问题（从我的理解：）在于Next.js不使用Webpack进行服务器端渲染，只用于客户端，因此您不能像导入纯客户端项目时那样导入SVG（即为

.SVG

文件添加规则并通过加载链运行这些文件）

提到了一种可能的解决方案，其中SVG导入不是由Webpack加载程序完成的，而是由Babel（在Next.js的服务器端代码中使用）完成的

它似乎对我有用，就像这样：

• npmibabel插件内嵌反应svg——保存

• 将以下内容添加/合并到您的Babel配置中（有关如何设置自定义Babel配置的更多信息）：

• 在组件/页面中，使用此选项（变量的名称，

  LogoSVG

  ，非常重要，不应更改）：

• 并将其用作反应组分：

  return <LogoSVG alt="logo" />
  

  返回
  

---

是否确定SVG文件的路径正确（相对于组件文件）？（fwiw，您的组件文件有一个输入错误，

defilt

而不是

default

）对不起，这是输入错误。是的，路径正确。请参阅我的更新答案。@robertklep您需要我的项目的结构吗？不，不需要结构，它与此无关：）谢谢，我编辑了此部分，但关于模块的错误仍然存在：（如果我将在组件中使用大量的图像，那又会怎样呢？我不能全部都像反应组件。”ValeriaShpiner：在这种情况下，你应该考虑把这些图像变成静态资源（）。还有一件事。我的项目Glamer使用了文件_document.js。当我向Babel添加额外的插件时，控制台显示错误

意外标记：return{…page，…style}

..
对它不好。也许你知道我如何避免它？在你的Babel配置中定义了哪些预设？应该这样做（至少）包含
next/babel
import LogoSVG from '../assets/logo.svg';

return <LogoSVG alt="logo" />