javascript - React with Ecmascript6 classes problems using Chrome - Stack Overflow

admin管理员组

文章数量:1196758

I'moving to React ES6 as the recommended way to write React classes. I'm starting from a simple example:

import React from 'react';
import ReactDOM from 'react-dom';

require('../node_modules/font-awesome/css/font-awesome.css');
require('../node_modules/bootstrap/dist/css/bootstrap.css');

require('jquery');
require('bootstrap');

import Dashboard from './components/Dashboard/Dashboard';

ReactDOM.render(
  <Dashboard/>,
  document.getElementById('react-container')
);

And my component in ES6:

import React from 'react';


class Dashboard extends React.Component {
  render() {
    return <h1>Hello, Don Trump</h1>
  }
}

I'm getting the following error on Chrome 55:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
    at invariant (VM1093 bundle.js:9069)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (VM1093 bundle.js:23166)
    at ReactCompositeComponentWrapper.performInitialMount (VM1093 bundle.js:23589)
    at ReactCompositeComponentWrapper.mountComponent (VM1093 bundle.js:23480)
    at Object.mountComponent (VM1093 bundle.js:16018)
    at mountComponentIntoNode (VM1093 bundle.js:28717)
    at ReactReconcileTransaction.perform (VM1093 bundle.js:17017)
    at batchedMountComponentIntoNode (VM1093 bundle.js:28739)
    at ReactDefaultBatchingStrategyTransaction.perform (VM1093 bundle.js:17017)
    at Object.batchedUpdates (VM1093 bundle.js:26233)

I thinks there is something simple I'm missing. Help appreacited.

I'moving to React ES6 as the recommended way to write React classes. I'm starting from a simple example:

import React from 'react';
import ReactDOM from 'react-dom';

require('../node_modules/font-awesome/css/font-awesome.css');
require('../node_modules/bootstrap/dist/css/bootstrap.css');

require('jquery');
require('bootstrap');

import Dashboard from './components/Dashboard/Dashboard';

ReactDOM.render(
  <Dashboard/>,
  document.getElementById('react-container')
);

And my component in ES6:

import React from 'react';


class Dashboard extends React.Component {
  render() {
    return <h1>Hello, Don Trump</h1>
  }
}

I'm getting the following error on Chrome 55:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
    at invariant (VM1093 bundle.js:9069)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (VM1093 bundle.js:23166)
    at ReactCompositeComponentWrapper.performInitialMount (VM1093 bundle.js:23589)
    at ReactCompositeComponentWrapper.mountComponent (VM1093 bundle.js:23480)
    at Object.mountComponent (VM1093 bundle.js:16018)
    at mountComponentIntoNode (VM1093 bundle.js:28717)
    at ReactReconcileTransaction.perform (VM1093 bundle.js:17017)
    at batchedMountComponentIntoNode (VM1093 bundle.js:28739)
    at ReactDefaultBatchingStrategyTransaction.perform (VM1093 bundle.js:17017)
    at Object.batchedUpdates (VM1093 bundle.js:26233)

I thinks there is something simple I'm missing. Help appreacited.

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Jan 20, 2017 at 17:40 Ross Allen 44.9k1414 gold badges9999 silver badges9797 bronze badges asked Jan 20, 2017 at 17:23 MendesMendes 18.4k3838 gold badges165165 silver badges282282 bronze badges 1

• you need to add "export default" for the Dashboard Component – Khalid Azam Commented Jan 21, 2017 at 23:53

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 17

The error message might have it right:

You likely forgot to export your component from the file it's defined in.

Export your Dashboard component like the following:

import React from 'react';

class Dashboard extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

export default Dashboard;

Add

export default Dashboard

At the end of your component; So the new code will be

class Dashboard extends React.Component {
  render() {
    return <h1>Hello, Don Trump</h1>
  }
}
export default Dashboard;

You need to export the class. You can actually export and declare at the same time

import React from 'react';

export default class Dashboard extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

本文标签： javascriptReact with Ecmascript6 classes problems using ChromeStack Overflow