I've copied/pasted the code from lit.dev's playground page to troubleshoot and attempt to get Lit running in VS Code before working on my own project. I was able to troubleshoot most of my issues and finally got it to run correctly, but it seems that the custom element 'simple-greeting' is simply not rendering upon launch.
Here's my html:
<!DOCTYPE html>
<head>
<script type="module" src="./app.js"></script>
</head>
<body>
<simple-greeting name="World"></simple-greeting>
</body>
Here's my js:
import {html, css, LitElement} from 'lit';
export class SimpleGreeting extends LitElement {
static styles = css`p { color: blue }`;
static properties = {
name: {type: String},
};
constructor() {
super();
this.name = 'Somebody';
}
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
customElements.define('simple-greeting', SimpleGreeting);
Here's my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"file": "${workspaceRoot}/index.html"
}
]
}
Here's my jsconfig:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"experimentalDecorators": true,
"allowJs": true
},
}
And finally, here's my package.json:
{
"name": "epigraph_tictactoe",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Cameron Crane",
"license": "ISC",
"type": "module",
"dependencies": {
"common-js": "^0.3.8",
"lit": "^2.2.0",
"ts-node": "^10.7.0"
}
}
Why won't my custom element render? Chrome itself launches, but the page is blank unless I add another test component like <p>Hello, World!</p>, which seems to work just fine.
Had a similar issue with a different project and it looks like the issue was that I was either running my code through the Live Server extension on VS Code, or I was not running a web server at all.
Starting a web dev server using this seemed to fix the issue.
Related
so I was following this https://webpack.js.org/guides/author-libraries/ from the web pack documentation, my file is just slightly different. No matter how I try to do this, I get various problems.
in my src/index.js file I have a simple function for example.
const Dinero = require('dinero.js')
export function calculateGrossRev(hudmonthly){
// Calculates the yearly gross rev
const hudonebr = Dinero({amount: hudmonthly, currency: 'USD'})
.multiply(12);
return hudonebr.getAmount();
}
In my package.json file I have.
{
"name": "library",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"dinero": "^1.0.1",
"lodash": "^4.17.21",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"dinero.js": "^1.9.0"
}
}
In my webpack config file I have.
const path = require('path');
module.exports = {
mode: "development",
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'dinero-calc.js',
library: {
name: "dineroNumbers",
type: "umd",
},
},
};
when I run "npm run build", I get the big bundled file, all looks well to me.
I then have an index.html file I run with Live Server in VScode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
</head>
<h1>TEST</h1>
<script src="./dinero-calc.js"></script>
<script>
console.log(window.dineroNumbers.calculateGrossRev(8200));
</script>
<body>
</body>
</html>
With the simple example from the docs I'm able to get the expected output from their expected function printed to the console, however with my imported function it says
index.html:11 Uncaught TypeError: Cannot read property 'calculateGrossRev' of undefined at index.html:11
I think a problem is in the script source url <script src="./dinero-calc.js"></script>. Please, check paths of index.html and dinero-calc.js.
According to your script tag, they should be in the same directory under dist folder.
[Upd]
First, install dinero.js which used in src/index.js.
npm i dinero.js
Also, dinero should be placed in dependencies, not devDependencies, because dinero.js used in your code.
Second, call function like this
Dinero.default({
amount: hudmonthly,
currency: "USD",
}).multiply(12);
I was humming along in a TypeScript Data Viz project and thought I'd use the p5.js noise function to save some time. Instead I've encountered a problem that I can't fully understand. There seems to be something different with the p5 module compared to d3 and three.js I'm using in the project. Breaking it down to the very basic elements, I need some help interpreting what's going on with this module.
import * as p5 from "p5"
p5.noise()
// Returns the error:
// Property 'noise' does not exist on type 'typeof import("/Users/.../ts-node-server/node_modules/#types/p5/index.d.ts")'. ts(2339)
If I try to use the function directly I get a different error.
import { noise } from "p5"
// Returns the error:
// Module '"p5"' has no exported member 'noise'.ts(2305)
I dug down into the node_modules and confirmed everything is there. Researching the problem, I noticed other packages had this same error, but all the offered solutions were very specific to the package and project, and when applied did not fit my issue or resolve my problem. I suspect this has something to do with global.d.ts file but nothing looked out of place when I looked. If there are any suggestions on what is happening I will take them.
//Package.json
{
"name": "ts-node-server",
"version": "1.0.0",
"description": "project",
"main": "build/server.js",
"scripts": {
"compile": "tsc && node build/server.js",
"dev": "./node_modules/nodemon/bin/nodemon.js -e ts --exec \"npm run compile\""
},
"author": "..",
"license": "ISC",
"dependencies": {
"d3": "^6.6.2",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"p5": "^1.3.1",
"three": "^0.127.0"
},
"devDependencies": {
"#types/d3": "^6.3.0",
"#types/three": "^0.127.1",
"#types/express": "^4.17.11",
"#types/node": "^14.14.37",
"#types/p5": "^0.9.1",
"nodemon": "^2.0.7"
}
}
//tsconfig.json
{
"compilerOptions": {
"outDir": "./build",
"rootDir": "./src",
"module": "commonjs",
"moduleResolution": "node",
"noEmit": false,
"esModuleInterop": true,
"strict": true,
"target": "ES6"
},
"include": ["src/**/*"],
"exclude": ["**/node_modules", "**/config", "**/build", "**/*.md"]
}
If you must run p5.js functions in a Node.js application written in typescript, here's one way to do it:
Add npm dependencies: p5, window, canvas
Add npm devDependencies: #types/p5
Inject certain JSDOM window properties into the global scope: window, document, screen, navigator
Note: This works for the noise function, but I have no idea what the behavior of any functions that actually attempt to create or draw to a canvas would be.
Here's a working example in Repl.it.
Here's my package.json:
{
"name": "p5js-test",
"version": "1.0.0",
"description": "Test p5.js Node.js app.",
"scripts": {
"p5js-test": "ts-node --files src/main.ts",
"compile": "tsc"
},
"bin": {
"p5js-test": "./build/src/main.js"
},
"author": "Paul Wheeler",
"license": "MIT",
"dependencies": {
"canvas": "^2.7.0",
"p5": "^1.3.1",
"window": "^4.2.7"
},
"devDependencies": {
"#types/node": "^15.0.1",
"#types/p5": "^0.9.1",
"ts-node": "^9.1.1",
"typescript": "^4.2.4"
}
}
And here's my main.ts:
import Window from 'window';
// globals expected to exist by p5js (must come before the import)
// Note: doing this may not be entirely kosher according to the JSDOM documentation
// but it gets p5.js working
(<any> global).window = new Window();
(<any> global).document = global.window.document;
(<any> global).screen = global.window.screen;
(<any> global).navigator = global.window.navigator;
import p5 from 'p5';
const inst = new p5(p => {
// I'm not totally sure this is actually needed
p.setup = function() { };
});
console.log('using noise from instance: ' + inst.noise(1, 2, 3));
I am trying to create a web game using webGL, TypeScript and node.
I have a file structure that currently looks like this
> node_modules
> src
engine.ts
webgl.ts
index.ts
index.html
package.json
engine.ts looks like this:
namespace EngineSpace {
export class Engine {
// ....
}
}
and webgl.js:
namespace EngineSpace {
export class WebGLUtil {
// ....
}
}
and index.js
window.onload = function() {
let engine = new EngineSpace.Engine();
engine.start();
}
However when I run npm start, I get that src/index.ts:5:22 - error TS2304: Cannot find name 'EngineSpace'..
I am not sure why it cannot resolve this namespace. Given that I am trying to create a game, how should I have this set up / what would be best practices?
below is the package.json: file
{
"name": "typescript-engine",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "npm run build:live",
"build": "tsc -p .",
"build:live": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"devDependencies": {
"#types/node": "^12.11.1",
"nodemon": "^1.19.4",
"ts-node": "^8.4.1",
"typescript": "^3.6.4"
}
}
here is the tsconfig:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": ["es6","dom"],
"outDir": "lib",
"rootDir": "src",
"strict": false,
"esModuleInterop": true,
"resolveJsonModule": true
}
}
If you want to use namespace in nodejs side you need to export it also to use it in another module. Becuase namespace will be converted like this
engine.ts
namespace EngineSpace {
export class Engine {
public start() {
console.log('hello');
}
}
}
enigne.js
var EngineSpace;
(function (EngineSpace) {
class Engine {
start() {
console.log('hello');
}
}
EngineSpace.Engine = Engine;
})(EngineSpace || (EngineSpace = {}));
And if you want to use some property of another module in nodejs you need to export it and need to require it in another module.
Refer this for nodejs namespace
For the browser setup with typescript please refer this
Hope it helps you
I am learning TypeScript and today I installed SystemJS so that I could import some files. First I only imported the main file that needed being run i.e. app.js, in index.html
<script src="node_modules/systemjs/dist/system.js"></script>
<script>
System.import('app.js');
</script>
But I got this error:
https://i.stack.imgur.com/lz7Hm.png
So I turned my html code into this:
<script src="node_modules/systemjs/dist/system.js"></script>
<script>
System.config({
baseURL: '/',
packages: {
"/ts": {
defaultExtension: 'js'
}
}
});
System.import('app.js');
</script>
Now I am getting this error: https://i.stack.imgur.com/RS0k7.png
package.json:
{
"name": "ts",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"jquery": "^3.4.0",
"systemjs": "^3.1.2",
"typescript": "^3.4.2"
},
"devDependencies": {
"lite-server": "^2.4.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "lite-server"
},
"author": "",
"license": "ISC"
}
app.ts: console.log("Hello")
I am stuck at this point. Any help would be appreciated. Thanks in advance.
I guess you would have upgraded to the latest system.js by mistake... SystemJS 2.0 does not support System.Config
Refer to https://guybedford.com/systemjs-2.0
It is instead done using https://github.com/systemjs/systemjs/blob/2.0.0/docs/package-name-maps.md
If you managed to update the code by now, might as well post the updated sample here for use of everyone.
Locate system.js and put System.config() inside it, this would fix the error.
<script src="node_modules/systemjs/dist/system.js">
System.config({
baseURL: "/",
packages: {
"/": {
defaultJSExtensions: true
}
}
})
System.import("app.js")</script>
<script>
my question (in details) might have duplicates here but I couldn't be able to get answeres since I have spent 3 days searching for it.
I am new to typescript and want to run a TS project (and not any angular 2 thing in it) using 'npm start' command. Please have a look at below code:
My directory structure is:
myClass.ts (it is inside module directory)
export namespace Classes {
export class NewClass {
constructor(public msg:string){}
displayMessage ():string{
return this.msg;
}
};
};
greeter.html
<!DOCTYPE html>
<html>
<head><title> TypeScript Greeter </title></head>
<body>
<script src='greeter.js'></script>
</body>
</html>
greeter.ts
import {Classes} from 'module/myClass';
class Greeter extends Classes.NewClass {
constructor(public greeting: string) {
super('');
}
greet() {
return "<h1>" + this.greeting + "</h1>";
}
};
var greeter = new Greeter("Hello, world!");
var newClass = new Classes.NewClass("This is my message.");
document.body.innerHTML = greeter.greet() + newClass.displayMessage();
package.json
{
"name": "greeter",
"version": "1.0.0",
"description": "Sample TS app",
"main": "greeter.ts",
"scripts": {
"start": "tsc && http-server"
},
"keywords": [
"TS"
],
"author": "",
"license": "MIT",
"dependencies": {
}
}
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"sourceMap": true,
"module": "commonjs",
"outDir": "./out"
},
"files": [
"greeter.ts",
"module/myClass.ts"
]
}
typings.json
{
"globalDependencies": {
"node": "registry:dt/node#6.0.0+20160928143418"
}
}
My queries are:
I have included 'dt~node' typings after watching a few tutorials, but is it necessary here in this scenario ?
I am from javascript background, so I am not sure how to include the typings files in my project. Do I need to include reference path in greeter.html for typings files or something else. Please specify this.
I am unable to make it work as browser console displays this error after running 'npm start' in window's command:
Please help if anyone could guide me to resolve my queries. Thank you.