React boilerplate doesn't load js files in the index.html - javascript

I'm testing React-boilerplate and I'm trying to load some javascript files in the app/index.html file:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<script type="text/javascript" src="myJScriptFile1.js"></script>
<script type="text/javascript" src="myJScriptFile2.js"></script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<!-- The app hooks into this div -->
<div id="app"></div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>
This is the default index.html file. I'm running it with npm or yarn and the server console shows me no error, but my browser console keeps telling me:
Uncaught SyntaxError: Unexpected token <
Just like this, there is no more error. These javascript files work fine because I'm using them into another React based project, and I'm calling them into the index.html file as well. The console prints that error per file. If I trace the error it leads me to the correspond .js file.
After almost a week searching the web I couldn't find a solution. So that's it, does anybody have any idea on how to solve this?

Well, I'm answering myself. I needed a little bit more of research in webpack. I achieve this through webpack:
installed npm i add-asset-html-webpack-plugin -D
then, in the webpack config file, under plugins I added:
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })
and that's it.

Related

i want to integrate trading view library in my project but this error comes

I am getting this error
TypeError: Cannot read properties of undefined (reading 'UDFCompatibleDatafeed')
Import these two script in index.html /public folder
<script src="%PUBLIC_URL%/datafeeds/udf/dist/polyfills.js"></script>
<script src="%PUBLIC_URL%/datafeeds/udf/dist/bundle.js"></script>
i deleted my project and cloned their project and then i followed those mention steps then its run
i figured out the problem later
so in our on project i we missed two script in index.html then it will give this error on running so clone the project and then follow the mention step for your specific framework or library
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="%PUBLIC_URL%/datafeeds/udf/dist/polyfills.js"></script>
<script src="%PUBLIC_URL%/datafeeds/udf/dist/bundle.js"></script>
<title>Charting Library React Demo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>

Vuejs loading CSS and JS files giving MIME type error

I have created a new vue-webpack project. when I want to add CSS and js files through link and script it gives me this error The stylesheet http://localhost:8080/src/assets/styles.css was not loaded because its MIME type, “text/html”, is not “text/css”.
and for js files, it gives this error Uncaught SyntaxError: expected expression, got '<'
I have included them inside index.html file.
I used to work like this, but now at this time, I am facing this.
css file:
body {background:black;}
js file:
console.log('hello world')
index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>myapp</title>
<link rel="stylesheet" href="./src/assets/styles.css">
</head>
<body>
<div id="app"></div>
<script src="./src/assets/form.js"></script>
</body>
</html>
First, I strongly suggest you stop using the old Vue CLI v2 and update to the latest version
npm install -g #vue/cli
If you want to include some extra JS, CSS or other files that are not part of the Webpack bundle, you need to move them into the public folder
- public
- index.html
- favicon.ico
- form.js
- styles.css
and reference them like this
<link rel="stylesheet" href="<%= BASE_URL %>styles.css">
<script src="<%= BASE_URL %>form.js"></script>
See https://cli.vuejs.org/guide/html-and-static-assets.html
Importing the assets from main.js solved the problem.

How does a Vue app get launched if the index.html doesn't load any javascript?

None of the resources I've read about Vue attempt to explain how a Vue application is launched.
There are three files involved: public/index.html, src/main.js, and src/App.vue. A scaffold created with vue cli 4.1.1 contains this index.html which apparently is the entry point:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sample-vue-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample-vue-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The main.js file creates the Vue App itself, but the index.html doesn't load main.js. If I double click on index.html I get a blank page, so something else has to intervene to launch the App. The comment in index.html says that files will be auto injected, but what does that injection?
Is the Vue launch process documented somewhere?
The Vue Cli handles the injection when you are developing locally as your run command will be something like npm run serve for default configurations.
When you get round to putting the code into production you'll end up running a different command npm run build which will create a new set of files where the index.html file will include a script tag that references all your javascript code. Under the hood it uses webpack to do all the asset linking.
See the Vue Cli website for more details.

Don't understand project structure of Vue project created with vue-cli

I am new to Vue.js and have never used a frontend framework before.
I created a project using the "vue create" command with the usual plugins and everything (nothing game changing), and everything worked fine.
I wanted to start from 0, so I removed everything but the index.html file in the public directory, the main.js file in the src directory and the configuration files(see below).
Now when I load the page you can see "Test" and "{{message}}" for an instant and then it disappears leaving the page completely blank.
So my question is, how is the main.js file connected to the index.html file. I know from webpack that you need an entry point and link everything from there, but i cannot find such thing here, as main.js doesn't include index.html. So why doesn't my code work as intended? I want it to say Hello World.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>Vue Getting Started</title>
</head>
<body>
<noscript>
<strong>
We're sorry but vue_getting_started doesn't work properly without
JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app">
<h1>Test</h1>
<h1>{{ message }}</h1>
</div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
import Vue from 'vue'
const app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
Where you see the line
<!-- built files will be auto injected -->
is where webpack will inject a script tag that loads the bundled javascript, you should be able to see that when you use the devtools. This is where your main entry chunk is being loaded. However, this only happens if webpack is actually doing its job either by running the dev server or by creating a production bundle.
If by "when I load the page" you mean opening up the index.html file in your browser, this won't do much. You will need to run webpack, in the newer versions of the vue cli you can do that by navigating to the root folder and running vue-cli-service serve

ReactDOM.render() query

I have started to build a demo project after learning React from some online tutorials.
Please consider the line of code below from a ReactComponent.
ReactDOM.render(<Home/>, document.getElementById('container'));
This renders the React component Home at the target DOM element container. All the tutorials online showed that this renders it in some index.html file. How does the code know, in which HTML(document) file to find the DOM element container. Below is the screenshot of the error I am getting.
Below is my index.html which is the default one from scaffolding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
With React, as all JavaScript, it's loaded into the file via an HTML file (i.e., the HTML file comes first). Your JavaScript is usually imported with a <script> tag. It's that HTML file currently open in the browser that it should look in.
So, you should have something like this for your HTML file, which you open in the browser:
<!DOCTYPE html>
<head>
<script src="./src/Home.js"></script>
<body>
<div id="container"></div>
Opening that, assuming the JS path is correct, should work fine.

Categories

Resources