Component files not importing in webpack react project?

Question

I've set up a pretty simple React app and I can't get any of my components to import to index.js. My index.js, which contains the definition of my main <App /> class, works fine, and has this line for example:

import { IntroductionPage } from './Components/IntroductionPage.js';

With a nice definition of the IntroductionPage component exported from IntroductionPage.js, what I'm getting is an error about IntroductionPage being undefined in index.js:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`.
    in App

I'm not sure what to change-- I can see console.log output from IntroductionPage.js, so it is getting run/compiled. If I move the IntroductionPage component definition into index.js, everything works great. Somehow I'm losing it in the import/export step.

Why might this be happening?

Answer 1

I would like to give more explanation on import and export scenarios that work in react.

This is a default import:

// App.js
import IntroductionPage from './IntroductionPage'

It only works if IntroductionPage contains a default export:

// IntroductionPage.js
export default 50

In this case it doesn’t matter what name you assign to it when importing:

// App.js
import IntroductionPage from './IntroductionPage'
import MySample from './IntroductionPage'
import Test from './IntroductionPage'

Because it will always resolve to whatever is the default export of IntroductionPage.

---

This is a named import called IntroductionPage:

import { IntroductionPage } from './IntroductionPage'

It only works if IntroductionPage contains a named export called IntroductionPage:

export const IntroductionPage = 52

In this case the name matters because you’re importing a specific thing by its export name:

// App.js
import { IntroductionPage } from './IntroductionPage'
import { mySample } from './IntroductionPage' // Doesn't work!
import { Test} from './IntroductionPage' // Doesn't work!

To make these work, you would add a corresponding named export to IntroductionPage:

// IntroductionPage.js
export const IntroductionPage = 50
export const mySample = 51
export const Test= 52

A module can only have one default export, but as many named exports as you like (zero, one, or many). You can import them together:

// App.js
import IntroductionPage, { mySample, Test } from './IntroductionPage'

Here, we import the default export as IntroductionPage, and named exports called mySample and Test, respectively.

// IntroductionPage.js
export default 50
export const mySample= 51
export const Test= 52

We can also assign them all different names when importing:

// App.js
import X, { mySample as myTest, Test as myTest2} from './IntroductionPage'

Answer 2

Please try to remove the brackets from the import with only the following code:

import IntroductionPage from './Components/IntroductionPage.js';

Check out the import docs on MDN-- if you're using export default for your class, you don't want brackets when you import it like this.