reactjswebpackgeneratoryo

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

I have genrated a react-webpack project with yo webpeck-react generetor. https://github.com/LeMueller/musicplayer-by-react.git

I use header.js in Main.js. But i get always the 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 for 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 as directory) resolve 'file' header in D:\WebDevelop\ReactJS\musicplayer\musicplayer-by-react\node_modules

How can i solve them? Thanks in advace!

Main.js:

require('normalize.css/normalize.css');
require('styles/App.css');

import React, {Component} from 'react';
import Header from 'header.js';
//import Header from '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> to get started!</div>
        <Header />
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

header.js:

import React, {Component} from '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 by React</h1>
            </div>
        );
    }
}
Solution

  • In js, there is a difference in how to import a file depending on if its custom js module or a project file.

    For custom JS module we use it like below. (generally taken from npm or yarn)

    import 'module'; // in node_modules folder

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

    But for file which is made by you in the project is imported like:

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

    notice the usage, starting with the ./