Next.js Discord

Discord Forum

Source Maps not created for certain files

Unanswered
Maheśvara posted this in #help-forum
Open in Discord
MaheśvaraOP
I'm trying to setup source maps to use it with Sentry, however the issue I'm running into is that it seems like some files are being ignored to generate their source files.

I've found 1 post which seems to explain the issue: https://www.reddit.com/r/nextjs/comments/lz0oq0/how_to_load_sourcemaploader_in_nextconfigjs/
Let me explain a little more in detail.

The library is entirely on TS and is compiled with Rollup using ESM and CommonJS with sourcemap set to true for both, tsconfig and ESM & CommonJS. This generates the many components with their type definitions as index.esm.js, index.esm.js.map, index.js and index.js.map. Once the library is installed I symlink it with npm link in order to track whenever change I do to be reflected on the main app. At this point when I run the Next app I should be able not only to see source maps of my current project but the library ones but only index.esm.js is displayed, ignoring the TS source files mapped.

Just curious, how do you make the process in order to achieve this?

The issue seems to originate from the NextJS config for producing source maps.

3 Replies

MaheśvaraOP
The following loading.tsx generates a source map:
import { Skeleton } from "@ui/skeleton";

export default function Loading() {
  return (
    <ul className="mx-2 space-y-2">
      {Array.from({ length: 10 }, (_, index) => (
        <li
          key={"LoadingTrashVideoItem" + index}
          className="flex flex-1 flex-col rounded-lg border p-2 md:flex-row"
        >
          <Skeleton className="h-[100px] w-[150px] bg-zinc-400" />
          <div className="ml-2 flex flex-col gap-2 md:ml-4">
            <Skeleton className="h-6 w-40 bg-zinc-400" />
            <Skeleton className="h-4 w-20 bg-zinc-400" />
            <div className="flex items-center gap-2">
              <Skeleton className="h-6 w-6 rounded-full bg-zinc-400" />
              <Skeleton className="h-4 w-12 bg-zinc-400" />
            </div>
          </div>
        </li>
      ))}
    </ul>
  );
}
The following loading.tsx DOES NOT generate a source map:
import { Spinner } from "@nextui-org/spinner";

export default function Loading() {
  return (
    <Spinner
      size="lg"
      className="flex h-full w-full items-center justify-center"
    />
  );
}
The issue isn't exactly the same across my project, however the commonality is that all the files it occurs in are pretty simple.
Is there some way I can modify the existing Nextjs source map config or manually setup the source map generation in Nextjs?