无法生成构建版本的webapp

Question

当我试图运行‘’时，它会给我一个解析错误，但没有指定问题出在哪里。

Error: Parse Error: <div id={"headerBar"}>
        <h1>My Todo Webapp</h1>        
      </div>
      <div id="root"></div>                 
      <div id={"footerBar"}>                
        <h1>View Source Code</h1>           
      </div>
    <script>!function(e){function r(r){for(var n,f,i=r[0],l=r[1],a=r[2],c=0,s=[];c<i.length;c++)f=i[c],o[f]&&s.push(o[f][0]),o[f]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(p&&p(r);s.length;)s.shift()();
  return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={2:0},u=[];function f(r){if(n[r
  ])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefin
  ed"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"===typeof e&&e
  &&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e)
  {var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var i=window.webpackJsonp=window.webpackJsonp||[],l=i.push
  .bind(i);i.push=r,i=i.slice();for(var a=0;a<i.length;a++)r(i[a]);var p=l;t()}([]);
  //# sourceMappingURL=runtime~main.229c360f.js.map</script><script src="/static/js/1.682b0dce.chunk.js"></script><script src="/static/js/main.afbb6237.chunk.js"></script></body>
  </html>

它还在底部显示了这些消息，我假设有某种堆栈跟踪，但我不知道在哪里可以找到问题：

- htmlparser.js:240 new HTMLParser
    [react-practice]/[html-minifier]/src/htmlparser.js:240:13

  - htmlminifier.js:966 minify
    [react-practice]/[html-minifier]/src/htmlminifier.js:966:3

  - htmlminifier.js:1326 Object.exports.minify
    [react-practice]/[html-minifier]/src/htmlminifier.js:1326:16

  - index.js:411 HtmlWebpackPlugin.postProcessHtml
    [react-practice]/[html-webpack-plugin]/index.js:411:34

  - index.js:246
    [react-practice]/[html-webpack-plugin]/index.js:246:27

但是，它确实生成了一个具有正确功能的构建，除非它没有我导入的任何CSS，所以我认为这就是问题所在。要使用CSS，我所做的就是

import './Styles.css‘(我也尝试使用require("./Styles.css')和删除所有样式表)

当我使用"npm“进行开发时，它工作得很好。任何帮助都将不胜感激！

当我从我的文件中删除所有CSS (和导入)时，它仍然会给出一个“解析错误”，并且它仍然生成一个index.html，我可以加载这个index.html，它是功能性的，但是没有任何样式设置(显然是因为我已经删除了所有CSS，但是它仍然给出了一个构建错误)。

我只是使用默认的配置创建与网络风暴，以创建一个反应应用。

Answer 1

我的问题是，我的index.html包含一个页眉和页脚div，它位于根div的上方和下面，用于进行响应。我已经重构了它，以便在我的App.js中创建页眉和页脚。我不知道我为什么要这么做，但现在起作用了。