So for my ReactJs project, I am using absolute path for import, like this import {button} from /buttons

instead of relative path like this: import {button} from ../../buttons

It works fine for npm start, but when I try to build with npm run build I get the following error:

ERROR in ./src/Admin/Setting/Components/StepTwo.js 25:0-54
Module not found: Error: Can't resolve 'assets/theme/logoicon/edit.png' in 'C:\Users\nayeer\source\repos\project\src\Admin\Setting\Components'
 @ ./src/Admin/Setting/index.js 3:0-43 16:59-66
 @ ./src/Admin/Setting/index.js 175:0-92 685:15-30
 @ ./src/AdminLayout/AppMain/index.js
 @ ./src/Admin/MainAdmin/index.js 29:0-48 187:46-53
 @ ./src/index.js 7:0-42 62:10-19

How do I build the project with the relative path as well?

Here is my jsconfig.json :

{
  "compilerOptions": {
    "baseUrl": "./src"
  },
  "include": ["src"]
}

Here is my webpack.config.js. I added in resolve.alias with my base folder being src but it didn't seem to work:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");

const isProduction = process.env.NODE_ENV == "production";

const stylesHandler = isProduction
  ? MiniCssExtractPlugin.loader
  : "style-loader";

const config = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
  },
  devServer: {
    open: true,
    host: "localhost",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),

    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        loader: "babel-loader",
      },
      {
        test: /\.s[ac]ss$/i,
        use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
      },
      {
        test: /\.css$/i,
        use: [stylesHandler, "css-loader", "postcss-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    alias: {
      Components: path.resolve(__dirname, 'src')
    }
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";

    config.plugins.push(new MiniCssExtractPlugin());

    config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
  } else {
    config.mode = "development";
  }
  return config;
};

CodePudding user response：

In the Webpack configuration file, add resolve.alias in order to create aliases and to import modules more easily.

module.exports = {
  //...
  resolve: {
    alias: {
      Components: path.resolve(__dirname, 'src/components/')
    }
  }
}

For instance, all modules that live inside src/components/ can now use absolute paths.

And for the VS code to recognize the path

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"]
    }
  },
  "exclude": ["node_modules"] 
}