React import fails to reference error

Question

React fails to some weird error when importing another component. If I remove ChristmasMap references in App.js then app works fine. But I want to import the ChristmasMap. Any help?

App.js

import React, { Component } from 'react';
import './ChristmasMap';

class App extends Component {
  render() {
    return (
      <div>
        <p>asd</p>
        <ChristmasMap />
      </div>
    );
  }
}

export default App;

ChristmasMap.js

import React, { Component } from 'react';

class ChristmasMap extends Component {
  render(){
    return (
      <div>
        component
      </div>
    );
  }
};

export default ChristmasMap;

And the error I'm getting is App.js:56 Uncaught ReferenceError: ChristmasMap is not defined(…)

Answer 1

You should do:

import ChristmasMap from './ChristmasMap'