Module not found: Error: Can't resolve './app' in '/home/user/Desktop/my_app/src'

Question

I'm starting to create my application, so I implemented the project configuration using webpack. The project structure is:

node_modules
public
|----bundle.js
|----index.html
src
|----app.jsx
|----index.jsx
|----components
     |-----appBar.jsx

webpack.config.jsx:

const path = require('path');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.jsx'),
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        compress: true,
        port: 9000
    }
}

app.jsx:

import ButtonAppBar  from './components/appBar';
import React from 'react';


class App extends React.Component {
    render(){
        return (
            <div>
                <ButtonAppBar />
            </div>
        )
    }
};

export default App;

index.html:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'


ReactDOM.render(<App />, document.getElementById('app'));

package.json:

    "dependencies": {
    "@material-ui/core": "^1.5.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.17.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }

I run this instruction:

webpack --display-error-details

I got this error:

ERROR in ./src/index.jsx
Module not found: Error: Can't resolve './app' in '/home/user/Desktop/my_app/src'
resolve './app' in '/home/user/Desktop/my_app/src'
  using description file: /home/user/Desktop/my_app/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/user/Desktop/my_app/package.json (relative path: ./src/app)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.json doesn't exist
      as directory
        /home/user/Desktop/my_app/src/app doesn't exist
[/home/user/Desktop/my_app/src/app]
[/home/user/Desktop/my_app/src/app.wasm]
[/home/user/Desktop/my_app/src/app.mjs]
[/home/user/Desktop/my_app/src/app.js]
[/home/user/Desktop/my_app/src/app.json]
 @ ./src/index.jsx 11:11-27

I found similar questions such as webpack: Module not found: Error: Can't resolve (with relative path) and Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

score 20 · Accepted Answer · answered Aug 21 '18 at 13:27

20

In order to resolve your problem add the extensions to your webpack.config.js.

    module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

For more information take a look at resolve.extensions

answered Aug 21 '18 at 13:27

P.A

741
4
16

score 5 · Answer 2 · answered Aug 21 '18 at 13:11

5

In index.js add the file extension to app.

import App from './app.jsx'

This is needed because you didn't add resovle.extensions option to the webpack config, so it searches for a folder named 'app' with index.js inside it.

Webpack Resolve Docs

answered Aug 21 '18 at 13:11

yotke

1,170
2
12
26

score 1 · Answer 3 · edited Dec 23 '19 at 14:18

I had similar issue and i was able to resolve it using the steps below;

To get more details about the error type webpack --display-error-details

this output something like: "field browser doesn't contain a valid alias configuration"

i edit my package.json

main: "./js/script.js" this is the path to my js file

3.i edit my settings.js

exports.themeLocation = './wp-content/themes/fictional-university-theme'

i edit my webpack.config.js - i added this line to module.exports

resolve: {
extensions:['.js', '.jsx']
},

score 0 · Answer 4 · edited Apr 07 '21 at 08:05

0

Make sure that the imports from the same folder starts with ./

Example:

import component from './component';

edited Apr 07 '21 at 08:05

Syscall

19,327
10
37
52

answered Aug 21 '18 at 13:19

score 0 · Answer 5 · answered Sep 24 '21 at 13:31

0

For me the issue was I had two resolve block in my webpack.config.js which was causing issues!

answered Sep 24 '21 at 13:31

Mo Beigi

1,614
4
29
50

Module not found: Error: Can't resolve './app' in '/home/user/Desktop/my_app/src'

5 Answers5

Linked