zoukankan      html  css  js  c++  java
  • SVG TypeError: Cannot read property 'tagName' of null

    • Operating System: macOS
    • Node Version: 10.16.0
    • NPM Version: 6.12.0
    • webpack Version: 4.41.2
    • file-loader Version: 5.0.2

    Expected Behavior

    Load SVG icon in JSX.

    Actual Behavior

    ./src/icons/Icon_Pay.svg (./node_modules//webpack/lib?-svgo!./src/icons/Pay.svg) TypeError: Cannot read property 'tagName' of null

    Code

    js
    // webpack.config.js
    {
      loader: require.resolve('file-loader'),
      exclude: [/.(js|mjs|jsx|ts|tsx)$/, /.html$/, /.json$/],
      options: {
        name: 'static/media/[name].[hash:8].[ext]',
      },
    },
    // ...
    // ...
    plugins: [
        [
            require.resolve('babel-plugin-named-asset-import'),
            {
                loaderMap: {
                    svg: {
                        ReactComponent: '/webpack?-svgo![path]',
                    },
                },
            },
        ],
    ],
    js
    <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 102.86 100"><defs><style>.cls-1{fill:#322d2c;fill-rule:evenodd;}</style></defs><title>Asset 6</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M97.1,44.21a4.83,4.83,0,0,0,0-7L79.15,19.81,29.57,68a2.19,2.19,0,0,1-3,0,2,2,0,0,1,0-3l49.58-48.2L64.53,5.6a5.17,5.17,0,0,0-7.14,0L5.76,55.79a4.84,4.84,0,0,0,0,7l2.5,2.43L57.84,17a2.19,2.19,0,0,1,3,0,2,2,0,0,1,0,2.95L11.29,68.12l27,26.28a5.06,5.06,0,0,0,3.56,1.43h0a5.06,5.06,0,0,0,3.56-1.43L97.1,44.21Zm3-9.89a8.9,8.9,0,0,1,0,12.83L50.06,95.83h22.8a2.09,2.09,0,1,1,0,4.17H30a2.09,2.09,0,1,1,0-4.17h3.74l-27-26.24h0l-4-3.91a8.91,8.91,0,0,1,0-12.84L54.35,2.65a9.56,9.56,0,0,1,13.21,0l32.57,31.67ZM51.94,59.22a2.55,2.55,0,0,1-.21,3.27L34.63,79.64a1.91,1.91,0,0,1-1.47.58,1.89,1.89,0,0,1-1.39-.77A2.56,2.56,0,0,1,32,76.18L49.08,59a1.85,1.85,0,0,1,2.86.19Zm-7.1,15.71A2.18,2.18,0,1,1,47.93,78l-7,7A2.19,2.19,0,1,1,37.78,82l7.06-7Zm8.28-5.67a2.35,2.35,0,1,1,3.33,3.33l-1,1a2.35,2.35,0,1,1-3.33-3.33l1-1ZM77,46.1l6.23-6.23-3.12-3.12L73.9,43,77,46.1Zm4.67-14,6.24,6.24a2.21,2.21,0,0,1,0,3.12l-9.35,9.35a2.23,2.23,0,0,1-1.56.65,2.2,2.2,0,0,1-1.56-.65l-6.24-6.24a2.19,2.19,0,0,1,0-3.11l9.36-9.36a2.21,2.21,0,0,1,3.11,0ZM65.22,17.14a2.36,2.36,0,0,1-1.67-4l1-1a2.35,2.35,0,1,1,3.33,3.33l-1,1a2.34,2.34,0,0,1-1.66.69Zm-43.53,55A2.35,2.35,0,1,1,25,75.45l-1,1a2.38,2.38,0,0,1-1.67.69,2.36,2.36,0,0,1-1.67-4l1-1Z"></path></g></g></svg>
    js
    import React from 'react';
    import { ReactComponent as PaymentAggregation } from './Icon_PaymentAggregation.svg';
    export default {
        PaymentAggregation
    };

    How Do We Reproduce?

    After updating file-loader from v4.2.0 to v5.0.2 I am getting this error.

    该提问来源于开源项目:webpack-contrib/file-loader

    Answers:

    1. Can confirm same issue happening here after upgrading file-loader from v4.2.0 to v5.0.2.

    2.  Duplicate of https://github.com/smooth-code/svgr/issues/362

    3. Why is this issue closed ? Checking yarn.lock does not show any information that it is using smooth-code/svgr#362. As I can only change the version of file-loader to resolve this problem, I think it should be handled here too.
    4. do you read changelog? we switch on ES modules so some other non official loaders can buggy, we can't solve this on our side, look in you stack trace in error:
    /node_modules//webpack/lib?-svgo!./src/icons/Pay.svg
    You can see what problem in /webpack package
    5. Yes I read the changelog and saw the breaking change with ESModule. It still was not clear to me that this also affects other packages that file-loader is using.
    6. yes it can affect, potential buggy place https://github.com/smooth-code/svgr/blob/master/packages/webpack/src/index.js#L34
    7. you can fix it using esModule: false, but you build size will be increased because it is do impossible concatenated modules
     
  • 相关阅读:
    python-第05章-元组与购物车的程序练习
    python-第01章05章节-列表使用
    python-第01章04章节-python的数据类型和三元运算
    python-第03章-初识模块和解释pyc
    python-第01章02章节-密文,if else判断和while,for循环
    python-第01章01章节-用户输入以及字符串的介绍
    k8s- centos7.8搭建
    k8s-获取kuboardtoken
    k8s搭建
    nginx编译安装
  • 原文地址:https://www.cnblogs.com/2008nmj/p/15005695.html
Copyright © 2011-2022 走看看