How to debug and check what causes my goto code fail to work? about react-dev-inspector HOT 2 CLOSED

updated:
I tried to add babel.config.js in my project root folder

module.exports = function(api) {
  const isDevelopment = api.env('development');

  return {
    "presets": [
      [
        "@babel/preset-react",
        {
          "runtime": "automatic",
          "development": isDevelopment
        }
      ]
    ]
  };
};

or using the .babelrc as

{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic",
      "development": true
    }]
  ]
}

and modified my webpack.config.js as

{
        // Ignore test and story files
        test: /^((?!([-.]test|\.story)\.).)*\.ts(x?)$/,
        // Ignore unnecessary folders
        exclude: [/node_modules/, /node-sample/, /__mocks__/],
        include: [packagesDir],
        use: [
          { loader: 'babel-loader' },
          {
            loader: "esbuild-loader",
            options: {
              tsconfig: `${packageDir}/tsconfig.webpack.json`
            }
          }
        ]
      }

still failed to generate the debugSource & data-inspector in the div.

from react-dev-inspector.

@alexya Thanks for the detailed issue report! Here are some key points for troubleshooting:

• The gotoVSCode() function directly calls the URL Scheme for the VSCode app from the browser. This means you don't need the server-side middleware launchEditorMiddleware.

  

• Webpack's loaders in module.rule run in reverse order. From what you’ve shown, babel-loader processes the output from esbuild-loader, this is the same as babel(esbuild(code)), so it misses the JSX syntax to transform in babel-loader.

• esbuild can indeed generate the debugSource info when transforming JSX under jsx-dev option:

  • Docs: https://esbuild.github.io/api/#jsx-dev
  • Online Demo: https://esbuild.github.io/try/#dAAwLjIwLjIALS1sb2FkZXI9dHN4IC0tanN4PWF1dG9tYXRpYyAtLWpzeC1kZXYAY29uc3QgYSA9IDxkaXY+PC9kaXY+

  So you don't need the babel-loader, maybe make sure have use esbuild>=0.14.54 to use the jsxDev option, and add that options to your config:

  {
    test: /\.tsx?$/,
    loader: 'esbuild-loader',
    options: {
      loader: 'tsx',
      // https://github.com/evanw/esbuild/blob/v0.20.0/lib/shared/types.ts#L58-L67
      jsx: 'automatic',
      jsxDev: process.env.NODE_ENV === 'development',
    },
  },

Hope this helps!

from react-dev-inspector.