I'm taking over development from a previous developer who added Zurb Foundation as a framework to our website. Foundation has been installed with npm. I'm getting errors in the console for all of the foundation javascript files as follows:
Uncaught SyntaxError: Unexpected token import
Checking the code, foundation.core.js has the lines:
"use strict";
import $ from 'jquery';
import { GetYoDigits } from './foundation.util.core';
import { MediaQuery } from './foundation.util.mediaQuery';
I'm including jQuery right before any other JS is included in my HTML doc. Not sure what the deal is here. Can anyone offer help?
Thanks.
The syntax for an as would be the following:
import * as $ from 'jquery';
import { GetYoDigits } from './foundation.util.core';
import { MediaQuery } from './foundation.util.mediaQuery';
This is saying to take all exports from the node module jquery and make them live under the keyword $. You should then be able to use $ as expected.
You need to change the way you import it
"use strict";
import {$} from 'jquery';
Related
I try to using emojionearea with jquery in webpack like
import $ from 'jquery'
import emojione from 'emojione'
$('.class').emojioneArea({... })
I tested Jquery working well But when using emojioneArea that has error like
Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).emojioneArea is not a function
How to make that working, thanks.
According to the document, it looks like you import the wrong package name. It's supposed to be emojionearea instead of emojione. I think you also need to expose jquery in the global for other plugins too as following:
import $ from "jquery"
import 'emojionearea';
global.$ = global.jQuery = $;
$('.class').emojioneArea({ ... })
I try to import mathjs as a module in a browser (client side). I copied this file on the server, and then try to import the JS module, but it always fails. Here are some trial I already made:
import { mathjs } from "./math.min.js"
SyntaxError: The requested module './../modules/math.min.js' does not
provide an export named 'mathjs'
import { math } from "./math.min.js"
SyntaxError: The requested module './../modules/math.min.js' does not
provide an export named 'math'
import { create, all } from "./math.min.js"
SyntaxError: The requested module './math.min.js' does not provide an export named 'all'
I also try:
import("/math.min.js");
Uncaught (in promise) TypeError: Cannot set property 'math' of undefined
Note that the path is OK, I checked. I'm probably missing something, but I can't find what I am doing wrong. Any help is welcome.
Here is a repl.it with the code: https://repl.it/#FifiLulu/NewJollyRoutes
You'll need to add:
<script type="module">
to your html file.
I'm new to Vue, and been trying to import a variable that consists of API key necessary for my app.js where Vue CDN is used.
But I received this error:
Uncaught SyntaxError: Unexpected identifier app.js:1
Everything else works fine, only I have issue with importing.
The preview of my code:
//---config.js---
export const key = 'someKey';
//---app.js---
import key from './config.js'
new Vue({
...,
components: {
key
},
...
P.S. is there a way to make it work without using Vue CLI?
if you want to use import/export you should add type="module" in script tag in html. Like this.
<script type="module" src="index.js"></script>
And as you used export instead of default export when importing use:
import {key} from './config.js'
Where are you using import export statement? (Chrome, Firefox and etc). To understand where import export statement work you should check Browser compatibility.
I am trying to import highcharts-annotations in angular 6 typescript module file app.module.ts. I tried the below code but it is showing an error
"Could not find declaration file for module 'highcharts/module/annotations' "
But the annotations.js file resides in the same path and it is showing error in console
"ERROR TypeError: chart.addAnnotation is not a function".
Has someone tried this before?
Code:
import { ChartModule } from 'angular2-highcharts';
import { AnnotationsModule } from 'highcharts/modules/annotations';
import * as Highcharts from 'highcharts';
Try to import the module in that way:
import * as AnnotationsModule from "highcharts/modules/annotations"
And initialize it:
AnnotationsModule(Highcharts);
Or use require:
require('highcharts/modules/exporting')(Highcharts);
Check the demo with highcharts-angular official wrapper which I recommend you.
Demo:
https://codesandbox.io/s/329llv6wj1
I have read a few Q/A on here on how to use external libraries in TS. Following a lot of the suggestions, I'm registering BT alert to an element like this:
import * as $ from "jquery";
import * as bootstrap from 'bootstrap';
window["$"] = $;
window["jQuery"] = $;
$("#clientAlert").alert();
and everything work just fine.
Now I need to do the same for JQuery-Ticker
import * as jqueryTicker from "jquery-ticker";
$('.newsticker').ticker();
WebPack build fails with this error:
error TS2339: Property 'ticker' does not exist on type
'JQuery'.
You could cast it to <any> or extend the jquery typing to add your own method.
(<any>$(".newsticker")).ticker();
//Or add your own custom methods (Assuming this is added by yourself as a part of custom plugin)
interface JQuery {
newsticker():void;
}
Or this
($(".newsticker") as any).ticker();
Try this :
($(".newsticker") as any).ticker();