1

I have gone through this solution. I have tried placing the resolve object both inside rules and outside rules but I still get the same error.

I have tried also tried updating npm and reinstalling it just in case but no luck.

Directory structure:

- src/
  - components/
    - Card/
      - card.jsx
    - Sidebar.js
    - Dashboard.js
  - app.js

Since I am using babel-loader, I have imported my jsx files like this.

import Card from "./Card/Card";

I have tried importing using the ".jsx" as well but I still get the same error of not being resolved.

Error message after running webpack:

 ERROR in ./src/components/Sidebar.js
 Module not found: Error: Can't resolve './Card/Card' in 
  'E:\React\accounting\src\components'
   @ ./src/components/Sidebar.js 40:0-31 190:29-33
   @ ./src/components/Dashboard.js
   @ ./src/app.js
   @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js

webpack.config.js file:

 const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
  path: path.join(__dirname, 'public'),
  filename: 'bundle.js'
},
module: {
  rules: [{
    loader: 'babel-loader',
    test: /\.jsx?$/,
    exclude: /node_modules/,
    resolve: { 
       extensions: [".jsx", ".js", ".json"] 
    }
   }, {
    test: /\.s?css$/,
    use: [ 'style-loader', 'css-loader', 'sass-loader' ]
   }, {
    test: /\.(png|jpg|gif)$/i,
    use: [{
       loader: 'url-loader',
       options: {
         limit: 8192
       }
    }]
  }]
 },
 devtool: 'cheap-module-eval-source-map',
 devServer: {
    contentBase: path.join(__dirname, 'public')
  }
 };`enter code here`

.babelrc file

{
"presets": [
    "@babel/env",
    "@babel/preset-react"
],
"env": {
    "production": {
        "plugins": [
            ["emotion", { "hoist": true }]
        ]
    },
    "development": {
        "plugins": [
            ["emotion",
                { "sourceMap": true, "autoLabel": true }
            ],
            "transform-class-properties",
            "transform-react-jsx"
        ]
    }
}
}

package.json dependencies

"dependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@material-ui/core": "^3.1.1",
    "@material-ui/icons": "^3.0.1",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.2",
    "babel-plugin-emotion": "^9.2.10",
    "babel-plugin-import-rename": "^1.0.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "css-loader": "^1.0.0",
    "emotion": "^9.2.10",
    "file-loader": "^2.0.0",
    "live-server": "^1.2.0",
    "node-sass": "^4.9.3",
    "normalize.css": "8.0.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-modal": "^3.5.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "validator": "^8.0.0",
    "webpack": "^4.20.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.9"
}
rgb_jewel
  • 81
  • 2
  • 10

2 Answers2

3

This solution works for me, I provide these files as a reference. Hopefully it helps.

1. the webpack.config.js file:

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode:'development',
  devServer: {
    hot: true,
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
         test:/\.(js|jsx)?$/,
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'React App',
      template: './public/index.html'
    })
  ]
};

2. the .babelrc file:

{
  "presets": ["env", "react", "stage-2"]
}

3. the package.json file:

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.0",
    "react-hot-loader": "^4.3.3",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.15.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "uuid": "^3.3.2"
  }
}
You Nguyen
  • 9,961
  • 4
  • 26
  • 52
0

it maybe that you don't add your webpack config path in instruct

change you package.json

"scripts": {
    "start": "npx webpack-dev-server --config your webpackpath"
  },