How to resolve module not found error in webpack/reactjs app?

Question

I have created a reactjs/webpack app with an component created in main.js:

import React from 'react';
import cube  from 'my-module';

class MainLayout extends React.Component {

    constructor(props) {
        super(props);
        console.log('testing=main constructor')

        console.log(cube(3));

    }


    render() {
        console.log('main render' )
        return (
            <div>hello</div>
        );
    }
}

export default MainLayout

I am trying to get my head around import and export in es6 and created a module in the same directory:

// module "my-module.js"
export default function cube(x) {
  return x * x * x;
}

However I am getting this error:

ERROR in ./app/components/layouts/main/main.js
Module not found: Error: Cannot resolve module 'my-module' in ...

How can I resolve this error?

Answer 1

If you don't specify a path (starting with ./) before the name of your module, webpack (using regular nodejs module resolution) will look for my-module in the nearest node_modules folder.

So if the file that contains your MainLayout class is in the same folder as the my-module.js then your import statement would look like:

import cube from './my-module'

If it was one level above it would look like:

import cube from '../my-module'

Then one above that:

import cube from '../../my-module'

and so forth.

It's possible to configure webpack with aliases or have it know about specific files that act like top-level modules. Another technique which I've found very useful is to structure your app like:

node_modules/
src/
  node_modules/
    app.js
    my-module.js

webpack.config.js

That way you can always look for any of your own modules without specifying a path since node will first look in your src/node_modules folder, then if it can't find it there, will look in your top level node_modules folder where all your npm packages live. If you do this though, make sure not to put src/node_modules in .gitignore!