Cannot import class in React

Question

I have two react files as follows. They are in same folder. But it is not working.

Game.js

import { Board } from 'Board';

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

And in Board.js

class Board extends React.Component {
  render() {
    return (
      <div>Test</div>
    );
  }
}
export { Board };

I have the following cdn in my project.

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dnd@2.4.0/dist/ReactDnD.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dnd-html5-backend@2.4.1/dist/ReactDnDHTML5Backend.min.js"></script>
    <script crossorigin src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>

I couldn't run the project because it shows an error

react.js:1 Uncaught ReferenceError: require is not defined

Check this image

replace `export { Board };` with `export default Board` and import by `import Board from 'Board';` — Jigar Shah, Sep 28 '18 at 11:15
Possible duplicate of [Do I need require js when I use babel?](https://stackoverflow.com/questions/31593694/do-i-need-require-js-when-i-use-babel) — Sagiv b.g, Sep 28 '18 at 11:16
`{}` is used when you are importing only some specific export, in your case you have created a separate file so definitely you are creating only one class Board — Jigar Shah, Sep 28 '18 at 11:16
@RIYAJKHAN I don't know if i am using any build tool. I am just using cdn and text editor — Shadow, Oct 01 '18 at 05:21

Amruth · Answer 1 · 2018-09-28T11:16:53.933

0

Import Board like this.

import { Board } from './Board';

Or export component like this in Board.js.

export default Board ;

import like this in Game.js

import Board from './Board';

edited Sep 28 '18 at 11:16

answered Sep 28 '18 at 11:07

Amruth

5,792
2
28
41

post some more log – Amruth Sep 28 '18 at 11:09
add {} braces since you are exporting using export{} – Amruth Sep 28 '18 at 11:11
I have added a screenshot. Check it – Shadow Sep 28 '18 at 11:11
Where should i add braces? – Shadow Sep 28 '18 at 11:12
1

in `board.js` you are exporting like this `export { Board };` that's why, if you are exporting like `export default Board ;` then no need of `{}` – Amruth Sep 28 '18 at 11:13
in ES6 it is required to use {}? – Shadow Sep 28 '18 at 11:20
i mean while importing, try my ans or it might be problem with your babel version which you are using. – Amruth Sep 28 '18 at 11:21
1

I guess this should work as it is, like @AmruthLS says , chekc this https://stackblitz.com/edit/react-7zmwsa and still your facing this issue then the problem lies in your build tool – Jayavel Sep 28 '18 at 11:40
@Jayavel. Ya i tried changing import react and react dom from `index.js` and added respective cdn in `index.html`. It works. I am not using any other code. So how can i resolve the build tool issue ? – Shadow Oct 01 '18 at 05:09
1

For a simple working demo, referring cdn and working in a single html is fine, in rear future you may transpile lots of files like es6 to es5. For that we use tools like webpack , babel, grunt, there will be problems if you missed something while configuring this – Jayavel Oct 01 '18 at 05:58

score 0 · Answer 2 · answered Sep 28 '18 at 11:39

0

In your Board component (Board.js), you can do something like this:

export class Board extends React.Component {
  // code 
}

In your Game component (Game.js), import it by doing:

import { Board } from './Board';

answered Sep 28 '18 at 11:39

C.RaysOfTheSun

706
1
6
9

1

Are you using a bundler like Webpack? If not, see this [`post`](https://stackoverflow.com/questions/38219311/reactjs-uncaught-referenceerror-require-is-not-defined) – C.RaysOfTheSun Sep 28 '18 at 11:49
No. Is it required even while using cdn ? – Shadow Oct 01 '18 at 05:02

Cannot import class in React

2 Answers2