I'm using babel-node CLI to run ES6 code on node.js and having some confusion on import/export syntax:
Both of these fail and throw Unexpected token error:
export * as default from './someModules';
export { * as default from } './someModules';
So what's the correct syntax to do the similar thing?
I also did this:
// module bla
import * as bla from './someModules';
console.log(bla); // successfully output the expected object
export default bla; // or tried export { bla as default }
// module blo
import bla from 'bla';
// bla is now undefined ??? I don't know why
On a side note, bla is in blo's peerDependencies, not sure if it affects. And btw, if I export default {...} // a literal object in module bla instead then the import in blo will successfully import that object.
Are these limitations of ES6 syntax, or limitation in babel-node, or some mistake from me?
Related
Now I am trying to call our APIs in our own Jar.
In VS Code extension example project, I tried to npm install java to install it in modules dir.
In my extension.ts it looks like below:
import * as vscode from "vscode";
import * as java from "java";
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log(
'Congratulations, your extension "test-ext" is now active!'
);
context.subscriptions.push(
vscode.commands.registerCommand("test-ext.callLocalJar", async () => {
console.log('test caller start.');
java.classpath.push("testapis.jar");
console.log('test caller start.');
}
)
);
}
// this method is called when your extension is deactivated
export function deactivate() {}
But now I got a failure in the very beginning when activating it...
error:
Activating extension 'boyka.test-ext' failed:
Cannot find module 'c:\Users\boyka\Workspaces\test-ext\build\Release\nodejavabridge_bindings.node'.
My package.json is like
"dependencies": {
"java": "^0.12.2"
}
I am not sure of the root cause, tried to research and add Java home to PATH but luck.
Anyone has this node-java usage experience that could help? Will appreciate that!
https://github.com/joeferner/node-java
Thanks
b.
I'm using mixins in the subset components of app.vue without any problems, everything is good and works fine, but when I want to use it into the app.vue component, i'm having error in console.
<script>
/* eslint-disable */
import PanelUser from "./layouts/PanelUser";
import Auth from "./mixins/Auth";
export default {
name: "App",
mixins: [Auth],
components: {
PanelUser
},
};
</script>
I also can not use the router; when I use it, the page is completely white and nothing is displayed.
I have found how to check this situation.
First, you could see that the error threw at checkComponents method, move your mouse on and left click.
Second, add a break point, and then refresh the page.
Third, maybe you could find that some mixins or components which are referenced show undefined.
In my case, the second mixin is undefind.
Finally, check the reference or the mixin file. I found the reason is that I copied the mixin from another file and forgot to rename the mixin at declare part.
That's all, try to check by yourself. :)
You need to change:
import PanelUser from "./layouts/PanelUser";
To
import {PanelUser} from "./layouts/PanelUser";
And
import Auth from "./mixins/Auth";
To
import {Auth} from "./mixins/Auth";
The error is mixin related.
Make sure your mixins being used in your components are correct. (eg. name, esm import path etc.)
import samplePackage from "sample-package";
import anotherMixin from "another-package/path/to/mixin";
export default {
mixins: [
samplePackage.sampleMixin,
anotherMixin
]
}
After a couple hours of debugging, I found in our case the culprit was vuelidate. We tried to migrate from Webpack to Vite, keeping Vue 2.7, and vuelidate 3.
Importing:
import { validationMixin } from 'vuelidate'
console.log(validationMixin // undefined in production build
printed only undefined after a vite build
After reading about issues related to non-ESM imports (#1, #2) I tried to change the import to vuelidate/src:
import { validationMixin } from 'vuelidate/src/index'
console.log(validationMixin) // works!
// import the validators from "lib" though, src threw an require-js error for me
import { required, email, minLength } from "vuelidate/lib/validators"
I am trying to use vue-components in a webpack Typescript project but it doesn't seem to be working. I don't get any errors during the build and run, but the component HTML is never inserted into the output - I can just see the HTML source of the component instead i.e. .
My project is an ES2015 using Vue2 in VS.Net 2017. My component looks like this:
import Vue from 'vue'
import Component from 'vue-class-component'
// The #Component decorator indicates the class is a Vue component
#Component({
// All component options are allowed in here
template: '<button #click="onClick">Click!</button>'
})
export default class MyHeader extends Vue {
// Initial data can be declared as instance properties
message: string = 'Hello!'
// Component methods can be declared as instance methods
onClick(): void {
window.alert(this.message)
}
}
I have tried the official reference guide to register the component and use it. When I look at the vue-component example, it uses the same format as my project so I added the markup and properties to my Typescript class definition:
import Vue from 'vue';
import Component from 'vue-class-component';
import MyHeader from './MyHeader';
#Component({
components: {
MyHeader
}
})
export default class GetDataComponent extends Vue {
<...rest of class...>
}
but in my project the "components:" section is squiggly-underline-red with the message:
Object literal may only specify known properties, but 'components'
does not exist in type 'VueClass'. Did you mean to write
'component'?
Every example I have seen with vue-component (such as this one) uses the "components:" option in the #Component to register and use their Vue component, but in my project it doesn't seem to like it. I have also tried global registration of the component (such as this one) which includes the line:
// Register the component globally
Vue.component(my-header', MyHeader)`
but in that case I get an error like this:
Type 'typeof MyHeader' is not assignable to type 'AsyncComponent'
The Vue file works (without the Component added) and all content is rendered correctly. It's getting the Component included that doesn't work - I either get Design-time errors per above, or nothing appears in the output at all.
Is my import wrong? Or the format of the #Component? I get the feeling I am doing something that is very basic, very wrong...
I am hitting this error when i am trying to define my own custom components.
// /common/MyAppText.js
import React, {Component} from 'react';
import {
Text,
View,
} from 'ReactNative';
class MyAppText extends Component {
render(){
return (
<View>
<Text>hello</Text>
</View>
)
}
}
export default MyAppText
On the other app, i tried to import it and use it by
import MyAppText from './common/MyAppText'
class Home extends Component {
render(){
return (
<View>
<MyAppText />
</View>
)
}
}
But i hit the error "expected a string or a class/function but got: undefined, please check render method of 'MyAppText'. Anyone can see what is wrong with the export syntax?
If i defined everything in the same document then it works, so it is something with the export that i couldn't figure out.
Your own export/import looks fine. Not sure if this is the issue, but the line
import {..} from 'ReactNative';
Should be:
import {..} from 'react-native';
You might expect that to crash with a different error (module not found), but since this internal React Native file exports a globally available module "ReactNative" via Haste, your import ends up picking that file. Because that file doesn't export properties View and Text, the code compiles fine, but ends up with undefined variables.
Edit for more context:
The React Native bundler (called Metro) uses Facebook's own module system (called Haste), which allows anybody to decorate a file with a comment #providesModule Name, and then import it from globally anywhere with just import ... from 'Name';
One of the internal renderer modules declares #providesModule ReactNative. So when you've imported from 'ReactNative', you got that module instead of a build error.
We are using Typescript with Intellij Webstorm IDE.
The situation is we use ES6 import syntax and tsc compiler 1.5.3 (set as custom compiler in Webstorm also with flag --module commonjs)
The problem is it is imposible to click through (navigate to) method from module (file)
// app.ts
import * as myModule from 'myModule';
myModule.myFunction();
// myModule.ts
export function myFunction() {
// implementation
}
When I click on .myFunction() in app.ts I expect to navigate to myModule.ts file but this doesn't happen?
EDIT:
The way we exported functionality was bit different as in first example:
export: {
myFunction1,
myFunction2,
// ...
};
When I click on .myFunction() in app.ts I expect to navigate to myModule.ts file but this doesn't happen
This is working fine in the current WebStorm release.
I found out the problem, my example in question was simplified too much. In real code we are using:
export: {
myFunction1,
myFunction2
// ...
};
and this really doesn't work.
I have to change it to:
export function myFunction1() { /* impl */ }
export function myFunction2() { /* impl */ }
then it works.