Not sure why it's not viewing this as a function:
impl.js
export default function(callback){
return callback();
};
test.js
import {myModule} from '../../src/impl.js'
import {expect} from 'chai';
const module = myModule;
describe('', () => {
it('should callback when resolve is invoked', () => {
module(resolve => {
resolve('test');
}).then(value => {
expect(value).to.equal('test');
});
});
});
Error: TypeError: module is not a function
module isn't a function because where it receives its value, myModule, also isn't a function.
And, that is because you aren't using quite the correct syntax to import the export default. For that, you'll want to remove the braces around myModule:
import myModule from '../../src/impl.js'
From MDN:
Syntax
import *defaultMember* from *"module-name"*;
With the braces, the import will match a particular export by its name.
import { myModule } from '...';
Corresponds to either:
export let myModule = ...;
export function myModule() { ... };
And, impl.js doesn't export anything actually named myModule.
You don't have an export with name myModule. You only have a default export.
Either use a named export
export function myModule() { ... }
or import the the module properly
import myModule from '...';
See the export documentation on MDN for more info.
Related
I have problems with Laravel + Vite + Vue 3 project.
I have installed everything as documentation and needed, and this project works separated from Laravel and Vite. But here is the problem, TypeScript doesn't recognize export default. It's always giving an error like:
MainLayout.vue:42
Uncaught SyntaxError: The requested module '/resources/scripts/composable/Auth.js' does not provide an export named 'default' (at MainLayout.vue:42:1)
But the Auth.ts file has exported function, and it looks like:
export default function useAuth(){
return {
CurrentUserToken: 'test';
};
}
This is how I'm calling in some files (example)
import useAuth() from './Auth';
const { CurrentUserToken } = useAuth();
return CurrentUserToken;
Why it would not recognize this named function?
You can export it like this
export function useAuth() {
return {
CurrentUserToken: 'test';
};
}
Import
import { useAuth } from './Auth';
Execute the function
useAuth();
OR
If you want to export default
export default function() {
return {
CurrentUserToken: 'test';
};
}
And import would look like this
import useAuth from './Auth';
Execute the function
useAuth();
I have an external library without types. Looks something like that:
var method1 = require('./method1');
var method2 = require('./method1');
module.exports = {
method1: method1,
method2: method2
}
I created a directory "typings/lib-name"(added "typings" in typeRoots). In this folder I have index.d.ts file and there something like this:
declare module "lib-name" {
import { Method1Interface, ... } from "./modules/method1.d.ts";
import { Method2Interface, ... } from "./modules/method2.d.ts";
export {
Method1Interface,
Method2Interface,
...
}
}
And when I try to use it in my code:
import lib from "lib-name"
lib.method1()
I get: TS2339: Property 'method1' does not exist on type 'typeof import("lib-name")'
I just starting with TS so I would be grateful for explaining where I went wrong.
EDITED
I added default export in module:
declare module "lib-name" {
import { Method1Interface, ... } from "./modules/method1.d.ts";
import { Method2Interface, ... } from "./modules/method2.d.ts";
export {
Method1Interface,
Method2Interface,
...
}
default export {
method1: Method1Interface
}
}
But then method1 has type any. I don't understand why.
EDITED2
It works when I defined methods before default export.
declare module "lib-name" {
import { Method1Interface, ... } from "./modules/method1.d.ts";
import { Method2Interface, ... } from "./modules/method2.d.ts";
const method1: Method1Interface;
const method2: Method2Interface;
export {
Method1Interface,
Method2Interface,
...
}
default export {
method1,
method2
}
}
I resolved my issue. Firstly I didn't have a default export. Next, default export shouldn't use syntax like this:
default export {
method1: Method1Interface
}
I defined method1 before the default export and then all works fine.
declare module "lib-name" {
import { Method1Interface, ... } from "./modules/method1.d.ts";
import { Method2Interface, ... } from "./modules/method2.d.ts";
const method1: Method1Interface;
const method2: Method2Interface;
export {
Method1Interface,
Method2Interface,
...
}
default export {
method1,
method2
}
}
Does anyone know of a better way to do this?
The goal: import, use, and export createLogger from the same file (application entry point).
WebStorm gives me a duplicate declaration warning.
import createLogger from './logger';
const logger = createLogger('namespace');
export { default as createLogger };
export { * as plugins } from './plugins';
export setup = () => {
// ...
logger.log('');
}
export start = async () => {
// ...
logger.log('');
}
To export multiple functions from the same file just do this:
import createLogger from './logger';
const logger = createLogger('namespace');
import plugins from './plugins';
import anotherLib from './anotherLib';
const setup = () => {
// ...
logger.log('');
}
const start = async () => {
// ...
logger.log('');
}
// export everything without default
export { plugins,
createLogger,
anotherLib,
setup,
start}
You can import them in another file after this is done.
Here's a sandbox to see how it works.
Have a look at this documentation about the export statement.
I am writing react application and i has dir with actions files my example action file looks like
export const USER_LOADING_START = 'USER_LOADING_START';
export const USER_LOADED = 'USER_LOADED';
export function userLoadingStart() {
return {
type: USER_LOADING_START
};
}
export function userDataLoaded(value) {
return {
type: USER_LOADED,
payload: {
value: value
}
};
}
and in actions dir i have a file named index.js which content is
import * as userActions from './userActions';
let exp = {
...userActions,
};
export default exp;
So in other files i want to import my action creators so i use:
import {userLoadingStart} from './actions';
and it doesn't work but if i write:
import actions from '../actions';
const { userLoadingStart } = actions;
then it is working correctly, so what am i doing wrong ?
i tried
export {
...userActions,
...spinnerActions,
...errorActions
}
and
export exp
but it doesn't compile by webpack
So in other files i want to import my action creators so i use:
import {userLoadingStart} from './actions';
For that to work, it means ./actions must export named values. The issue is that your logic currently bundles everything up and exports it as single named export named default. The easiest way to do that would be for your index to do
export * from './userActions';
to essentially pass everything from ./userActions through as exports of ./actions.
I'm trying to create a module that exports multiple ES6 classes. Let's say I have the following directory structure:
my/
└── module/
├── Foo.js
├── Bar.js
└── index.js
Foo.js and Bar.js each export a default ES6 class:
// Foo.js
export default class Foo {
// class definition
}
// Bar.js
export default class Bar {
// class definition
}
I currently have my index.js set up like this:
import Foo from './Foo';
import Bar from './Bar';
export default {
Foo,
Bar,
}
However, I am unable to import. I want to be able to do this, but the classes aren't found:
import {Foo, Bar} from 'my/module';
What is the correct way to export multiple classes in an ES6 module?
Try this in your code:
import Foo from './Foo';
import Bar from './Bar';
// without default
export {
Foo,
Bar,
}
Btw, you can also do it this way:
// bundle.js
export { default as Foo } from './Foo'
export { default as Bar } from './Bar'
export { default } from './Baz'
// and import somewhere..
import Baz, { Foo, Bar } from './bundle'
Using export
export const MyFunction = () => {}
export const MyFunction2 = () => {}
const Var = 1;
const Var2 = 2;
export {
Var,
Var2,
}
// Then import it this way
import {
MyFunction,
MyFunction2,
Var,
Var2,
} from './foo-bar-baz';
The difference with export default is that you can export something, and apply the name where you import it:
// export default
export default class UserClass {
constructor() {}
};
// import it
import User from './user'
Hope this helps:
// Export (file name: my-functions.js)
export const MyFunction1 = () => {}
export const MyFunction2 = () => {}
export const MyFunction3 = () => {}
// if using `eslint` (airbnb) then you will see warning, so do this:
const MyFunction1 = () => {}
const MyFunction2 = () => {}
const MyFunction3 = () => {}
export {MyFunction1, MyFunction2, MyFunction3};
// Import
import * as myFns from "./my-functions";
myFns.MyFunction1();
myFns.MyFunction2();
myFns.MyFunction3();
// OR Import it as Destructured
import { MyFunction1, MyFunction2, MyFunction3 } from "./my-functions";
// AND you can use it like below with brackets (Parentheses) if it's a function
// AND without brackets if it's not function (eg. variables, Objects or Arrays)
MyFunction1();
MyFunction2();
#webdeb's answer didn't work for me, I hit an unexpected token error when compiling ES6 with Babel, doing named default exports.
This worked for me, however:
// Foo.js
export default Foo
...
// bundle.js
export { default as Foo } from './Foo'
export { default as Bar } from './Bar'
...
// and import somewhere..
import { Foo, Bar } from './bundle'
// export in index.js
export { default as Foo } from './Foo';
export { default as Bar } from './Bar';
// then import both
import { Foo, Bar } from 'my/module';
For multiple classes in the same js file, extending Component from #wordpress/element, you can do that :
// classes.js
import { Component } from '#wordpress/element';
const Class1 = class extends Component {
}
const Class2 = class extends Component {
}
export { Class1, Class2 }
And import them in another js file :
import { Class1, Class2 } from './classes';
you can do.
export{className, className and so on}
For exporting the instances of the classes you can use this syntax:
// export index.js
const Foo = require('./my/module/foo');
const Bar = require('./my/module/bar');
module.exports = {
Foo : new Foo(),
Bar : new Bar()
};
// import and run method
const {Foo,Bar} = require('module_name');
Foo.test();