does not go to the editor when clicked

it shows errors but if you click in the browser it doesn’t go to the code editor

const path = require("path");
const webpack = require("webpack");
const HTMLwebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetPlugin = require("optimize-css-assets-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ErrorOverlayPlugin = require("error-overlay-webpack-plugin");

const isDev = process.env.NODE_ENV === "development";
const isProd = !isDev;

const cssLoader = (extra) => {
  const loaders = [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: isDev,
        reloadAll: true,
        publicPath: "../",
      },
    },
    {
      loader: "css-loader",
      options: {
        url: true,
      },
    },
  ];

  if (extra) {
    loaders.push(extra);
  }

  return loaders;
};

module.exports = {
  context: path.resolve(__dirname, "src"),
  mode: "development",
  entry: {
    index: "./index.js",
  },
  output: {
    filename: isDev ? `js/[name].js` : `js/[name].[contenthash:8].chunk.js`,
    path: path.resolve(__dirname, "build"),
  },
  devServer: {
    port: 4200,
    hot: isDev,
  },

  optimization: {
    moduleIds: "hashed",
    splitChunks: {
      chunks: "all",
      name: false,
    },
    minimizer: [].concat(
      isProd
        ? [
            new OptimizeCssAssetPlugin(),
            new TerserWebpackPlugin(),
          ]
        : []
    ),
  },
  resolve: {
    extensions: [".js", ".json"],
  },
  plugins: [
    new HTMLwebpackPlugin({
      template: "./index.html",
      minify: {
        collapseWhitespace: isProd,
      },
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([

      {
        from: path.resolve(__dirname, "src/favicon.ico"),
        to: path.resolve(__dirname, "build"),
      },
    ]),
    new MiniCssExtractPlugin({
      filename: isDev ? `[name].css` : "css/[name].[hash:8].css",
    }),
    new ErrorOverlayPlugin(),
  ],

  devtool: isDev ? "cheap-module-source-map" : "",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: cssLoader(),
      },

      {
        test: /\.(png|jpg|svg|gif)$/,
        loader: "file-loader",
        options: {
          outputPath: "img",
        },
      },
      {
        test: /\.(ttf|woff|woff2|eot)$/,
        use: ["file-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: cssLoader("sass-loader"),
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-typescript"],
          plugins: ["@babel/plugin-proposal-class-properties"],
        },
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react"],
              plugins: ["@babel/plugin-proposal-class-properties"],
            },
          },
          "eslint-loader",
        ],
      },
    ],
  },
};

[omgoshjosh]

so i actually just brought in all of react-dev-utils because its 2020 and the singularity is gonna happen soon anyway so why worry about performance or bundle size etc…

anyway, i have found what is working for me is based on a few things.

1. https://github.com/facebook/create-react-app/issues/2344#issuecomment-303678582 a. first i tried what dan abramov (gaeron) says in this issue, using react-error-overlay
2. https://github.com/facebook/create-react-app/issues/3097#issuecomment-380891629 a. then i got it up and running by installing the full react-dev-utils and using the suggestion of basically just replacing some strings instead of using the ones provided by abramov (gaeron) in the previous issue b. replace react-error-overlay with react-dev-utils/webpackHotDevClient c. replace react-error-overlay/middleware with react-dev-utils/errorOverlayMiddleware
3. webpack config option: output.devtoolModuleFilenameTemplate a. here’s where this open issue comes in, basically i was finding that the link i would click in the browser would not send me to the editor as i had wished and per my investigation, i found that the url given were paths/filenames to files that obviously didn’t exist b. i found the link above which was admittedly not super clear to me, but looked familiar with a reference to this default value c. 'webpack://[namespace]/[resource-path]?[loaders]'
4. https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L231 a. and here’s what started opening the editor on click for me. basically i just copied the line for that webpack config key/value for dev mode and put it in my dev config and violá

'output': {
    // i added this one line to the rest of my output config in webpack.dev.config.js, which was otherwise left unchanged.
    'devtoolModuleFilenameTemplate': (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
}

so i guess what i’m trying to say is… that one config option is worth investigating as the potential solution somewhere for those who find this issue.

[gregberge]

@vjpr maybe we could find a way to make it work by default?