How to debug and check what causes my goto code fail to work?

[alexya]

I have followed the doc

1. add the inspect component

   <>
     <Inspector
       onInspectElement={({ codeInfo }) => {
         gotoVSCode(codeInfo);
       }}
       onClickElement={params => {
         console.log(`The inspect element is clicked:`, params);
       }}
     />
     <App />
   </>

2. add the middleware after the Express object is created

   
   const app = express();

app.use(launchEditorMiddleware);

3. And after running `node server.js` to start, and opening our website index.html from Chrome, press Ctrl+Shift+Alt+C, I can inspect the element in the UI. When clicking it, the console log will print the "The inspect element is clicked: " with the param data. The `codeInfo` is undefined I found. In the "Elements" of the Chrome developer tool's tab, I noticed that there is no `data-inspector-*` e.g. "data-inspector-relative-path" for any `div` element. 

I am not sure if there is something wrong with our webpack5 config. Is it caused by the @babel config as our project don't use the @babel, we are using the `esbuild-loader` and Typescript compiler (version 5.3.2). 
e.g. 

const packageDir = path.join(__dirname, ".."); const packagesDir = path.join(packageDir, "..");

// other code

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

Any help will be very helpful. Thanks.

p.s.:
"@babel/preset-env@^7.11.0"
"@babel/preset-react@^7.16.7"

webpack --version

  Packages:
    babel-loader: ^9.1.2 => 9.1.2
    clean-webpack-plugin: ^4.0.0 => 4.0.0
    copy-webpack-plugin: ^11.0.0 => 11.0.0
    esbuild-loader: ^4.0.2 => 4.0.2
    file-loader: ^4.0.0 => 4.3.0
    fork-ts-checker-webpack-plugin: ^8.0.0 => 8.0.0
    html-webpack-plugin: ^5.5.0 => 5.5.0
    license-checker-webpack-plugin: ^0.2.1 => 0.2.1
    node-loader: 2.0.0 => 2.0.0
    raw-loader: ^4.0.2 => 4.0.2
    serverless-webpack: ^5.11.0 => 5.11.0
    webpack: ^5.89.0 => 5.90.0
    webpack-bundle-analyzer: ^4.7.0 => 4.7.0
    webpack-cli: ^5.1.4 => 5.1.4
    webpack-dev-middleware: ^6.0.1 => 6.0.1
    webpack-dev-server: ^4.11.1 => 4.11.1
    webpack-manifest-plugin: ^5.0.0 => 5.0.0
    webpack-node-externals: ^3.0.0 => 3.0.0
    worker-loader: ^3.0.8 => 3.0.8

[alexya]

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.

[zthxxx]

@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!