CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42604

Failed to import a module in reactjs

I am using reactjs and es6 and I defined a javascript as below. 

vendor.jsx:
export const VENDOR_LIST = [{
    vendor: []
}];

In another javasript file, I want to import this file, so I used below code. But I always got VENDOR_LIST is undefined error in componentDidMount() method. What wrong with my code?

import VENDOR_LIST from  '../data/vendor'

    export class VendorList extends React.Component{

  selectChanged(e){
    console.log('select changed ', e);
  }

  componentDidMount(){
    console.log('load vendor list data ',VENDOR_LIST);
  }

  render(){
    return (
      <select onChange={this.selectChanged}>
        <option value="A">A</option>
        <option value="B">A</option>
        <option value="-">Other</option>
      </select>
      )
  }

}

Upvotes: 0

Views: 1315

Answers (2)

ZekeDroid
ZekeDroid

Reputation: 7209

To better explain how import statements work in ES6, in short it has to do with how the export is done in the file.

If you export with a default, then you can import it like you did using any named variable as that is what it is getting assigned to:

const foo = 'FOO';
export default foo;

import otherFoo from '/the/file';

Notice how I don't use curlies and I define it with any name I want.

Now if you export multiple things without the default:

export const foo = 'FOO';
export const bar = 'BAR';

import { foo, bar as otherBar } = from '/the/file';

Now you see that you HAVE to import them with their declared names in the file and using curlies. If you wanted to assign to a different variable you can always use the as notation.

Upvotes: 3

thangngoc89
thangngoc89

Reputation: 1400

You need to learn about ES6 import/export. In your code, try this :

import { VENDOR_LIST } from  '../data/vendor'

Upvotes: 2

Related Questions