Module not found: Error: Can't resolve './components/PropTest1' - React JS

Question

I have the following directory structure for my REACTJS app

/ReactJs
-dist
--app
-node_modules
-src
--app
--app/Hello.jsx
----components
----components/PropTest1.jsx
-src/main.html 
package.json 
webpack.config.js

My Hello.jsx code is:

import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';

import PropTest1  from "./components/PropTest1"



var dest = document.querySelector('#container');

class Hello extends Component {
    render() {
        return (
        <div>
        <h1>Hello World</h1>
        <PropTest1 />
        </div>

        );

    }

}

render(<div><Hello /></div>, dest);

and PropTest1.jsx code is

import React, { Component } from 'react';



class PropTest1 extends Component {
    render() {
        return (
            <div>
              <p>  My name is no one</p>
            </div>
        );
    }
}

export default PropTest1;

and my webpack.config.js is

var webpack = require('webpack');
var path = require('path')

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, 'src') + "/app/Hello.jsx",
  output: {
    path: path.resolve(__dirname, 'dist') + "/app",
    filename: 'bundle.js',
    publicPath: '/app/'
  },
  module: {
          rules: [{
            test: /\.jsx?/,
            include: path.resolve(__dirname,'src'),  
            loader:'babel-loader'
          }]
  },
  resolve: {
    extensions: ['*', '.js', '*.jsx']
}
};

When I am doing

npm run build

I am getting Module not found: Error: Can't resolve './components/PropTest1'

What looks wrong with the above project, please check.

EDIT: I have added the resolve configuration in my webpack.config.js

Hamza El Aoutar · Accepted Answer · 2019-08-10T14:31:29.530

13

The issue here is that you didn't specify the file extension (.jsx) while importing your component (import PropTest1 from "./components/PropTest1")

To solve this, you need to update Webpack config and add a resolve property, which will make Webpack look for files named (in your example) PropTest1.js, PropTest1.jsx until it finds the right one ...

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, 'src') + "/app/Hello.jsx",
  ...,
  resolve: {
      extensions: ['', '.js', '.jsx']
  }
};

edited Aug 10 '19 at 14:31

answered May 09 '18 at 14:49

Hamza El Aoutar

5,292
2
17
23

According to tutorials online they said not to include the extension name while importing a component ? – RHM May 09 '18 at 14:55
1

You won't be adding the extension, Webpack will. (`resolve.extensions` is used to generate all the possible paths to the module) – Hamza El Aoutar May 09 '18 at 14:56
1

I just added the resolve in the webpack config but I am still getting the same error, you can see my updated config in the question I have edited just now – RHM May 09 '18 at 15:00
1

There was a typo in my answer, remove the `*` before `jsx` ( it should be `.jsx` and not `*.jsx` – Hamza El Aoutar May 09 '18 at 15:06
Even after adding the above solution, it not works try the various combination of file inclusion like `../yourfile` ,`./yourfile` or `yourfile`. one of will should work for you. – Gopal Sharma Nov 27 '18 at 05:59
1

Remove the empty entry because webpack throws an error, it should look like this: `extensions: ['.js', '.jsx']`. – dennisbot Apr 16 '19 at 16:08
thanks man this trick help me to solve vue js error – msayubi76 Jan 26 '21 at 19:12

score 3 · Answer 2 · answered May 09 '18 at 14:49

3

Currently,it is looking for components directory within app directory so, you need to use ..

import PropTest1  from "../components/PropTest1"

answered May 09 '18 at 14:49

CodeZombie

2,027
3
16
30

score 0 · Answer 3 · answered Oct 10 '20 at 18:07

I found the issue with name of the file. While doing import I had

import Login from "./login";

While name of the file was Login.js

Running on the local machine was not giving error but when I was running on linux, it was giving me a similar error as above.

Module not found: Error: Can't resolve './components/PropTest1' - React JS

3 Answers3

Linked