create react app source maps in development not working (typescript)

Question

I can't see the source in development in a create react app with typescript. it points to bundle.js and not the source. See image attached.

Any ideas how to show source maps?

Answer 1

I struggled with this problem (React 18 TypeScript bootstrapped with CRA) until now.

I had to eject to solve the issue, this is what worked for me:

1. npm run eject (ensure you've committed before doing this)
2. in ./config/webpack.config.js edit the following line this way:

    return {
    // ...
    devtool: "eval-source-map",
    // ...
    }

3. In your tsconfig.json ensure that:

 {
  "compilerOptions": {
    "sourceMap": true,

4. At this point it should be working. The output will look like this:

    at div
    at Dashboard (webpack-internal:///./src/pages/Dashboard/Dashboard.tsx:55:69)
    at Outlet (webpack-internal:///./node_modules/react-router/index.js:856:26)

5. (optional) Extra mile to improve readability

Since the look of the output bothered me, I've made a dirty console.error override in my App.tsx :

// In your "main" function, for me App.tsx
if (process.env.NODE_ENV !== "production") {
  const originalConsoleError = console.error;
  console.error = function (...args) {
  const modifiedArgs = args.map((arg) => {
    if (typeof arg === "string") {
      return arg.replace(/webpack-internal:\/\/\//g, "");
    }
    return arg;
   });
  originalConsoleError.apply(console, modifiedArgs);
  };
}

The output is now cleaner:

    at div
    at Dashboard (./src/pages/Dashboard/Dashboard.tsx:55:69)
    at Outlet (./node_modules/react-router/index.js:856:26)