when using jquery inside the component callback, the callback function for click
understands $ directly, and is working with $, but there is a jshint error
components/xxx.js: line 13, col 17, '$' is not defined.
Using this.$ inside the jquery click callback gives an error at run time
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
this._super(...arguments);
this.$()
.on('click', function() {
$('.class').something(); //ok but jshint error
this.$('.class').something();//jshint ok but error at run time
});
}
});
Thanks
use this at the top of the file
/* globals $ */
Another approach is to set the following configuration to .jshintrc in the root of your app that prevents checking for the whole app which tells jshint that there are two global variables:
{
"globals": {
"$": false,
"jQuery": false
}
}
Note: If you like you can also use the jQuery version as same as Ember jQuery by changing
$('.class').something(); //ok but jshint error
to
Ember.$('.class').something();
which probably drops that error as well.
Related
I create a Vue 2 project by Vue-Cli 5, then I want to remove "use strick" in the complied code.
As I Know, the #babel/plugin-transform-strick-mode may be enabled via #babel/plugin-transform-modules-commonjs, and the plugin is included in #babel/preset-env under the modules option.
But the Vue-Cli used a preset #vue/babel-preset-app by a plugin #vue/cli-plugin-babel for babel.
So my question is How pass strictMode: false as an option to the transform-modules-commonjs by #vue/babel-preset-app which preset is in the #vue/cli-plugin-babel ?
module.exports = {
presets: [["#vue/cli-plugin-babel/preset", { modules: "auto" }]],
plugins: [
// I tried this way, but it throw many errors like:
/**
ERROR in ./node_modules/axios/dist/node/axios.cjs 11:15-32
Module not found: Error: Can't resolve 'stream' in 'D:\workspace\cqset_offical_website\node_modules\axios\dist\node'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
*/
["#babel/plugin-transform-modules-commonjs", {}],
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk",
},
],
],
};
I would like to import apexChart library which using "window" property, and i get error in console.
[vite] Error when evaluating SSR module /src/routes/prehled.svelte:
ReferenceError: window is not defined
I tried use a apexCharts after mount, but the error did not disappear.
<script>
import ApexCharts from 'apexcharts'
import { onMount } from 'svelte'
const myOptions = {...myOptions}
onMount(() => {
const chart = new ApexCharts(document.querySelector('[data-chart="profit"]'), myOptions)
chart.render()
})
</script>
I tried import a apexCharts when i am sure that browser exist.
import { browser } from '$app/env'
if (browser) {
import ApexCharts from 'apexcharts'
}
But i got error "'import' and 'export' may only appear at the top level"
I tried disable ssr in svelte.config.js
import adapter from '#sveltejs/adapter-static';
const config = {
kit: {
adapter: adapter(),
prerender: {
enabled: false
},
ssr: false,
}
I tried to create a component in which I import apexChart library and I created a condition that uses this component only if a browser exists
{ #if browser }
<ProfitChart />
{ /if }
Nothing helped.
Does anyone know how to help me please?
The easiest way is to simply include apexcharts like a standalone library in your webpage like this:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
And then simply use it in the onMount:
onMount(() => {
const chart = new ApexCharts(container, options)
chart.render()
})
You can add this line either in your app.html or include it where it's required with a <svelte:head> block.
An alternative way would be to dynamically import during onMount:
onMount(async () => {
const ApexCharts = (await import('apexcharts')).default
const chart = new ApexCharts(container, options)
chart.render()
})
As an extra: use bind:this instead of document.querySelector to get DOM elements, that would be the more 'svelte' way.
I have found the last option with the Vite plugin to work best with less code in the end but will lose intellisense in vscode and see import highlighted as error (temp workaround at end): https://kit.svelte.dev/faq#how-do-i-use-x-with-sveltekit-how-do-i-use-a-client-side-only-library-that-depends-on-document-or-window
Install vite plugin: npm i -D vite-plugin-iso-import
Add plugin to svelte.config.js:
kit: {
vite: {
plugins: [
isoImport(),
],
Add plugin to TypeScript config (if you use TS):
"compilerOptions": {
"plugins": [{ "name": "vite-plugin-iso-import" }],
Use as normal but note the "?client" on the import:
<script context="module">
import { chart } from 'svelte-apexcharts?client';
import { onMount } from 'svelte'
let myOptions = {...myOptions}
onMount(() => {
myOptions = {...updated options/data}
});
</script>
<div use:chart={myOptions} />
Debugging note:
To have import not highlighting as an error temporarily, just:
npm run dev, your project will compile fine, then test in browser to execute at least once.
remove ?client now, save and continue debugging as usual.
For all of you trying to import dynamically into a js or ts file, try the following:
Import your package during on mount in any svelte component.
onMount(async () => {
const Example = await import('#creator/examplePackage');
usePackageInJSOrTS(Example.default);
});
Use the imported package in your js/ts function. You need to pass the default value of the constructor.
export function usePackageInJsOrTs(NeededPackage) {
let neededPacakge = new NeededPackage();
}
I have a javascript variable (var testButton) in my Nuxt plugins folder. I then added the file to my nuxt.config.js plugins. In my component, I have a Buefy button, and I'm trying to call the script:
<b-button #click="testButton">Click Me</b-button>
...
<script>
export default {
mounted () {
this.$testButton()
}
}
</script>
I import the script in my script section and have tried computed and mounted lifecycles. Not sure what I'm doing wrong. Thank you
Check the following things, you must be missing one or more:
1. Your plugin should export a method. That method should receive an 'inject' function and use it to register your 'testButton' function.
So, in your ~/plugins/testButton.js
export default (context, inject) => {
inject('testButton', () => {
console.log('testButton works!')
})
}
2. You shuold register your plugin correctly in the nuxt.conf.js file
Do it like so:
plugins: [
{ src: '~/plugins/testButton.js' },
],
3. Call it as '$testButton()' (note that Nuxt will have added a dollar sign to your method's name).
Your '$testButton' method will now be available from anywhere in your nuxt app. You don't have to import it o create any computed property.
<b-button #click="$testButton">Click Me</b-button>
<script>
export default {
}
</script>
In the beginning of the docs "What is Babel", an example is listed to explain what Babel does. It states that Babel transforms the following ES2015 input:
[1, 2, 3].map((n) => n + 1);
To the following ES5 equivalent:
[1, 2, 3].map(function(n) {
return n + 1;
});
However, if you enter the same ES2015 code on the home page widget you get the following output:
"use strict";
[1, 2, 3].map(n => n + 1);
Am I missing something? Shouldn't the output be ES5 code?
The reason I am asking is that, after installing all the relevant packages ("#babel/cli", "#babel/core", and "#babel/preset-env") and running Babel from the command line, I am getting the same output as the home page widget.
I found a way to make it work in the Babel command line. I needed to use the --presets option:
npx babel script.js --out-file script-compiled.js --presets=#babel/preset-env
I still don't know why the home page widget does not work though.
You should check your options on the babel try page.
looks
the same output ES6 entry
You should try to create a babel.config.js file to run babel without parameters
// babel.config.js
module.exports = {
presets: [
[
"#babel/preset-env",
{
targets: {
node: "current",
},
},
],
],
};
On this file you can config many options, for example, the presets you want to use. here more information Babel config files
I have an es6 script that include a tween library with es6 import. The code works fine if it's not transpiled, I mean I can import tween and use it inside the script, if I use webpacke with my configuration the script exit with an error becouse the TWEEN is somehow undefined.
I have tried change extension of tween file with mjs but it generate other errors like
require is not defined
I webpack add core-js modules using require funcition
require("core-js/modules/es.symbol");
The code with issue
'use strict';
...
import {TWEEN} from '../threejs/tween.js';
//import {TWEEN} from '../threejs/tween.js';
...
export class CustomClass extends ParentClass {
constructor(arguments) {
super(arguments);
this.tweenGroup = new TWEEN.Group(); // the line that generate "Cant get Group of undefined"
}
...
}
...
this is my babel-loader configuration configuration
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
sourceType: 'module'
}
}
},
my babel configuration is look like this
module.exports = {
presets: [
[
'#babel/preset-env',
{
debug: true,
useBuiltIns: 'usage',
corejs: 3
}
]
],
plugins: [
// '#babel/plugin-proposal-class-properties',
// '#babel/plugin-transform-runtime',
// '#babel/runtime-corejs2',
// '#babel/plugin-syntax-dynamic-import',
// '#babel/plugin-syntax-async-generators',
// '#babel/plugin-transform-regenerator',
// '#babel/plugin-transform-async-to-generator',
'#babel/plugin-transform-modules-commonjs',
// '#babel/plugin-transform-typeof-symbol'
]
};
The code with TWEEN import (the first block of code I posted) work just fine if I use it in a project that is not transpiled with babel, but it generate the error if I run devserver. I don't understand why I can't import the Tween properly afetr compilation.
I will apriciate any help.l
Update: I realized I had rather different setup and different issue than you did, but while searching the solution I found this thread with recommendation for npm intalling tween for babel workflow. Maybe that is helpful for you.
I still leave my initial reply here, could be useful for anyone else:
I had some trouble including TWEEN within my js project (eg using import * as TWEEN from '...'), but following the those steps for simple installation I got it working after I included it in HTML, not in js:
<script src="js/libs/Tween.js"></script>