seo Question posted in
Some basic information to get you started with this can be found here.

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

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:5

I 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')
);
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Actually, I ended up deploying it by deleting all node modules folders, doing what you said also, and reinstalling, this seemed to fix everything.


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search