0

I have 5 js files,

I have exported a new component from bar.js with the name NewComponent then on route.js I re-export with the same name NewComponent, on other.js NewComponent works fine, but in dummy.js NewComponent is not defined, whereas if imported directly from bar.js NewComponent can run normally (see sample.js), Is there a mistake I made?

/* bar.js */
import { Component } from 'react'
export default class NewComponent extends Component { }


/* route.js */
export { default as NewComponent } from './bar'

/* other.js */
import { NewComponent } from './route'
export default class Other extends Component {
  render() {
    return (
      <NewComponent /> /* work */
    )
  }
}

/* dummy.js */
import { NewComponent } from './route'
export default class Dummy extends NewComponent { } /* undefined is not an object (evaluating '_bar.default') */


/* sample.js */
import NewComponent from './bar'
export default class Sample extends NewComponent { } /* work */
Munawar Kholil
  • 1
  • 2
  • just read this answer by Dan Abramov https://stackoverflow.com/a/36796281/1826429 (when to use curly braces while importing) – Inderjeet Singh Dec 06 '18 at 09:14
  • Thank you @goldy, I have read the reference that you gave me, and I think I did not make a mistake with the rules described by Dan-Abramov, I need route.js to export all my files, and the export method that I use on route.js is not there is a problem, the error occurs only when the class is extended by another class – Munawar Kholil Dec 06 '18 at 09:38

1 Answers1

0

You need to import like this (without curly braces around it {...})

/* dummy.js */
import NewComponent from './route'; // this is import Other component

See in other.js you are exporting Other as default component and using NewComponent component inside Other, not exporting it like you did in route.js

Read more about default imports vs named imports here https://medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910

Abdullah
  • 2,015
  • 2
  • 20
  • 29
  • thanks for your answer @abdullah, but the error still won't disappear, now I can't find the NewComponent variable if I use the method you are using, because on route.js there is no export default – Munawar Kholil Dec 06 '18 at 09:30
  • I need route.js to re-export all my files, and the export method that I use on route.js is no problem, the error occurs only when the class is extended by another class – Munawar Kholil Dec 06 '18 at 09:30