反应：找不到模块'./WebpackMissingModule'

Question

I'm currently giving my first steps on React and I'm having some issues when trying to export components.

My current index.js file is as following:

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

import SearchBar from './components/search_bar';

const API_KEY = '...';

//Create a new component. It should output some html
const App = function(){
    return <div>
        <SearchBar />
    </div>;
}

ReactDOM.render(<App />, document.querySelector('.container'));

And my search_bar.js file:

import React from 'react';

const SearchBar = function(){
    return <input />;
};

export default SearchBar;

My current file structure may be seen in the following image:

The problem is that I'm not being able to import the SearchBar element. I'm having the error that can be seen on the image:

Cannot Find module './WebpackMissingModule'

Any idea on what may be causing this issue?

Answer 1

我也对此感到困惑，但刷新浏览器对我来说是固定的。

Answer 2

Seems the question has been asked before see if this solution helps:

Webpack Missing Module 'Module Not Found'

https://github.com/proj4js/proj4js/issues/214

npm install --save-dev npm-install-webpack-plugin

Usually I perform npm install name_of_module --save

goodluck