I had downloaded two javascript libraries throw this command
$ npm install --save vanta three
vanta.js and three.js , vanta has cool animation that makes your website look nice. I follow some tutorial and I wrote every line same as in the tutorial two of these lines are
import * as THREE from "three";
import BIRDS from "vanta/dist/vanta.birds.min";
this gives me an error:
Uncaught TypeError: Error resolving module specifier "name of the module" Relative module specifiers must start with “./”, “../” or “/”.
I was surprised how they wrote code that is not working so I google it , solution is to write the whole path like:
import * as THREE from "./node_modules/three/build/three.js";
import BIRDS from "./node_modules/vanta/dist/vanta.birds.min.js";
The THREE.js error is gone but the pain comes with vanta.js error:
Uncaught SyntaxError: ambiguous indirect export: default
I look on the internet for this I didn't find anything that helps me with this problem and I don't know why this happen, I follow every step in these tutorials but it work for them not me :_(
import * as THREE from "./node_modules/three/build/three.js";
import BIRDS from "./node_modules/vanta/dist/vanta.birds.min.js";
const root = document.getElementById("root");
BIRDS({
el: root,
THREE,
});
<!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="stylesheet" href="css.css" />
<title>VANTA</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="js.js"></script>
</body>
</html>
Related
This question is being asked after spending weeks and giving up multiple times on trying to solve this.
I'm developing a VSCode extension that needs to make use of the Webview API. For a while, this could be using Svelte, but now with SvelteKit released as stable and being treated as default when you do npm create svelte, I targetted to use that. After configuring the app to be static SPA with SSR turned off and using the #sveltejs/adapter-static, it seems that serving it is not the same as it was with vanilla Svelte.
This is the svelte.config.js:
import adapter from '#sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
/**
* Consult https://github.com/sveltejs/svelte-preprocess
* for more information about preprocessors
*
* #type {import('#sveltejs/kit').Config} */
export default {
preprocess: preprocess(),
kit: {
adapter: adapter({ fallback: 'index.html' }),
// ssr: false, // deprecated
csp: {
directives: {
'default-src': ['none'],
'img-src': ['{{cspSource}} https:'],
'script-src': ['{{cspSource}}'],
'style-src': ['{{cspSource}}'],
},
},
// paths: {
// base: '{{baseURL}}', // not accepted
// },
},
};
This is the built HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-security-policy" content="default-src 'none'; img-src {{cspSource}} https:; script-src {{cspSource}} 'sha256-N2DRY+AREasGSTE5X4BdHoEYZsaGOpTvUwTBIHmryVA='; style-src {{cspSource}}">
<link rel="modulepreload" href="/_app/immutable/start-e16b6a0f.js">
<link rel="modulepreload" href="/_app/immutable/chunks/index-0576dc7c.js">
<link rel="modulepreload" href="/_app/immutable/chunks/singletons-51070258.js">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">
<script type="module" data-sveltekit-hydrate="45h">
import { start } from "/_app/immutable/start-e16b6a0f.js";
start({
env: {},
paths: {"base":"","assets":""},
target: document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode,
version: "1672682689612"
});
</script></div>
</body>
</html>
Contrary to vanilla Svelte that would generate something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width" />
<script src="/dist/app/main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
That could be served through Webview like:
function getWebviewContent(webview, context) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="${[
"default-src 'none'",
`img-src ${webview.cspSource} https:`,
`script-src ${webview.cspSource}`,
`style-src ${webview.cspSource}`,
].join(';')};"
/>
<title>My Extension</title>
<script type="module" crossorigin src="${webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/app/main.js')
)}"></script>
<link rel="stylesheet" href="${webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/app/style.css')
)}">
</head>
<body><div id="app"></div></body>
</html>
`;
}
The file is bit more complex now, so I can't (and shouldn't) try to rewrite it in this function.
The following are the conditions:
VSCode needs absolute paths since it has different environments and protocols. Keep in mind that an extension is served locally to every user. (context.extensionUri is IMPORTANT)
SvelteKit has its set of configurations (different from Vite) that may pose to be restrictive specially with SPA mode.
Content Security Policy for Webview is also restrictive to what and what can't be used.
Probably due to Vite, the file names have hashes, so it's not consistent - but I'm preferring to keep that.
The script block in the HTML (may also need a nonce) is importing the start function relatively as a module.
Instead of writing another template as a string for VSCode that would need to be maintained, it would be ideal to have the generated HTML read into VSCode and served. Using Mustache seems good (hence you see {{cspSource}} in the HTML above).
How would one suggest to architecture and integrate this?
I have been studying typescript.
I am encountering the below error while studying node modules.
Clicking on the anonymous function take me to the below code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning TypeScript</title>
<script src="node_modules/systemjs/dist/system.js"></script>
</head>
<body>
<script>
System.import('app.js')
</script>
</body>
</html>
Here is the link to my demo project
If you are using newest version of SystemJS. You have to make some change:
index.html: use System.import('./app.js') instead of System.import('app.js') // hmm
tsconfig.json: use "module": "system" instead of "module": "commonjs".
app.ts: use import { PI, calculateCircumference } from "./maths/circle.js"; instead of import { PI, calculateCircumference } from "./maths/circle"; // hmm
(I can not find a way to config baseUrl or defaultExtension)
Run tsc command to rebuild app.js file before you reload html page on browser.
I would like to statically serve a project, that uses webcomponents (using lit-html), without any packaging tools like webpack etc.
The example project is composed of this structure:
index.html
app.js
package.json
package.json:
{
"name": "lit",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#webcomponents/webcomponentsjs": "^2.2.7",
"lit-element": "^2.0.1"
}
}
app.js:
import { LitElement, html } from 'lit-element';
class FooElement extends LitElement {
render() {
return html`<div>hello world!</div>`;
}
}
window.customElements.define('x-foo', FooElement);
and finally, 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></title>
<script src="app.js" type="module"></script>
</head>
<body>
<x-foo></x-foo>
</body>
</html>
I serve this using a static http server and, of course, this doesn't work. The browser raises the error: Error resolving module specifier: lit-element.
So we try altering the import directive to:
import { LitElement, html } from './node_modules/lit-element/lit-element.js';
The browser then fails with: Error resolving module specifier: lit-html in lit-element.ts:14:29
I've tried using systemjs version 3.0.1 with the following modified 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></title>
</head>
<body>
<script type="systemjs-importmap" src="systemjs.map.json"></script>
<script src="./node_modules/systemjs/dist/system.min.js"></script>
<script>
System.import('app');
</script>
<x-foo></x-foo>
</body>
</html>
and a systemjs.map.json file:
{
"imports": {
"app": "./app.js",
"lit-element": "./node_modules/lit-element/lit-element.js",
"lit-html": "./node_modules/lit-html/lit-html.js"
}
}
When loading this (again via a static webserver), we get in Firefox:
import declarations may only appear at top level of a module at app.js:1.
In Chrome:
Uncaught SyntaxError: Unexpected token { at app.js:1
In Safari:
Unexpected token '{'. import call expects exactly one argument. at app.js:1
All of which suggests that systemjs isn't treating app.js as a module.
Is there anyway that we can achieve static loading of modules that have a dependency tree within node_modules?
I've pushed the version of the code with systemjs to https://github.com/dazraf/lit-test.
Thanks.
You can perhaps use something like this in your app.js
import {LitElement, html} from 'https://unpkg.com/#polymer/lit-element/lit-element.js?module';
And this in your HTML code
<script type="module" src="./app.js">
It worked for me. If you don't want to use unpkg you can download it and serve it locally.
We have a server that does just this, and only this: https://open-wc.org/developing/owc-dev-server.html
It's simple server that does the minimal amount of work required and is specifically designed to work with the native es module loader available in all major browsers.
In the future, this should no longer be necessary when import maps are standardized.
Allow me to blow your mind. Difficult to find, a coworker actually found it.
https://codewithhugo.com/use-es-modules-in-node-without-babel/webpack-using-esm/
In the server side it renders fine, but when it gets to the client side the react part of html vanishes and I get this error:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <noscript data-reacti
(server) <div data-reactid=".z
this is my client code before compression:
import {Router, RouterContext, browserHistory} from "react-router";
import React from "react";
import ReactDOM from "react-dom";
const innerHTML = document.getElementById('react-routes').innerHTML;
const routes = JSON.parse(innerHTML);
console.log(routes);
// ReactDOM.render(<RouterContext {...routes} />, document.getElementById('react-app'));
ReactDOM.render(<Router>{routes.routes}</Router>, document.getElementById('react-app'));
// Router.run(routes, Router.HistoryLocation, function (Handler) {
// React.render(<Handler/>, document.getElementById('app'));
// });
I've tryed this three methods the two firsts gives the same error and the third says that Router.run is not a function. (the third was what I had working a few version ago)
the HTML generated by the server is this:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="react-app"><div data-reactid=".1rbyhm4ruo0" data-react-checksum="-854297298"><span data-reactid=".1rbyhm4ruo0.0">Hello </span><span data-reactid=".1rbyhm4ruo0.1">BLBALBLABA LUIZ</span><div data-reactid=".1rbyhm4ruo0.2"><input type="text" value="Login" data-reactid=".1rbyhm4ruo0.2.0"><span data-reactid=".1rbyhm4ruo0.2.1">Hello </span><span data-reactid=".1rbyhm4ruo0.2.2">Login</span></div></div></div>
<script id="react-routes" type="application/json">{"routes":[{"name":"public","path":"/","childRoutes":[{"name":"login","path":"/login"}]},{"name":"login","path":"/login"}],"params":{},"location":{"pathname":"/login","search":"","hash":"","state":null,"action":"POP","key":"zc9mx1","query":{},"$searchBase":{"search":"","searchBase":""}},"components":[null,null],"history":{},"router":{"__v2_compatible__":true},"matchContext":{"history":{},"transitionManager":{},"router":{"__v2_compatible__":true}}}</script>
<script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
<script src="/public/js/bundle.js"></script>
</body></html>
and after the client runs it becames this:
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="react-app"><noscript data-reactid=".zhdkkenpq8"></noscript></div>
<script id="react-routes" type="application/json">{"routes":[{"name":"public","path":"/","childRoutes":[{"name":"login","path":"/login"}]},{"name":"login","path":"/login"}],"params":{},"location":{"pathname":"/login","search":"","hash":"","state":null,"action":"POP","key":"qbhof0","query":{},"$searchBase":{"search":"","searchBase":""}},"components":[null,null],"history":{},"router":{"__v2_compatible__":true},"matchContext":{"history":{},"transitionManager":{},"router":{"__v2_compatible__":true}}}</script>
<script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
<script src="/public/js/bundle.js"></script>
</body></html>
I'm using the same method to renderToString() in the server.
Thanks
My problem was actually in gulp while browserifying the project.
As I'm creating dynamic routes to react-router, I don't have all the react classes being imported while gulp is running and it don't add the right packages to my bundle.js.
I want to make it fully dynamic, I'll keep on working on a better solution for this problem, but for the time being I could make it run by bundling *.react.js.
I finally after hours made my Webpack, React & Babel build setup, but when I try to just run a simple render Hello World it doesn't output anything in the DOM.
Here is my code.
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('content')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="bundle.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
And when I watch my bundle.js I can see it imports all the React & ReactDOM I need to run the render.
The test I'm running is from: https://facebook.github.io/react/docs/getting-started.html.
Getting this console error: Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
Your bundle.js file is being loaded before the DOM has had time to load. This means that it won't be able to find your <div id="content"> when you have asked for it.
Try putting the script loader before the end of the body.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
When browsers find a <script> tag, they pause execution while they download the file. This means that your DOM has only partially rendered when your bundle.js script begins executing. So you would have essentially been passing undefined to the ReactDOM.render method.
If you have not had this issue in the past, perhaps you have been using the jQuery.ready event handler, which waits for the DOM to be loaded before executing.
bundle.js is executed when the content element isn't yet parsed an created. Just move your script element to the end of the markup.