webpack - ReactJS use header.js in main.js. header.js is not found in node_modules -

i have genrated react-webpack project yo webpeck-react generetor. https://github.com/lemueller/musicplayer-by-react.git

i use header.js in main.js. error:

module not found: error: cannot resolve module 'header' in d:\webdevelop\reactjs\musicplayer\musicplayer-by-react\src\components resolve module header in d:\webdevelop\reactjs\musicplayer\musicplayer-by-react\src\components looking modules in d:\webdevelop\reactjs\musicplayer\musicplayer-by-react\node_modules d:\webdevelop\reactjs\musicplayer\musicplayer-by-react\node_modules\header doesn't exist (module directory) resolve 'file' header in d:\webdevelop\reactjs\musicplayer\musicplayer-by-react\node_modules

how can solve them? in advace!

main.js:

require('normalize.css/normalize.css'); require('styles/app.css');  import react, {component} 'react'; import header 'header.js'; //import header 'header'; //require('header.js');   let yeomanimage = require('../images/yeoman.png');  class appcomponent extends react.component {   render() {     return (       <div classname="index">         <img src={yeomanimage} alt="yeoman generator" />         <div classname="notice">please edit <code>src/components/main.js</code> started!</div>         <header />       </div>     );   } }  appcomponent.defaultprops = { };  export default appcomponent; 

header.js:

import react, {component} 'react'; import '../styles/header.less';  export default class header extends component {      render() {         return (             <div classname="component-header">                 <img src={require('../../images/logo.png')}  width={40} classname="-col-auto"/>                 <h1 classname="caption">music player react</h1>             </div>         );     } } 

in js, there difference in how import file depending on if custom js module or project file.

for custom js module use below. (generally taken npm or yarn)

import 'module'; // in node_modules folder 

notice usage, without slash(/) or period(.), means find module inside node_modules folder.

but file made in project imported like:

import './module'; // same directory import './module'; // parent directory, 1 dir level 

notice usage, starting ./

• ./ means find file in same directory.
• ../ means find file in parent directory.