I have this code in my src/ponents:

import PropTypes from 'prop-types';
import React from 'react';
import Typography from 'Typography'; 

I have one file named Typography.js in the same directory.

I have two Ubuntu systems. In one system, this code is working fine, and in the other, it gives this error on line 3:

Module not found: Can't resolve 'Typography'

If I use import Typography from './Typography'; then it won't give me the error, but why does the same code work on one system but not the other?

Should I have used import Typography from './Typography'; everywhere?

here is my webpack-config

resolve: {
    modules: ['node_modules', paths.appNodeModules].concat(
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
    alias: {
      'babel-runtime': path.dirname(
        require.resolve('babel-runtime/package.json')
      ),
      'react-native': 'react-native-web',
    },
    plugins: [
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
    ],
  }

I have this code in my src/ponents:

import PropTypes from 'prop-types';
import React from 'react';
import Typography from 'Typography'; 

I have one file named Typography.js in the same directory.

I have two Ubuntu systems. In one system, this code is working fine, and in the other, it gives this error on line 3:

Module not found: Can't resolve 'Typography'

If I use import Typography from './Typography'; then it won't give me the error, but why does the same code work on one system but not the other?

Should I have used import Typography from './Typography'; everywhere?

here is my webpack-config

resolve: {
    modules: ['node_modules', paths.appNodeModules].concat(
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
    alias: {
      'babel-runtime': path.dirname(
        require.resolve('babel-runtime/package.json')
      ),
      'react-native': 'react-native-web',
    },
    plugins: [
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
    ],
  }

• javascript
• reactjs

• Is default export or export? Where you have Typography located? – Hemadri Dasari Commented Jan 31, 2019 at 6:07
• export and in same directory where my main file located. – Harsh Patel Commented Jan 31, 2019 at 6:09
• 2 Got the same problem 2 days back but didn't found solution – lazzy_ms Commented Jan 31, 2019 at 7:01
• 1 If you're down voting the question the mention the reason as well.Else I don't understand the reason. If you think that this is silly or not so hard question then give answer with proper explanation. – Harsh Patel Commented Jan 31, 2019 at 13:29
• Are you, by chance, using webpack in your project? If yes, can you share with us the config file of webpack, especially resolve option – blaz Commented May 3, 2019 at 8:26

5 Answers 5

I have the same problem when trying to use a front end template, in which they always use

import Typography from 'Typography';

instead of the relative path:

import Typography from './Typography'

And the template actually works in one laptop, and not the other.

And it seems to have something to do with the environment variable NODE_PATH, some how it is different between laptops, I am not sure why.

So, my quick fix here is to create a file named .env in the same folder as package.json, with this one line NODE_PATH=./src, this will helps setting NODE_PATH to ./src value.

Err, hope you still need the answer!

Since the file is in same directory

If it’s not default export You should import it like

  import { Typography} from './Typography'; 

If default export, you should import it like

 import Typography from './Typography'; 

Module not found: Can't resolve <module name> in <file path>

I ran

npm install
npm build
npm start

Now the module has been installed under dependencies in package.json, and my web app starts in http://localhost:3000/, the port specified in launch.json.

https://webpack.js/configuration/resolve/#resolvemodules

resolve.modules [string]: ['node_modules']

Tell webpack what directories should be searched when resolving modules.

Absolute and relative paths can both be used, but be aware that they will behave a bit differently.

A relative path will be scanned similarly to how Node scans for node_modules, by looking through the current directory as well as its ancestors (i.e. ./node_modules, ../node_modules, and on).

With an absolute path, it will only search in the given directory.

webpack's resolve.modules is an array containing paths that webpack will use to resolve directory in your code. So, if you use:

import Typography from 'Typography'; 

the array in resolve.modules should contain src/ponents or any equivalent so that webpack knows where to look for folder Typography. You can try to look into that configuration part to see if the same path is there.

For me, react was importing using relative paths.

For my project, i made the src folder the go to folder.

create a jsconfig.json file in your root dir(where package.json is located) and add this:

{
  "pilerOptions": {
    "baseUrl": "src"
  }
}

Also create an .env or .env.template file in the project's root dir(where package.json is located) if none exist, and add

NODE_PATH=src
// and if this does not work try
NODE_PATH=./src

This should allow react to pile.