Hey there I have this uiTypes.js file like this:
export default {
SELECT_ITEM: 'SELECT_ITEM',
DESELECT_ITEM: 'DESELECT_ITEM',
TOGGLE_ITEM: 'TOGGLE_ITEM',
}
And when I try importing its content like so, it works:
import uiTypes from './uiTypes';
console.log(uiTypes.SELECT_ITEM) // 'SELECT_ITEM'
But not like this:
import { SELECT_ITEM, DESELECT_ITEM, TOGGLE_ITEM } from './uiTypes';
console.log(SELECT_ITEM) // undefined,
Am I missing something?
There is no destructuring for imports (notice also that exports and imports use the keyword as instead of a colon to avoid confusion with objects). You can either import the default export, individual named exports, or the module namespace object.
Your attempt is trying to import three named exports, while there is only a default export; that's why it's failing.
You should use named exports:
export const SELECT_ITEM = 'SELECT_ITEM';
export const DESELECT_ITEM = 'DESELECT_ITEM';
export const TOGGLE_ITEM = 'TOGGLE_ITEM';
or use "real" destructuring after importing the object:
import uiTypes from './uiTypes';
const {SELECT_ITEM, DESELECT_ITEM, TOGGLE_ITEM} = uiTypes;
Related
I would like to know if something like:
import { faPause,
faLevelUpAlt,
faExchangeAlt,
faCircle,
} as SolidIcons from '#fortawesome/free-solid-svg-icons';
=> SolidIcons.faPause
I know there is:
import * as everything from '#fortawesome/free-solid-svg-icons';
=> everything.faPause
But that is not what I want because it imports everything from the library..
I don't think that what you've listed is possible under the syntax, but you should be able to bundle your imports into an object after the fact to simulate it. Something like
import { faPause,
faLevelUpAlt,
faExchangeAlt,
faCircle,
} from '#fortawesome/free-solid-svg-icons';
const SolidIcons = { faPause,
faLevelUpAlt,
faExchangeAlt,
faCircle,
};
I'm trying to do this
state.js
export default {
someValue: 'fooBar'
}
index.js
export default {
export {default as state} from './state',
export {default as actions} from './actions'
}
but I am not allowed, Unexpected keyword 'export' (2:2). Is there any way to achieve this?
You can only use import and export at the top level of your module. (You can use dynamic import() elsewhere, but not the static versions.)
So to have that export, you have to do what you've said you're trying to avoid in the comments:
import {default as state} from './state';
import {default as actions} from './actions';
export default {
state, actions
};
but, beware what you're exporting there: an object with state and actions properties whose initial values come from the imported state and action, but which are not connected to them. Code importing that object can change those properties. You could maintain the live binding:
import {default as state} from './state';
import {default as actions} from './actions';
export default {
get state() {
return state;
},
get actions() {
return actions;
}
};
but at that point you're kind of reinventing the module namespace object. You might prefer to simply:
export {default as state} from './state.js';
export {default as actions} from './actions.js';
and then either use those named exports:
import {state, actions} from "./index";
or use the module namespace object
import * as index from "./index";
// Use `index.state` and `index.actions`
I have something like this:
//ActionTypes.js
export const a = 'a';
//Reducer.js
import a from './ActionTypes';
//export reducer function that uses string a
//Actions.js
import a from './ActionTypes';
return {type: a, data: 'something'}
but in both reducer.js and actions.js 'a' is undefined. There is no circular dependancy as far as i know. Pls help
I would export a with curly braces like so:
import { a } from './ActionTypes'
a is a named export because you gave it a variable name when you declared it like this:
export const a = 'a';
The syntax for importing named exports necessitate the use of {}.
The syntax that you've used apply to default exports. See below for an example:
export default function a() {
return 'a';
};
Default exports would not work for constants because you would want to declare a name for the variables. You may not use var, let or const with export default.
For more info, please see MDN docs for export
One other thing, it is convention to use ALLCAPS when naming constants.
I am learning react native. i want to rewrite the following line using a plain javascript class.
module.exports = React.createClass({
to
export class Dashboard extends React.Component {
not sure if i am doing it right. in the original code, it just exports without giving a class name. can I do the same? or does it hurt if I give a name.
the full source code is there. the line i try to modify is line 19.
I depends on how you import the component. You are currently using named export so you need to import it by it's name - Dashboard:
export class Dashboard extends React.Component {
// and then import by name
import { Dashboard } from './myfile';
// or with require
var Dashboard = require('./myfile').Dashboard;
If you use default export you can name it however you like:
export default class Dashboard extends React.Component {
// and then import
import Dashboard from './myfile';
// or with custom name
import MyComponent from './myfile';
// or with require
var Dashboard = require('./myfile');
I am developing a React & Reflux app, which is bundled by webpack with babel-loader (v6), and I am experiencing es6 modules dependencies issues
For example, I have a component that use the reflux .connect() mixin :
import MyStore from '../stores/my-store';
const Component = React.createClass({
mixins: [Reflux.connect(MyStore)]
});
When I import all modules individually in each file like this, everything's fine.
I then tried to improve my code by using deconstructed import statements :
...in a component :
//import One from '../js/one';
//import Two from '../js/two';
//import Three from '../js/three';
import { One, Two, Three } from '../js'; // Instead
...and in js/index.js :
import One from './one';
import Two from './two';
import Three from './three';
export { One, Two, Three };
App source code files are more concise using the above technique, because I can import all components in one import line.
But when I use this, some dependencies end up beeing undefined when I use them
If I use the same updated example...
//import MyStore from '../stores/my-store';
import { MyStore } from '../stores'; // Instead
const Component = React.createClass({
mixins: [Reflux.connect(MyStore)]
});
...MyStore parameter ends up undefined in Reflux.connect method.
I tried to troubleshoot in the debugger, but I'm not really aware of what's going on with the __webpack_require__(xxx) statements in the generated bundle. There must be a circular dependency that babel-loader or webpack require could not figure out when there are the index.js files re-exporting individual modules.
Do you know any tool that can help me figure this out? I tried madge but it does not work with es6 modules, and I could not find anything that would tell me where anything is wrong
In order to get extended info about build, run:
webpack --profile --display-modules --display-reasons
It will give you bunch of information for optimisation/profiling.
import statement is used to import functions, objects or primitives that have been exported from an external module.
As per MDN doc, you can import the Modules not the directory.
import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
Reference URL:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
http://es6-features.org/#ValueExportImport
https://github.com/lukehoban/es6features#modules
http://www.2ality.com/2014/09/es6-modules-final.html
As a workaround keep one file as base.js and include all your 3 files.