'Cannot find module' 使用 webpack 加载器时

Question

我为我的应用程序使用自定义 webpack 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'

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

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

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

Answer 1

问题（据我了解：https://github.com/zeit/next.js/issues/544）是 Next.js 不使用 Webpack 进行服务器端渲染，仅用于客户端，因此您无法导入SVG 就像您在纯客户端 React 项目时所做的那样（即通过加载程序链为 .svg 文件和运行这些文件添加规则）。

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

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

npm i babel-plugin-inline-react-svg --save
add/merge 将以下内容添加到您的 Babel 配置（有关如何设置自定义 Babel 配置的更多信息 here）：
```
 "plugins": [
   "inline-react-svg"
 ]
```
在您的 component/page 中，使用这个（变量的名称 LogoSVG 很重要，不应更改）：
```
import LogoSVG from '../assets/logo.svg';
```
并将其用作 React 组件：
```
return <LogoSVG alt="logo" />
```

'Cannot find module' 使用 webpack 加载器时

'Cannot find module' when using webpack loaders

javascript

module

loader

reactjs

webpack