Component files not importing into web package react to project?

Question

I have created a fairly simple React application, and I cannot get any of my components to import into index.js. My index.js, which contains the definition of my main class <App />, works fine and has the following line:

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

With a good definition of the IntroductionPage component exported from IntroductionPage.js, what I get is the error that the IntroductionPage is 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 defined in. Check the render method of `App`.
    in App

I'm not sure what to change. I see console.log output from IntroductionPage.js, so it starts / compiled. If I translate the definition of the IntroductionPage component to index.js, everything will be fine. Somehow I lose it at the import / export stage.

Why can this happen?

Answer 1

:

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

MDN - export default , .

Answer 2

, .

:

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

, IntroductionPage :

// IntroductionPage.js
export default 50

, :

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

, IntroductionPage.

---

named import, IntroductionPage:

import { IntroductionPage } from './IntroductionPage'

, IntroductionPage named export, IntroductionPage:

export const IntroductionPage = 52

, :

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

, IntroductionPage:

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

, , (, ). :

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

IntroductionPage , mySample Test, .

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

:

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

Answer 3

you should try this package.jsonand set up a reaction control panel. The package.json file is here:

    {
  "name": "bp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

and then go to cmd and run the following commands:

> npm install
> npm install -g create-react-app
> create-react-app my-app
> 
> cd my-app npm start