I'm trying to learn React and Javascript. I try to understand how import and export works in ES6, so I put all three files index.html, index.js, and lib.js in the same folder. When I included index.js in my html file, it gave me the error
Uncaught TypeError: Failed to resolve module specifier "lib". Relative references must start with either "/", "./", or "../".
When I changed the name of index.js to index2.js, everything worked fine. I think the problem is that I was not supposed to put index.html and index.js in the same folder but I don't understand why. Can some please explain?
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">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<script type="module" src="./index.js"></script>
</body>
</html>
index.js
import {square} from './lib.js'
console.log(square(3))
lib.js
export function square(x){
return x*x
};
It errors when you link index.js because 2 files can not have the same not name as any other file in the folder even if they have different file extensions. This is why when you change the name to index2.js it does not error.
It's not really the files having the same name in the same folder as the webpage, I found that if you use Firefox instead of Chrome, the problem goes away.
Related
So I have a Vue app which I had tested with npm run dev and npm run build everything was going fine and working perfectly but then when I try to host on firebase and move all of the related folders into the public folder it doesn't seem to be able to read either the script tag in the index Html or the main.js folder that creates the Vue app so I just end up with a blank white screen with only a title and an icon in the tab no rest of the app or anything in router-view.
Heres the index.Html file
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<link rel="icon" href="/icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Web page title</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Heres the main.js which may also be the problem.
import { createApp } from 'vue'
import App from './App.vue'
import './style/index.css'
import router from '../src/router/index'
import { createPinia } from 'pinia'
import mongoose from 'mongoose'
createApp(App).use(router).use(createPinia()).mount('#app')
As I said it all worked okay through the builds and when I previewed it before hand but when I try to firebase serve in the terminal it only gets the title and the icon.png from the index.html page so it's either not reading it there or on the main.js because the app and router-view just don't show up anymore.
If anyone knows how to find out which one isn't working exactly or how to fix this so that it works I would greatly appreciate it, thanks.
I am trying to learn Three.js by starting with a Three.js tutorial that uses webpack. (You can find the tutorial repo here.) Everything works until I try to import the midi-player-js package I installed with npm. Nothing I try works. I've tried the require syntax, as well as the import * as syntax. Different errors are thrown, but the most common is that Player (one of the module's classes) cannot be found.
What is going wrong? How can I import npm packages with this setup?
My sample script.js file looks like this, right now:
import * as MidiPlayer from "midi-player-js"
const player = new MidiPlayer.Player(function(event) {
console.log("Ticked")
});
// Load a MIDI file
player.loadFile('PATH_TO_MIDI_FILE');
player.play();
Keep in mind that I've tried other import syntax's, though.
EDIT: Starter HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
</head>
<body>
<canvas class="webgl"></canvas>
</body>
</html>
this is my base html script
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head><title>React.js on Repl.it</title>
<link rel="stylesheet" href="/app.css">
</head>
<body>
<div id="asdf"></div>
<script src="/bundle.js"></script>
</body>
</html>
and it calls to the app.js, how do i make it call to a different file such as otherapp.js
Bundle.js calls to app.js
What you see in the HTML file is bundle.js which is the artifact that webpack creates.
If you use Create React App, open index.js. This file basically renders App to an element in your dom. In other words, it bootstraps your application. You can change App to OtherApp if you wish.
I'm new to Angular and recently I started working on a simple personal SPA project. It was created using the angular cli, and the folder structure is nothing special:
- myApp
----e2e
----node_modules
----src
--------app
------------ main app module with two .ts components and html for each of them
...
Everything works fine when I use ng serve: I can see my components on localhost:4200 and Angular's functionality works as a charm.
However, when I run ng build and from inside the newly created dist folder I open index.html, I can't see my components at all.
The index.html file is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RoutingDemo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
I get no errors in the console for missing files and all of the JS and CSS files are being successfully read by the index.html.
Can someone explain why am I not seeing the components?
So you need to serve your page, easiest way is to do npm i -g http-server and the run http-server from command lint in your dist folder, then you will be able to see your page
I've been using Webpack for some time, but it was a little bit too extensive for me.
That's why I wanted to start off with Parcel, to get the basics of bundling projects together.
Let us say I have a basic index.html file, which has a link to a JavaScript file.
Within this javascript file, I have a couple of dependencies imports.
It should look a little bit like this.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Helloo</h1>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
and script.js
import "../styles/sass/main.scss";
import is from "is_js";
const myString = "Hello World";
Now, when I bundle the index.html file using
parcel bundle index.html --public-url .
i would like to use chrome developer tools console to console (from the console) some javascript as e.g. myString
But because parcel bundles everything inside one function, this variable is not accessible and the console returns:
Uncaught ReferenceError: sections is not defined
at :1:1
How can i still debug my projects inside the console using parcel as a bundle processor?