Question

所以我有一个React组件，试图将其发布到npm注册表中。它是一个简单的组件，它决定要渲染的组件，并且所有渲染选项均由我公司的其他人创建并从npm注册表中导入。

问题是，当我构建组件并尝试使用它时，它不起作用，并给我下一个错误：

    ./node_modules/@corp/foo/dist/component.es.js
    SyntaxError: /Users/225336/Documents/corp/projektit/react-test- 
    app/test-app/node_modules/@corp/component/dist/component.es.js: Identifier 
    '___$insertStyle' has already been declared (86:9)

      84 | }
      85 | 
    > 86 | function ___$insertStyle(css) {
         |          ^

当我查看 component.es.js 时，我发现它为每个导入的组件创建了___ $ insertStyle（css）函数，为我的父组件创建了一个，但是前两个没有后面有识别号，所以它们重叠

    function ___$insertStyle(css) {
      if (!css) {
        return;
      }
      if (typeof window === 'undefined') {
        return;
      }

      var style = document.createElement('style');

      style.setAttribute('type', 'text/css');
      style.innerHTML = css;
      document.head.appendChild(style);

      return css;
    }

    ...

    function ___$insertStyle(css) {
      if (!css) {
        return;
      }
      if (typeof window === 'undefined') {
        return;
      }

      var style = document.createElement('style');

      style.setAttribute('type', 'text/css');
      style.innerHTML = css;
      document.head.appendChild(style);

      return css;
    }

    ___$insertStyle(".1-embed-container...");

    ...

    function ___$insertStyle$1(css) {
      ...
    }

    ...

    ___$insertStyle$1(".2-embed-container...");

    ...

    function ___$insertStyle$2(css) {
      ...
    }

    ...

    ___$insertStyle$2(".at-embed{padding:14px;line-height:1.4;font-family:Bernino Sans,Verdana,sans-serif}.at-embed div{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.at-embed h4{margin:0 0 5px}.at-embed h6{margin:0;font-size:13px;font-weight:700}.at-embed img{display:none}.at-embed article{border-left:4px solid #999;padding:2px 0 2px 10px;margin-bottom:10px;clear:both}.at-embed article,.at-embed article:first-child{-webkit-flex:1 0 100%;-ms-flex:1 0 100%;flex:1 0 100%;margin-right:20px}.at-embed article:first-child{margin-bottom:20px;border:0;padding:0}.at-embed article:first-child a{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.at-embed article:first-child h6{font-size:15px;line-height:1.2}.at-embed article:first-child img{display:block;margin-right:14px;width:40%}.at-embed article:last-child{margin:0}@media (min-width:420px){.at-embed article:first-child h6{font-size:18px}}@media (min-width:840px){.at-embed article{-webkit-flex:1 1 135px;-ms-flex:1 1 135px;flex:1 1 135px;border:0;padding:0}.at-embed article img{display:block;margin:0 0 10px}.at-embed article:first-child h6{font-size:22px}}.at-embed-kl article{border-color:#00c4e0}.at-embed-te article{border-color:#eb1c22}.at-embed-mb article{border-color:#4068ad}.at-embed-mb svg path{fill:#4068ad}");

    ...

是什么原因引起的，我该如何解决？手动删除重复功能之一可以解决此问题，但这显然不是正确的方法。

Answer 1

通过使用webpack而不是汇总来“修复”它。

在内置的自行创建的React模块中获取重复功能

1 个答案: