How do I set the 'preferRelative' option for webpack?

Viewed 15

I haven't used Webpack 5 for developing React at the start of my project and want to add it now. My problem is, that I worked with relative paths, which when running Webpack throws me this error message:

Module not found: Error: Can't resolve 'App' in '...Scripts\react\src' Did you mean './App'?

As a solution I could add a './' to all import paths, but that itself would be a huge task I want to avoid.

Another message suggests the following:

If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too

My question is how and where would I set this 'preferRelative' option? I have now researched for a whole day, but couldn't find any solution for my problem.

This is my webpack.config.js for reference:

const path = require("path");
const WebpackNotifierPlugin = require("webpack-notifier");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  devtool: "inline-source-map",
  plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()],
  resolve: {
    extensions: [".js", ".jsx", ".ts"],
  },
};

Your help is very much appreciated!

0 Answers
Related