What's the right way to do something like this? My goal is to have my list of things I'm exporting not have to be duplicated. Right now I have to make two lists of exports, one for the export, and one for the default export.
const exports = {
Something,
SomethingElse
}
export exports
export default exports
My goal is to be able to import like this:
import everything from 'my_module'
or
import {Something} from 'my_module'
export exports is not valid syntax, it looks similar to something that TypeScript did support but that is deprecated in favour of modern syntax. Do not use it.
export default exports; and import everything from 'my_module'; would work together, but it's not recommended to default-export objects since it doesn't work with named imports.
Instead, use named exports:
export {
Something,
SomethingElse
}
(or put the export right on the declarations of Something and SomethingElse), then you can choose to do either
import {Something} from 'my_module';
or
import * as everything from 'my_module';
Related
I have a huge list of permissions, and I'm only interested in importing three of them. I'm also interested in grouping them in an object and assigning a variable to that object.
Can I do any better than the following?
import {
firstPermission,
secondPermission,
thirdPermission,
} from '#constants/permissions';
const relevantPermissions = { firstPermission, secondPermission, thirdPermission };
I was inclined to try using the as keyword in the import step, but I couldn't get any such thing to work.
(This feels like an ignorant question; please forgive.)
as keyword is intended to import named exports under different names, not group them.
The code listed in the question is the way this should be done. If relevantPermissions is supposed to be used in multiple places, it's beneficial to re-export them:
export {
firstPermission,
secondPermission,
thirdPermission,
} from '#constants/permissions';
...
import * as relevantPermissions from './relevant-permissions';
This way named imports have a chance to be tree-shaken if some of them remain unused, also may get other benefits of ES modules such as improved code completion in IDEs.
I am doing the following (both of the exported are objects):
SlateInfo.js
export default {SlateRules, SlateSchema};
and then in another file
import {SlateRules, SlateSchema} from 'SlateInfo';
But what I get is that SlateRules is defined as an object containing SlateRules and SlateSchema
SlateSchema is left undefined.
Where am I going wrong/what am I misunderstanding?
import {SlateRules, SlateSchema} from 'SlateInfo'; is for importing named exports. However, export default {SlateRules, SlateSchema}; is a default export, exporting an object with two properties.
If you want named exports then you need to omit the default:
export {SlateRules, SlateSchema};
Or use a default import and destructure the object:
import SlateInfo from 'SlateInfo';
const {SlateRules, SlateSchema} = SlateInfo;
When should I use curly braces for ES6 import? has a lot of examples showing how named and default exports work.
In short, how can I combine these two lines of code?
import * as php from './php';
import {str_replace, trim} from './php';
I can't find a syntax that works. I've tried things like
import {str_replace, trim}, * as php from './php';
N.B. this is ECMAScript 2015 (6th Edition, ECMA-262).
You cannot combine these in ES6 indeed. You can only use namespace imports or named imports together with a default import, but not with each other.
The solution is either to keep the two lines, or just use php.str_replace and php.trim everywhere in the code and drop the named imports.
I'm trying to use react-native-vector-icons with ES6 in React Native, but unfortunately I'm having trouble importing the icons. Their documentation still uses the old require statement, so I don't think it's helpful.
This is my import:
import {Ionicons} from './node_modules/react-native-vector-icons/Ionicons.js';
This is my usage:
<Ionicons name="ios-book" color="#4F8EF7" />
The error I receive is:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
It's clear that Ionicons is undefined, so I'm aware that fundamental about the import statement is wrong.
import Ionicons from 'react-native-vector-icons/Ionicons';
import {x} from 'abc'; translates to var x=require('abc').x, not to var x=require('abc').
So what about :
import * as Ionicons from './node_modules/react-native-vector-icons/Ionicons.js';
I ended up using an import statement as follows:
import {default as Icon} from '../node_modules/react-native-vector-icons/Ionicons';
This is because after I followed #Olivier's advice, I ended up with an object that contained a number of properties and I couldn't just use <Icon> as a component, but I discovered that <Icon.default> worked.
Thanks to all who answered!
I'm working with babel-loader inside webpack for the first time, and I'm very new to ES6 as well. I'm trying to export a base class from one file and import it into another. Exporting and importing has worked fine throughout my file thus far, and I am just now hitting a problem with it for the first time while trying to create classes.
Here's what my code looks like:
BaseClient.js
export default class BaseClient {
// snip...
};
SessionClient.js
import BaseClient from './BaseClient';
// outputs "undefined":
console.log(BaseClient);
// throws "Uncaught TypeError: Super expression must either be null or a function, not undefined":
export default class SessionClient extends BaseClient {
// snip...
};
Am I doing something wrong? Is there any relevant information I'm missing from my question that's needed before diagnosing? Thanks!
Yeah, I met the issue as well. It's caused by circular reference between different files in very long reference chain.
Like following: