部署新 React 应用程序时出错 - HTML、index.js 问题？

Question

好的，女士们先生们，我向你们展示了我为潜在雇主推出我的第一个 React 网络应用程序组合的经历：创建优化的生产构建... 编译失败。

Creating an optimized production build...
Failed to compile.

Error: HTML-webpack-plugin could not minify the generated output.
  In production mode the html minifcation is enabled by default.
  If you are not generating a valid html output please disable it manually.
  You can do so by adding the following setting to your HtmlWebpackPlugin config:
  |
  |    minify: false
  |
  See https://github.com/jantimon/html-webpack-plugin#options for details.
  For parser dedicated bugs please create an issue here:
  https://danielruf.github.io/html-minifier-terser/
  Parse Error: <meta name="description" content="This is the portfolio Website of mine. Made with ReactJS and love. Austin Spraggins spragginsdesigns.github.io>
      <meta name=" author" content="Austin Spraggins | Shadow Gaming LLC">
      <meta name="keywords"
        content="HTML, CSS, Javascript, ReactJS, NodeJS, SEO, Coding, Portfolio, Resume, Website, Profile, Github, Linkedin, Design, Interactive, CV, Skills">
      <meta name="robots" content="index, follow">
      <meta name="og:title" content="Austin Spraggins Portfolio">
      <meta name="og:type" content="Resume and Portfolio Website and Web Application for Austin Spraggins">
      <meta name="og:locale" content="en_IN">
      <meta property="og:image" content="/favicon-16x16.png">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
        integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
      <link rel="stylesheet" href="./Bootstrap5.css">
      <script src="https://kit.fontawesome.com/9b271ff51f.js" crossorigin="anonymous"></script>
        <!-- Load React. -->
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
        <!-- Load our React component. -->
        <script src="like_button.js"></script>
      <title>Spraggins Designs</title>
    <link href="/static/css/2.7fc9bc2b.chunk.css" rel="stylesheet"><link href="/static/css/main.76d0dcb1.chunk.css" rel="stylesheet"></head>
    <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
    <script>!function(e){function r(r){for(var n,l,f=r[0],i=r[1],p=r[2],c=0,s=[];c<f.length;c++)l=f[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in i)Object.pr  ototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(a&&a(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,f=1;f<t.length;f+  +){var i=t[f];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.ex  ports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag  &&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&  e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind  (null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(  e,r)},l.p="/";var f=this.webpackJsonpportfolio=this.webpackJsonpportfolio||[],i=f.push.bind(f);f.push=r,f=f.slice();for(var p=0;p<f.length;p++)r(f[p]);var a=i;t()}([]);
  //# sourceMappingURL=runtime-main.55f81643.js.map</script><script src="/static/js/2.48262e0e.chunk.js"></script><script src="/static/js/main.f53dd3d9.chunk.js"></script></body>
    <script>
      const darkPref = window.matchMedia("(prefers-color-scheme: dark)");
      if (darkPref.matches && localStorage.getItem('mode') !== "Light")
        localStorage.setItem('mode', 'Dark')
    </script>
    <script>
      const fun = () => {

  - index.js:429 HtmlWebpackPlugin.postProcessHtml
    [spragginsreactportfolio]/[html-webpack-plugin]/index.js:429:40

  - index.js:254
    [spragginsreactportfolio]/[html-webpack-plugin]/index.js:254:25

  - task_queues:93 processTicksAndRejections
    node:internal/process/task_queues:93:5

几周来我一直在编写这个庞大的产品组合，当我部署它时，我的噩梦就开始了。我希望并祈祷你们能帮助或指导我找到解决方案。如果需要任何进一步的代码，请告诉我。谢谢。

编辑 - 这是 index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './styles/style.css'
import './styles/images.css'
import './styles/no-touch.min.css'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

内容末尾没有结束符 "

Parse Error: <meta name="description" content="This is the portfolio Website of mine. Made with ReactJS and love. Austin Spraggins spragginsdesigns.github.io>

试试这个？

Parse Error: <meta name="description" content="This is the portfolio Website of mine. Made with ReactJS and love. Austin Spraggins spragginsdesigns.github.io">

按照以下答案：

Answer 2

实际上，我最终通过删除所有节点模块文件夹来部署它，也按照您所说的进行操作，然后重新安装，这似乎可以解决所有问题。

部署新 React 应用程序时出错 - HTML、index.js 问题？

Error While Deploying New React App - HTML, index.js the problem?

reactjs

npm

compiler-errors

web-deployment