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>
Related
I am working on a legacy project which uses RequireJs to load and resolve all the dependencies. It works fine on modern browsers, but i need to add support for IE11.
I tried to use babel 7 with #babel/preset-env with following .babelrc
{
"presets": [
["#babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"browsers" : ["ie>=11"]
},
"modules": false
}]
],
"compact": false
}
the import statements injected by the preset as following
import "core-js/modules/es.function.name.js";
cause error "import statements can't be used outside a module". Even when I use modules: "amd", then core-js is imported as
define(["core-js/modules/es.array.filter.js", "core-js/modules/es.object.to-string.js", "core-js/modules/es.string.includes.js", "core-js/modules/es.function.name.js", "core-js/modules/es.regexp.exec.js", "core-js/modules/es.string.split.js", "core-js/modules/es.string.small.js", "core-js/modules/es.string.search.js"], function (_esArrayFilter, _esObjectToString, _esStringIncludes, _esFunctionName, _esRegexpExec, _esStringSplit, _esStringSmall, _esStringSearch) {
"use strict";
//...
});
which throws error like "define is not defined in require.js".
When using useBuiltIns: "entry", and then including core-js as
require(["core-js", ../other modules], function(corejs, ...){
}
)
in the main.js file, it fails to correctly resolve the path of the files even though I have included the path to core-js in require.config.paths.
I tried #babel/runtime and #babel/plugin-transform-runtime but no luck there.
So my question is what would be the best way to add babel and the required polyfills in my RequireJs project so that it is compatible with IE 11?
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'm trying to write a simple web component using LitElement.
When I try to use:
- #customElement('my-element')
- #property()
I'm getting error.
Support for the experimental syntax 'decorators-legacy' isn't
currently enabled.
Is this something related to babel?
import { LitElement, html } from 'lit-element';
#customElement('my-element')
class MyElement extends LitElement {
render(){
return html`
<!-- template content -->
<p>A paragraph</p>
`;
}
}
JS decorators are still a proposal but they can be enabled in Babel by using #babel/plugin-proposal-decorators. Class fields also have to be enabled in order to use the #property decorator.
Install the plugins:
$ npm i -d #babel/plugin-proposal-decorators #babel/plugin-proposal-class-properties
and add them to your .babelrc:
{
"plugins": [
["#babel/plugin-proposal-decorators", {
"legacy": true
}],
"#babel/plugin-proposal-class-properties"
]
}
Decorators are a proposal for JS but are supported in Babel (as already covered by Umbo's answer, which you should accept) and natively supported by TypeScript (which Lit targets).
To use these in TS you have to add a setting to tsconfig.json:
{
"compilerOptions": {
"experimentalDecorators": true
And then import the decorators:
import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
#customElement('my-element')
class MyElement
extends LitElement {
render(){
return html`<p>A paragraph</p>`;
}
}
You should accept the Babel answer to this question, but it should be clear that this works in Typescript too.
I'm trying to do code splitting and lazy loading with webpack using the import() method
import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
I'm getting
'import' and 'export' may only appear at the top level
Note top level imports are working fine, i'm just getting an issue when I try and using the dynamic variant of import()
var path = require('path');
module.exports = {
entry: {
main: "./src/app/app.module.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-application.js"
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}]
}
]
},
resolve : {
modules : [
'node_modules',
'bower_components'
]
},
devtool : "source-map"
}
EDIT:
If I change it so the syntax reads, it works.... but the chunk comments don't work to label the bundle. I'm confused because the documentation says the the following is depreciated.
The use of System.import in webpack did not fit the proposed spec, so
it was deprecated in webpack 2.1.0-beta.28 in favor of import().
System.import('./myLazyModule').then(function(module) {
// do something with module.myLazyModule
}
You need the plugin syntax-dynamic-import to be able to use the import() function with Babel.
Install it with:
npm install --save-dev #babel/plugin-syntax-dynamic-import
And add it to your plugins:
{
presets: ['es2015'],
plugins: ['#babel/plugin-syntax-dynamic-import']
}
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.