create-react-app导入svg图片出现错误的解决方法

编程2022年6月1日

大部分React开发环境基本都是直接使用create-react-app脚手架搭建，这样可以开箱即用各种配置完成的模块，不需要将时间浪费在环境配置上。不过当出现一些错误时，也会非常的头疼。

比如我在React项目中导入svg格式的图片后进行build时出现了下面的错误信息。

……

Creating an optimized production build…
Failed to compile.

SyntaxError: unknown: Namespace tags are not supported by default. React’s JSX doesn’t support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
6 | …props
7 | }, svgRef) {
> 8 | return <svg xmln…….

…

…

下面是详细的代码。

import React, { Component } from 'react'
import Style from './index.module.css'
import LogoIco from '../static/logo.svg'

export default class index extends Component {

    render() {
        return (
            <div className={Style.root}>
                <object data={LogoIco} aria-labelledby="logo" type="image/svg+xml"></object>
            </div>
        )
    }
}

经过排错，最后发现是create-react-app用到了svgo这个模块，这个模块是进行svg的压缩优化的。它虽然没有在create-react-app的webpack.config.js中启用但是还是对导入的svg产生了影响。

项目地址: https://github.com/svg/svgo

解决方法也非常简单，首先将create-react-app创建的项目中的config暴露出来。

打开项目下的package.json文件，其中有一段

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

其中eject就是暴露config的命令。

切换到项目下，执行npm run eject命令,一切正常的话，就会将项目的config文件暴露。

不过本人第一次运行时出现了下面的错误

D src/logo.svg
.DS_Store
build/
node_modules/
preload.js
public/index.css
src/Logo/
src/static/

Remove untracked files, stash or commit any changes, and try again.

解决方法非常简单，使用git进行一次提交即可。

继续执行

root@MacBook-Pro launch % npm run eject

> launch@0.1.0 eject
> react-scripts eject

NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

✔ Are you sure you want to eject? This action is permanent. … yes
Ejecting…

Copying files into /xxxxxxxx/launch
Adding /config/env.js to the project
Adding /config/getHttpsConfig.js to the project
Adding /config/modules.js to the project
Adding /config/paths.js to the project
Adding /config/webpack.config.js to the project
Adding /config/webpackDevServer.config.js to the project
Adding /config/jest/babelTransform.js to the project
Adding /config/jest/cssTransform.js to the project
Adding /config/jest/fileTransform.js to the project
Adding /scripts/build.js to the project
Adding /scripts/start.js to the project
Adding /scripts/test.js to the project
Adding /config/webpack/persistentCache/createEnvironmentHash.js to the project

Updating the dependencies
Removing react-scripts from dependencies
Adding @babel/core to dependencies
Adding @pmmmwh/react-refresh-webpack-plugin to dependencies
Adding @svgr/webpack to dependencies
Adding babel-jest to dependencies
Adding babel-loader to dependencies
Adding babel-plugin-named-asset-import to dependencies
Adding babel-preset-react-app to dependencies
Adding bfj to dependencies
Adding browserslist to dependencies
Adding camelcase to dependencies
Adding case-sensitive-paths-webpack-plugin to dependencies
Adding css-loader to dependencies
Adding css-minimizer-webpack-plugin to dependencies
Adding dotenv to dependencies
Adding dotenv-expand to dependencies
Adding eslint to dependencies
Adding eslint-config-react-app to dependencies
Adding eslint-webpack-plugin to dependencies
Adding file-loader to dependencies
Adding fs-extra to dependencies
Adding html-webpack-plugin to dependencies
Adding identity-obj-proxy to dependencies
Adding jest to dependencies
Adding jest-resolve to dependencies
Adding jest-watch-typeahead to dependencies
Adding mini-css-extract-plugin to dependencies
Adding postcss to dependencies
Adding postcss-flexbugs-fixes to dependencies
Adding postcss-loader to dependencies
Adding postcss-normalize to dependencies
Adding postcss-preset-env to dependencies
Adding prompts to dependencies
Adding react-app-polyfill to dependencies
Adding react-dev-utils to dependencies
Adding react-refresh to dependencies
Adding resolve to dependencies
Adding resolve-url-loader to dependencies
Adding sass-loader to dependencies
Adding semver to dependencies
Adding source-map-loader to dependencies
Adding style-loader to dependencies
Adding tailwindcss to dependencies
Adding terser-webpack-plugin to dependencies
Adding webpack to dependencies
Adding webpack-dev-server to dependencies
Adding webpack-manifest-plugin to dependencies
Adding workbox-webpack-plugin to dependencies

Updating the scripts
Replacing “react-scripts start” with “node scripts/start.js”
Replacing “react-scripts build” with “node scripts/build.js”
Replacing “react-scripts test” with “node scripts/test.js”

Configuring package.json
Adding Jest configuration
Adding Babel preset

Running npm install…

up to date in 3s
Ejected successfully!

成功暴露！接下去就可以将svgo去掉。

进入项目中的config目录，打开webpack.config.js定位到

{
   test: /\.svg$/,
   use: [
            {
                  loader: require.resolve('@svgr/webpack'),
                  options: {
                    prettier: false,
                    svgo: false,
                    svgoConfig: {
                      plugins: [{ removeViewBox: false }],
                    },
                    titleProp: true,
                    ref: true,
                  },
             },
             {
                  loader: require.resolve('file-loader'),
                  options: {
                    name: 'static/media/[name].[hash].[ext]',
                  },
              },
          ],
    issuer: {
          and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
    },
}

将其中的svgo: false直接注释掉，然后保存在重新对项目进行build即可。