Alright, ladies and gentlemen, I present to you the bain of my existence launching my first React web app portfolio for potential employers: Creating an optimized production build... Failed to compile.
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:5I have been writing this gigantic portfolio for several weeks, and when I deploy it, my nightmare begins. I hope and pray you guys can help or guide me to the solution. If any further code is needed, let me know. Thank you.
Edit - this is 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')
);
CodePudding user response：
You don't have a closing " at the end of content
Parse Error: <meta name="description" content="This is the portfolio Website of mine. Made with ReactJS and love. Austin Spraggins spragginsdesigns.github.io>
try this?
Parse Error: <meta name="description" content="This is the portfolio Website of mine. Made with ReactJS and love. Austin Spraggins spragginsdesigns.github.io">
followed the answer from this:
Not able to create an optimized build for my React app in the build folder
CodePudding user response：
Actually, I ended up deploying it by deleting all node modules folders, doing what you said also, and reinstalling, this seemed to fix everything.