无法生成 webapp 的构建版本

Question

When I try to run 'npm run build' it gives me a parse error but does not specify where the problem is.

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>

It also shows these messages at the bottom, I presume a stack trace of some kind but I don't know where to find the problem:

- 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

However, it does produce a build that has the correct functionality, except it does not have any of my imported CSS, so I assume that is the problem. To use CSS all I have done is

import './Styles.css' (I have also tried with require("./Styles.css') and with removing all the stylesheets)

It worked fine when I was developing using "npm start". Any help would be appreciated!

It still gives a "parse error" when I remove all the CSS (and imports) from my files, and it still produces an index.html that I can load which is functional, but with no styling whatsoever (obviously because I have deleted all my CSS, but it still gives a build error)

I am only using the default configuration created with webstorm to create a react application.

Answer 1

My problem was that my index.html included a header and footer div above and below my root div for react. I have refactored it so the header and footer are created in my App.js. I have no idea why I need to do this but it works now.