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')
);
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
Actually, I ended up deploying it by deleting all node modules folders, doing what you said also, and reinstalling, this seemed to fix everything.
I was watching tutorials on React and tried copying an example, but for some reason nothing that I attempt is working. Here's the simple code:
index.html:
!DOCTYPE html>
<head>
<title>React Stuff</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="index.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<ul>
<li>Hello!</li>
<li>This is a</li>
<li>React practice!</li>
</ul>, document.getElementById('root'));
I installed react using npm install react react-dom and attempted to open the .html file, but nothing appears on the screen. I also tried moving the script to the or even putting it inside the <script>, but none of that worked.
Some of the features here rely on build tools to precompile the code as they are not natively supported.
For example jsx (HTML like syntax directly in JavaScript) would be compiled with Babel .
node_module package imports import React from 'react' without needing to reference the full url import React from '/node_modules/react/index.js' needs to be compiled with webpack (or a similar tool).
create-react-app is a great way to get started with all the required setup.
ReactDOM.render(<ul>
<li>Hello!</li>
<li>This is a</li>
<li>React practice!</li>
</ul>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
This works here. Can you reproduce your error in your question?
Does your project have a package.json?
If so does it have scripts, specifically a start script?
Then you need enter 'npm run start' in your console to compile the code and it should launch on localhost:3000.
Try following create-react-app
I am trying to use materialize-css in my React project. How can I set up materialize-css and use it's components with React ?
One can use https://github.com/react-materialize/react-materialize
npm install react-materialize
Add these to the default html page where you need Material Design.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="path/to/materialize.css">
</head>
<body>
<script src="path/to/materialize.js"></script>
<script src="path/to/your/bundle.js"></script>
</body>
</html>
Use the components.
import { Button, Card, Row, Col } from 'react-materialize';
Complete list and how to implement components are listed here: http://react-materialize.github.io
When debugging my React Application using Chrome / React Developer Tools, I see two instances of my Application. Has anyone experienced this? Is it actually rendering two instances or is it just a developer bug?
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
Is my entire App.js, with App having a single export.
I ran into the same issue when setting my react application up from scratch with babel and webpack.
I viewed page source from the browser and it turned out I included two script tags in the index.html file. I think that was because I included the first script tag manually referencing '/bundle.js'. When you run webpack dev server, it automatically includes it for you.
<!doctype html>
<head>
<meta charset="utf-8"/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
so make sure your index.html looks this way before you run webpack-dev-server
I am building an webapp using react native. I am very new to react native. I started to build an simple page but its give an error. I don't know where I did wrong.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js"></script>
<script src="scripts/header.js"></script>
</body>
</html>
The above screenshot is of header.js. Where I did wrong could not understand. Help me out for any silly mistake.
Thanks
Your file header.js contains JSX, which the browser doesn't understand.
You need to transform your JSX file into JS before attempting to load it in the browser.
One way to do this is to include browser.js (from Babel) and add the attribute type="text/babel" to your JSX script.
Other options include using a tool such as Webpack with a loader that can pre-process your JSX before sending it to the client.