yarn deploy [ gh-pages ] : error Command failed with exit code 1 - javascript

I'm trying to build my project which is working just fine with gh-pages, but I'm getting the following error when I try to use yarn deploy:
yarn deploy
yarn run v1.22.19
$ npm run build
> ji-oh--react#0.1.0 build
> react-scripts build
Creating an optimized production build...
Failed to compile.
Error: Parse Error: <script defer src=".""/static/js/main.cc97512a.js"></script><link href=".""/static/css/main.7a4eabc2.css" rel="stylesheet"></head>
<body>
<div id="root"></div>
<div id="overlay"></div>
<div id="animation"></div>
</body>
</html>
- htmlparser.js:255 HTMLParser.parse
[ji-oh--react]/[html-minifier-terser]/src/htmlparser.js:255:15
- task_queues:95 process.processTicksAndRejections
node:internal/process/task_queues:95:5
- htmlminifier.js:1282 async minify
[ji-oh--react]/[html-minifier-terser]/src/htmlminifier.js:1282:3
- htmlminifier.js:1365 async exports.minify
[ji-oh--react]/[html-minifier-terser]/src/htmlminifier.js:1365:16
error Command failed with exit code 1.
It seems like this error is being caused by something on my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://use.fontawesome.com/1ba47d38a3.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/regular.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<div id="overlay"></div>
<div id="animation"></div>
</body>
</html>
`

Related

linking external JS files in another folder in HTML

I am trying to link a javascript file to my html but its in another folder here's my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>PreFab Davao</title>
</head>
<body>
<script src="../src/pages/testing.js"></script>
<h1>testing</h1>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
the problem is it throws an error:
Uncaught SyntaxError: Unexpected token '<' (at testing.js:1:1)
the contents of testing.js is litteraly just console.log("TEST")

# (at) symbol in script link is causing exception

I am trying to add a link to .js file in Pages/_Layout.cshtml However I am getting following exception:
Severity Code Description Project File Line Suppression State Error
(active) CS0103 The name 'antv' does not exist in the current
context Blazing C:\Users\Laptop\source\repos\Blazing\Blazing\Pages_Layout.cshtml 31
_Layout.cshtml:
#using Microsoft.AspNetCore.Components.Web
#namespace BlazingDiary.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="BlazingDiary.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="https://unpkg.com/#antv/g2plot#1.1.28/dist/g2plot.js"></script>
<script src="_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
</body>
</html>
Problems is in this particular link https://unpkg.com/#antv/g2plot#1.1.28/dist/g2plot.js. Was googling for couple of hours without success. Any ideas?
This is solved in .net 6.
In .net 5 (and before) the razor engine appears to stick its nose where it doesn't belong. Luckily there is an easy fix, escape the # as ##:
<script src="https://unpkg.com/##antv/g2plot#1.1.28/dist/g2plot.js"></script>

ERR_FILE_NOT_FOUND in console but the app works correctly

In my app I get error message in console
GET chrome-extension://lncjpblllfcpljbdelleomhnlgdlhhmm/content/styles.css net::ERR_FILE_NOT_FOUND
after every new request, but in the same time I do not see any other issues and application seems to be running correctly. Currently I cannot look up any line in my code files where the styles.css file is mentioned (only App.css and all.css).
Why cannot this file be found and how can I fix it?
Here is an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Welcome to DevConnector!</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

Angular 7 add custom src for script tag

I am using angluar cli to build my app.
Currently its building the app in dist folder
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Admin</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.aa8ce79f832f8715c04d.css"></head>
<body>
<app-root>
</app-root>
<script type="text/javascript" src="runtime.d981c7f14a84cffbe02a.js"></script><script type="text/javascript" src="polyfills.c914ea4c8f6edd6e6f45.js"></script><script type="text/javascript" src="scripts.b5ea1a3cf9f89977f873.js"></script><script type="text/javascript" src="main.ebfc576e2cbf5f6d553e.js"></script></body>
</html>
I would like to customize all src path to have /app appended & look like:
<script type="text/javascript" src="/app/runtime.d981c7f14a84cffbe02a.js"></script>
Is there any way to achieve this?
You can use the deploy-url parameter when building your app
ng build --prod --deploy-url /app/
You want to prepend rather than append.
Try changing your base href value so that all relative paths start from the app folder
From:
<base href="/">
To:
<base href="./">

Include dynamic JSON data in Angular7 app

I am using both ng serve --watch and ng build --watch. With ng build, it will use my index.html file, but with ng serve, it seems to ignore it.
Right now, I am rendering some dynamic JSON in the index.html file like so:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ApiApp</title>
<base href="<%=base%>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
const appData = JSON.parse('<%=json%>');
</script>
<app-root></app-root>
</body>
</html>
the above works with ng build but not ng serve, since ng serve doesn't seem to incorporate this file.
Is there a better way to send dynamic JSON to an Angular7 app when the app is first loaded? My server can render the JSON to the index.html in production, but during development with ng serve, it's not working so well.
For now I just abandoned ng-serve, and just use ng build --watch, and then use static-server (an npm CLI tool), like so:
"static-server": "cd dist/my-app && static-server --index index.html"
and my index.html looks like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ApiApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
</head>
<body>
<script type="text/javascript">
define('app-data',() => {
console.log('retrieving app-data...');
let val = null;
try{
val = JSON.parse('<%=json%>')
}
catch(err){
val = {routes: [1,2,3,4,5].map(v => ({val:v}))};
}
return {
value: val
}
});
</script>
<app-root></app-root>
</body>
</html>
requirejs allows me to easily load dynamic code, haven't figured out how to do that with Angular yet.

Categories