I have a website hosted on Firebase hosting. I would like to add material theming to it(Buttons, Textfields, etc...). So, I ran the command npm install --save #material/textfield. I then extracted the folder called #material to my styles directory so that the structure looked like this:
Root
|
+---index.html
+---scripts/
+---app.js
+---styles/
+---main.css
+---#material/
+---……
I can reference css files from my main.css by adding #import "#material/textfield/dist/mdc.textfield.css"; to the start of my stylesheet. This correctly changes the styling of the button. However, when I go to do the same thing for js, it doesn't work.
According to Material Design's Github Repo, I should just be able to add
import {MDCTextField} from '#material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
to the top of my script. However, when I deploy the code, and look at the console, the following error is returned: Uncaught SyntaxError: Unexpected token {. I have tried to require() the files, and change the path to import {MDCRipple} from '../styles/#material/ripple/dist/mdc.ripple.js';. This throws the same error. If I do: import * as MDCRipple from '../styles/#material/ripple/dist/mdc.ripple.js';, the same error is also thrown(except instead of the "{" character, it does not expect the "*" character).
This was supposed to be an easy conversion for my site, but it has given my tons of headaches. What am I doing wrong?
BTW: I know that the files the import statement is using exist. Also, isn't Node.js server-side?
Download latest version of node: https://nodejs.org/en/
Version 8.11.2 LTS will work.
The --experimental-modules flag can be used to enable features for ES2015 import. More information:
https://github.com/nodejs/node/blob/master/doc/api/esm.md
Related
In looking to use a new fairly large project (Three.js) and for teaching beginners, I can see the appeal of auto-complete.
However, for Atom, even with the atom-typescript package, I'm not finding very clear guidance on how to set this up (I have some familiarity with TypeScript syntax but am not used to setting it up myself.). I'd expect for something as useful as type-aware autocomplete for JavaScript, there might be some quick-start tutorials out there for just this use case, but I have not found anything which has helped get things working.
According to https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html , I'd expect I should just be able to run:
pnpm i -D #types/three
...(using pnpm as my package manager) and then add the import (if the THREE global isn't defined by the #types/three package):
import * as THREE from 'three';
I also ran pnpm i -D typescript figuring Atom might want to access a local copy.
Adding a jsconfig.json with the following (in the root directory with my other files and package.json) did not help:
{
"compilerOptions": {
"lib": ["es2015", "dom"]
}
}
And in atom-typescript I have enabled "Enable Atom-TypeScript for JavaScript files (experimental)". The only other package with "typescript" in the name that I have is "language-typescript" (and I've disabled "ide-typescript").
Even if I need to set up my own declaration file, shouldn't I be getting errors?
Adding a declaration file of my own didn't seem to change anything though. threed.d.ts:
declare module "threed" {
}
I'd expect at least errors about not having types, but not getting anything.
And I also added the following to my ~/.atom/init.coffee file as per https://github.com/TypeStrong/atom-typescript/blob/master/docs/faq.md#i-want-to-use-atom-typescript-with-javascript-too :
#CHANGE THE PACKAGE NAME IN THE NEXT LINE IF YOU'RE USING
#A DIFFERENT GRAMMAR PACKAGE
do (grammarPackageImUsing = "language-javascript") ->
atom.packages.onDidTriggerActivationHook "#{grammarPackageImUsing}:grammar-used", ->
atom.packages.triggerActivationHook 'language-typescript:grammar-used'
...and did a restart.
I also tried command-shift-P and TypeScript: Activate. Nothing. What am I missing?
I am unable to use the BokehJS library in my Angular app (https://docs.bokeh.org/en/latest/docs/dev_guide/bokehjs.html).
I get the following error as soon as I try to call the library from my app :
ERROR in ./node_modules/#bokeh/bokehjs/build/js/lib/index.js 3:9
Module parse failed: Unexpected token (3:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export { version } from "./version";
| export { index } from "./embed";
> export * as embed from "./embed";
| export * as protocol from "./protocol";
| export * as _testing from "./testing";
Here is a detailed step-by-step method to reproduce the issue on a "fresh" computer (I tried it on two different machines, they both get the exact same error at the end):
install nodejs : https://nodejs.org/en/
install angular-cli : npm install -g #angular/cli
initialize a new angular project in the current directory : ng new angular10BokehJSexample
enter the new project directory : cd angular10BokehJSexample
(optional) check that the example angular app works : npm start and open your browser on URL http://localhost:4200
install BokehJS : npm install #bokeh/bokehjs
open your favorite text editor and change the file src/app/app.module.ts. Add the following line with the other imports at the top : import * as Bokeh from '#bokeh/bokehjs'
(optional) if you start the server at this stage, it should still work fine, meaning that BokehJS can be imported successfully (that was not the case with an old version of Angular)
still in the file src/app/app.module.ts, change the class decalaration at the end of the file to make it look like this :
export class AppModule {
private testBokeh(){
var item = JSON.parse("just a test");
Bokeh.embed.embed_item(item);
}
}
(note: this is just a stub, the code does not work. I’ve put together a more complex code that is supposed to work, but this is sufficient to reproduce my issue)
run npm start again, it cannot compile due to the error mentionned at the beginning of this question.
Any idea regarding what I am doing wrong ? I am not a frontend developer, so I am definitely out of my comfort zone here. Any help would be greatly appreciated.
I'm trying to use lit-html to save my self some time, but I'm having trouble getting everything set up correctly.
Electron 4.1.1
Node 11.15
As of 5 minutes before posting this, I've run npm install and electron-rebuild, no luck.
I use require() as one would with any other NPM package
var render = require('lit-html').render
var html = require('lit-html').html
console.log(require("lit-html"))
Unfortunately, I'm greeted with this error
In reference to the three lines of code above.
I don't see any problems with my code.
I've tried reinstalling lit-html through NPM to no avail. I would really love to use this library, but first I have to get over this hurdle. If I'm being honest, I don't know if this error is reproducible, but nothing I do seems to fix it. The problem seems to lie with node and the way that imports are handled.
Am I missing something here? Is this a common issue? If so, what can I do to fix it?
You need to transpile lit-html before you can require it
I tested require('lit-html') and I was greeted with this error:
/home/chbphone55/Workspace/test/node_modules/lit-html/lit-html.js:31
import { defaultTemplateProcessor } from './lib/default-template-processor.js';
It clearly states that the error is coming from lit-html/lit-html.js:31 where the line uses ES Module import syntax.
You can transpile it using tools like Babel or similar ones. However, you may want to try using ES Module syntax so you can import lit-html without transpiling it.
Example:
<!-- HTML File -->
<script type="module" src="index.js"></script>
// index.js
import { html } from 'lit-html';
What if you can't use type="module"
If you are unable to use the type="module" method above, you can also use the ESM package.
ESM is a brilliantly simple, babel-less, bundle-less ECMAScript module loader.
Here are a few examples of how to use it:
Using the node require flag (-r) to load esm before everything else
node -r esm index.js
Loading esm in your main file then loading the rest of your code.
// Set options as a parameter, environment variable, or rc file.
require = require('esm')(module/*, options*/)
module.exports = require('./main.js')
Having set up a web project to use TypeScript/WebPack I cannot get Google Chrome to run the result:
The error reads: "Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function."
I learned that a shim is required for transpiling to ES5, but I still can't get this to work. That's probably because I don't want to add a <script> element to the HTML but instead I want to import "../node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle"; in my .ts files.
How can I get this to work without adding <script> elements to my HTML files?
I took my tsconfig.json and webpack.config.js files from this tutorial.
Here's the solution:
npm install #webcomponents/webcomponentsjs --save-dev
import "#webcomponents/webcomponentsjs/webcomponents-bundle";
import '#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
...
As far as I can see, this runs smoothly on Chrome, Firefox, Edge and IE11.
I'm trying to transition my jQuery project into a Typescript project. However, when I include the jQuery typings from the DefinitelyTyped Github using this method:
///<reference path="../../typings/jquery.d.ts"/>
I get "Uncaught SyntaxError: Unexpected identifier" on line 27 of jquery.d.ts, shown below
declare module 'jquery' {
export = jQuery;
}
I've done a bunch of searching about this problem, but I can't seem to find any solutions to this problem. What am I doing wrong?
(I am using WebStorm as my IDE)
EDIT:
Ok, I followed some instructions below and installed the jQuery typings via the npm terminal. However, when I remove the ///reference import, I now get an error in Webstorm: TS2304 cannot find name '$'. However, the code compiles to js and can run in the browser fine. It's just annoying to have those errors in my console in Webstorm. Is there something I need to add to get Webstorm to recognize jQuery?
most recommended practice nowaday is instead of ///reference import, install separate type packages: https://www.npmjs.com/package/#types/jquery as devdependency. (and ensure you're using latest ts compiler supports this)