在 ES6 模块中导入有问题：未导出属性

Question

I'm currently working with redux, and I'm exporting an object with the type properties to my reducer file.

My types.js file:

const Types = {LOG_IN:'LOG_IN',REGISTER:'REGISTER'};
export default Types;

My reducer.js file:

import {LOG_IN,REGISTER} from './types';
//CODE HERE

When I compile, however, CRA give me an error:

Attempted import error: 'LOG_IN' is not exported from './types'.

Curiously enough, this code works:

import Types from './types';
const {LOG_IN,REGISTER} = Types;

Why is it that my code structure doesn't work with that form of importing while React's and Redux's code does? Thank you in advance.

Answer 1

You need to explicitly define a named export for each constant for that to work.

export const LOG_IN = 'LOG_IN';
export const REGISTER = 'REGISTER';

Importing a named export is not the same thing as destructuring a default export, which is what's happening when you do this:

import Types from './types';
const {LOG_IN,REGISTER} = Types;

You can read more on this here . Other code you find in the wild might appear to work like you describe because it's actually defining its exports like this:

module.exports = {
  LOG_IN: 'LOG_IN'
}

Answer 2

I think is because you export Types , if tou can use LOG_IN for example you need to access Types.LOG_IN , and the code const {LOG_IN,REGISTER} = Types; works because you are using destructuring

the

import Types from './types';

are correct

an then try to access with Types.REGISTER