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>
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.
When I try to use the framework I am seeing this error in the browser:
Failed to resolve module specifier "#lit/reactive-element"
In my html thymeleaf template I have:
<script type="module" th:src="#{/js/simple-greeting.js}"></script>
and in the simple-greeting.js I am referencing the lit framework like:
import {html, css, LitElement} from '/webjars/lit/index.js';
the "simple-greeting.js" is included with my static js. And the Lit dependency is included as a webjar.
I feel like I'm missing something fundamental (hopefully simple) with how the JS frameworks import/export modules. Is there some sort of build process I need to do to leverage the JS framework? (I really hope not)
To solve that problem, you’ll need a new tool called import maps.
The following html page should be able to load
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="importmap">
{
"imports": {
"lit": "/webjars/lit/index.js",
"#lit/reactive-element": "/webjars/lit__reactive-element/reactive-element.js",
"lit-html": "/webjars/lit-html/lit-html.js",
"lit-element/lit-element.js": "/webjars/lit-element/lit-element.js"
}
}
</script>
<script type="module">
import {LitElement, html, css} from 'lit';
console.log(LitElement);
</script>
</head>
<body>
</body>
</html>
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.
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?
I installed jquery with NPM and I'm trying to incorporate it into an existing webpage.
In the console I see the following error:
In my code, I have a skeleton like this:
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<link rel='stylesheet' type = 'text/css' href='css/' />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<script type='text/javascript' src='node_modules/jquery/src/jquery.js'></script>
<script type= 'text/javascript' src='javascript/script.js'></script>
</body>
</html>
Looking into the file itself and the error in the console, I see the following reflected both ways:
I'm not very familiar with define statements but from what I've seen crawling up and down google. It looks like I need to install a bundler like webpack?
But I feel like that's unneccessary for simply adding jQuery to a project without a cdn.
Am I barking up the wrong tree? Or is this a common issue?
Using npm install jquery is how you use jquery with node.js on the server itself.
It doesn't sound like that's what you're trying to do - rather that you want to use it on a webpage that is being served locally by your node server. To do that, download jQuery manually and include it in your sites file structure.
- index.html
- /scripts
- jquery-3.2.1.min.js
Then in your HTML reference it locally:
<script src="scripts/jquery-3.2.1.min.js"></script>