Typescript Sourcemaps

[Benjadahl]

I just started using Vite and the plugin, so forgive me for any ignorance.

My project is written in Typescript.

When running the dev server with npx vite, the sourcemaps reported by devtools always seem to be lower than the actual line numbers of the source files. Looking at the sourcemaps, it seems all typescript related code is stripped from the source map leading to this effect.

So:

1 interface testInterface {
2     foor: string;
3     bar: string;
4 }
5 console.log("Test");

Would turn into:

1 console.log("Test");

Which would move the console.log to line 1 in the sourcemap instead of line 5.
tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "target": "es2021",
    "module": "ES2022",
    "moduleResolution": "node",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": true,
    "types": [
      "chrome",
      "node",
      "vite/client"
    ],
    "typeRoots": [
      "shim.d.ts"
    ]
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "incude": [
    "src"
  ]
}

vite.config.ts

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'


export default defineConfig({
  plugins: [
    crx({ manifest }),
  ]
})

Have I misconfigured or is this an issue to be reported here or upstream? Thanks in advance :)

[evanb2]

I think you need to pipe the build through the vite vue plugin prior to crx():

import { defineConfig } from 'vite'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'
// add plugin-vue
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    // call it first before any other plugins so that all of your Vue and TS code gets compiled
    vue(),
    crx({ manifest }),
  ]
})

[Benjadahl]

Were not using Vue in our build. So I'm not sure that would make sense?

[jacksteamdev]

I've added inline sourcemap support for content scripts in #701