Question

在尝试从svg精灵文件加载图标时，我使用的是svg-sprite-loader插件，但是，该页面失败，并出现webpack错误“未定义导出”。可能会发生什么？这样的一个调试webpack加载器如何才能获得更多相关的错误消息？

除了适应反应之外，我遵循了this教程。

我得到的错误是：

Icon.bs.js:21 Uncaught ReferenceError: exports is not defined
    at eval (Icon.bs.js:21)
    at Module../src/components/Icon/Icon.bs.js (Index.js:1357)
    at __webpack_require__ (Index.js:20)
    at eval (DebuggerTopBar.bs.js:6)
    at Object../src/components/DebuggerTopBar/DebuggerTopBar.bs.js (Index.js:1345)
    at __webpack_require__ (Index.js:20)
    at eval (Debugger.bs.js:6)
    at Object../src/components/Debugger/Debugger.bs.js (Index.js:1321)
    at __webpack_require__ (Index.js:20)
    at eval (Index.bs.js:15)

这是所有代码：

组件代码

[%%raw "import '../../svg/icons.svg'"]; // this is the line that fails

[@react.component]
let make = (~name) =>
  <svg className={{j|icon icon-$name|j}}>
    <use xlinkHref={{j|#icons_$name|j}} />
  </svg>;

哪个输出此反应代码

// Generated by BUCKLESCRIPT, PLEASE EDIT WITH CARE
'use strict';

var React = require("react");

import '../../svg/icons.svg'
;

function Icon(Props) {
  var name = Props.name;
  return React.createElement("svg", {
              className: "icon icon-" + (String(name) + "")
            }, React.createElement("use", {
                  xlinkHref: "#icons_" + (String(name) + "")
                }));
}

var make = Icon;

exports.make = make;
/*  Not a pure module */

生成的JS

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _svg_icons_svg__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../svg/icons.svg */ "./src/svg/icons.svg");
// Generated by BUCKLESCRIPT, PLEASE EDIT WITH CARE


var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");



function Icon(Props) {
  var name = Props.name;
  return React.createElement("svg", {
              className: "icon icon-" + (String(name) + "")
            }, React.createElement("use", {
                  xlinkHref: "#icons_" + (String(name) + "")
                }));
}

var make = Icon;

exports.make = make;
/*  Not a pure module */

Webpack配置

  rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {  
        test: /\.svg$/i,
        loader: 'svg-sprite-loader'
      },
    ]
  }

图标精灵文件

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="locked" viewBox="0 0 32 32">
      <path d="M9 18h-2v14h2c0.55 0 1-0.45 1-1v-12c0-0.55-0.45-1-1-1z"></path>
      <path d="M23 18c-0.55 0-1 0.45-1 1v12c0 0.55 0.45 1 1 1h2v-14h-2z"></path>
      <path class="handles"
        d="M32 16c0-8.837-7.163-16-16-16s-16 7.163-16 16c0 1.919 0.338 3.759 0.958 5.464-0.609 1.038-0.958 2.246-0.958 3.536 0 3.526 2.608 6.443 6 6.929v-13.857c-0.997 0.143-1.927 0.495-2.742 1.012-0.168-0.835-0.258-1.699-0.258-2.584 0-7.18 5.82-13 13-13s13 5.82 13 13c0 0.885-0.088 1.749-0.257 2.584-0.816-0.517-1.745-0.87-2.743-1.013v13.858c3.392-0.485 6-3.402 6-6.929 0-1.29-0.349-2.498-0.958-3.536 0.62-1.705 0.958-3.545 0.958-5.465z"></path>
    </symbol>
  </defs>
</svg>

Answer 1

问题似乎是您在混合es6和commonjs模块系统。 import是es6，而require和exports对象是commonjs。

您将必须：

将所有内容移至es6。通过在bsconfig.json中将package-spec设置为es6-global，仅使BuckleScript发出es6就足够了。
将所有内容移至commonjs。将import更改为require，并通过在webpack配置的选项中将esModule设置为svg-sprite-loader，使false发出commonjs。

加载svg图标时“未定义导出”

1 个答案: