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)
Related
I've been trying to save some metadata about methods + classes using reflect-metadata, similarly to this package.
I'm using Typescript with both experimentalDecorators and emitDecoratorMetadata set to true. I have installed reflect-metadata via npm and am importing it at the top. I also have access to types and I can see details about the method Reflect.defineMetadata().
tsc compiles fine without any errors but at runtime I'm always hitting:
TypeError at Object.defineMetadata (PATH\node_modules\reflect-metadata\Reflect.js:228:23)
Also, when importing reflect-metadata using: import 'core-js/es7/reflect'; .defineMetadata is truly not a function available under the typings, only defineProperty seems to be a thing.
The full context of my code can be found here.
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 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
I've tried setting up Haste using the official installation guide. Trying to compile a Hello World produces the following error:
Compiling Main into .
Linking haste-compiler/test.js
Linking Main
Linking GHC.Types
Linking GHC.IO.Handle.Text
hastec: /Users/vhsmaia/.haste/jsmods/base/GHC/IO/Handle/Text.jsmod: openBinaryFile: does not exist (No such file or directory)
I've then tried to compile the portable version. The error is now:
hastec: user error (Haste needs to be rebooted; please run haste-boot
Running haste-boot does not amend the error.
I think the problem you have, is that hastec expects your module to have a Main module. Try renaming your file to Main.hs and add a module Main where declaration to the top of the file.