未捕获的类型错误：无法分配给对象“#<Object>”的只读属性“exports”

Question

我有错误：“未捕获的类型错误：无法分配给对象‘#’的只读属性‘exports’”。在 build.js 中，这个错误在“module.exports = main;”行。错误在哪里？我的模块：

这是我的主文件 script.js

const showContent = require('./modules/showContent');
const main = require('./modules/screens/main');
const about = require('./modules/screens/about');
const blog = require('./modules/screens/blog');
const contacts = require('./modules/screens/contacts');
const gallery = require('./modules/screens/gallery');

$(document).ready(function() {
  console.log(main);
  showContent(main);
    $(document).on("click", "a", (e) => {
        if ( $(this).hasClass('active') ) return;

        $("a").removeClass('active');
        $(this).addClass('active');

        $(".slide").slideUp(800);

        const self = this;
        setTimeout(() => showContent($(self).attr('id')), 800);
    });
});

主文件

const getElementFromTemplate = require('../getElementFromTemplate');
const showContent = require('../showContent');

const main = getElementFromTemplate(`<div>
        <h2>????? ?????????? ?? ?????</h2>
        <img src="images/img03.jpg" alt="img03">
        <p><b>?????</b> - ???????? ??????????? ? ?????????? ?? 332 ????????, ?? ??????? ??? ??????????? ?????????: ?? ???-?????? ?????? ??????, ????? ?????? ???????? ? ??????????? ????????? - ??????, ?????????? ????? ????? ????????? ???? ?????????? ????? ? ?????? ??????????. ??????? ?????????? ????? ?????????? ? ?????????????; ???????? 1/3 ?? ???????, ?????? ??? ? ?????????? ???????? ???????? ?????????? ?? ?????? ???????? - ?????????? ???, ???????????, ?????????? ? ?????? ????????? ?????????? ???????.</p>
      </div>
      <div>
        <h2>?????? ?????: ?????? ???????</h2>
        <img src="images/img04.jpg" alt="img04">
        <p>?????? ??????? ???????????, ?? ??????? ???? ??? ?? ?????, ? ????? ?????? - ????? 26 ° C, ?? ? ????? ????? - ????? 23 ° C: ????? ????????? ????????? ???? ? ????????, ? ????. ??????, ?????? ? ????? ??????? ??????????? - 28-34 ° C, ?? ? ???? ?????? ?????????? ??????????.</p>
        <p>??? ?????? ?????? ????????????? ???????? ?????? ? ??? ?? ???????, ????? ?????? ????? ???. ?????? ?????????? ? ?????? ?????? ??????????: ???, ?? ????? ??????? ???????? ???????? ????? ???? ???? ? ?????? ??????? ????????? ???????.</p>
      </div>
      <div>
        <h2>????? ?? ?????</h2>
        <img src="images/img05.jpg" alt="img05">
        <p>?????? ????? ???????? «????????????» ?? ?????? ????-????, ?????????? ? ?????????? ?????. ????? ????? ????? ????? ???? ????? ?? ???? ? ?? ???????: ???? ? ????????????? ????? ? ????????? ?????????. ????? ??????? ????? ??? ?? 100 ?? - ?? ???????? ?????????? ???????; ?????????? ??????? - ????? 10 000 ??, ? ?? ????????? ??????????? ????????? ????????? ????????, ?? ????????????? ?? ????? ? ??????????. ??? ????????? ?????? ??????? ???? Paradise, ????? ? ?????????, ? ?????? ????? ?????? ? ????? ?? ?????????? «???????????????»: ?????? ????? ?????? ????? ? ?????? ? ???????? ?? ??????? ?????? - ?? ????????, ??? ???????? ????????? ??? ????? ? ??????. ??????, ?? ??????? ???????? ?????, ????????? ???? ? ?????????????? ???????? ??????? ???????????? ???????: ????? ?? ????? ????? ????????, ?? ???????? ????????? ?????, ? ??? ????? ? ???????? ? ????, ????? «? ??? ?????». ???????? ????? ????? ???? ????? ????? ???????????, ?? ???????? ?? ??????? ? ??????? ??????.</p>
      </div>
      <div>
        <h2>????????? ? ???????? ????? ?? ?????</h2>
        <img src="images/img06.jpg" alt="img06">
        <p>???????, ??? ?????????? ?? ????? ?? ????? ???? ?????, ?? ??, ???????????? ? ?????????, ????????? ??????. ???????? - ???????? ????, ???????? ?????????? ??????: ?? ????? ????? ??????, ? ????? - ????????????? ????? ?? ????? ?? 60 ? ??????? - ?????????, ??? ??? ????????????? ???????? ???. ??????? ????????? ?? ????? ?????????, ??? ??????: ????? ?????? ??????????????? ???? ? ?????? ?????. ????????? ??????? ????, ??????? ????? 3000 ???, ? ??????? ??????????? ??? ??????.</p>
        <p>?? ????? ????? ????? ???????????? ?????? ? ????????????, ?? ??????? ??????? ????????? ?????? ??????? ??????: ???? ?????????? ??????? - ??????? ????????? ???? ????????? ? ????????????? ?????? ? ???????????? ? ???????? ????????.</p>
      </div>`);

module.exports = main;

显示内容.js

const showContent = (contentTemplate) => {
  const content = document.querySelector(`main`);
  content.innerHTML = ``;
  content.appendChild(contentTemplate);
};

module.exports = showContent;

webpack.config.js

module.exports = {
    entry: "./script",
    output: {
        filename: "build.js"
    }
};

Answer 1

更多信息 - webpack/issues/4039

原因

在指示 Babel 不转译模块语法后，这个问题对我产生了新的影响。它仅在尝试在 ES 模块中使用 CommonJS 风格的 module.exports 时发生。这可以通过简单地将所有 module.exports = ... 替换为 export default ... 来解决，因为这对于旧的 Babel 风格的 ES 模块转译来说似乎是等效的。（但请注意，使用 require 导入此模块可能会给您一个带有默认密钥的选项，而不是默认导出本身，因此最好一次在整个代码库中进行切换。）

通过jchv@github

.babelrc 中的设置

删除 .babelrc 中的“modules: false”

preset-es2015 选项 -模块

"amd" | “嗯” | "systemjs" | "commonjs" | false，默认为“commonjs”。
启用 ES6 模块语法到另一种模块类型的转换。
将此设置为 false 不会转换模块。