Использование иконок дизайна Ant в пакете npm - PullRequest
0 голосов
/ 17 июня 2020

Мир. Я создаю свой пакет custom npm с помощью antd и antd-icons. У меня нет проблем при установке пакета из gitlab. Но когда я go перехожу на страницу с моим компонентом из пакета, я получаю белый экран и эту ошибку в консоли.

Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.


    The above error occurred in the <IconReact> component:
        in IconReact
        in span
        in AntdIcon
        in ForwardRef(PlusSquareTwoTone)
        in div
        in div
        in div
        in div
        in div
        in Unknown
        in div
        in div
        in div
        in t
        in div
        in div
        in t (at ProjectPlanChart.tsx:708)
        in div (at ProjectPlanChart.tsx:707)
        in div (at Wrap.tsx:9)
        in Wrap (at ProjectPlanChart.tsx:700)
        in div (at ProjectPlanChart.tsx:698)
        in div (at Wrap.tsx:9)
        in Wrap (at ProjectPlanChart.tsx:697)
        in div (at Wrap.tsx:9)
        in Wrap (at ProjectPlanChart.tsx:647)
        in div (at SpinLoading.tsx:10)
        in SpinLoading (at ProjectPlanChart.tsx:646)
        in div (at ProjectPlanChart.tsx:645)
        in ProjectPlanChart (created by Form(ProjectPlanChart))
        in Form(ProjectPlanChart) (created by Context.Consumer)
        in Route (at App.tsx:81)
        in Switch (at App.tsx:72)
        in main (created by Basic)
        in Basic (created by Context.Consumer)
        in Content (at App.tsx:71)
        in section (created by BasicLayout)
        in BasicLayout (created by Context.Consumer)
        in Layout (at App.tsx:70)
        in Router (created by BrowserRouter)
        in BrowserRouter (at App.tsx:60)
        in section (created by BasicLayout)
        in BasicLayout (created by Context.Consumer)
        in Layout (at App.tsx:59)
        in div (at App.tsx:54)
        in RoleProvider (at App.tsx:53)
        in App (at src/index.tsx:30)
        in LocaleProvider (created by Context.Consumer)
        in LocaleReceiver (created by ConfigProvider)
        in ConfigProvider (at src/index.tsx:29)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit  to learn more about error boundaries. index.js:1
        e index.js:1
        React 12
        unstable_runWithPriority scheduler.development.js:697
        React 5
        unstable_runWithPriority scheduler.development.js:697
        React 8
        unstable_runWithPriority scheduler.development.js:697
        dispatchUserBlockingUpdate React

Я уверен, что проблема в antd-icons, потому что когда я их удаляю, все работает нормально.

Конфигурация Webpack:


    const path = require("path");

    const webpackRules = require("./webpackRules");

    module.exports = {
      resolve: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
        alias: {
          components: path.resolve(__dirname, "src/components"),
          "~": path.resolve(__dirname, "src"),
        },
      },
      module: {
        rules: [
          {
            test: /\.ts(x?)$/,
            exclude: /node_modules/,
            use: [
              {
                loader: "ts-loader"
              }
            ]
          },
          {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
          },
        ],
      },
    };
    ````
    Webpack prod config
    ````const path = require("path");
    const merge = require('webpack-merge');
    const common = require('../webpack.common.js');

    module.exports = merge(common, {
      mode: 'production',
      entry: "./src/index.ts",
      output: {
        library: 'lib',
        libraryTarget: 'umd',
        path: path.join(__dirname, "../dist"),
        filename: "./index.js",
      },
    });

...