vite-plugin breaks Vite dev server when build.rollupOptions.inputs are present

[denis-ismailaj]

Build tool

Vite

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

Original issue context: In a Svelte project I added a typescript file (which was not referenced in the project) to build.rollupOptions.input so it was processed and outputted as a separate file with the intent to dynamically import it.

This works when doing npm run build (vite build), but when doing npm run dev (vite) Rollup ends up trying to parse it as a javascript file.
This only occurs when the crx plugin is present.

Reproduction

To reproduce you only need an empty dir with these files in the root:

independent.ts

const ts: string = "typed variable";
console.log(ts);

package.json

{
  "type": "module",
  "devDependencies": {
    "@crxjs/vite-plugin": "^2.0.0-beta.23",
    "vite": "^5.1.2"
  }
}

vite.config.js

import {crx} from '@crxjs/vite-plugin';

export default {
    plugins: [
        crx({
            manifest: {
                "manifest_version": 3,
                "name": "CRXJS",
                "version": "1.0.0",
            }
        }),
    ],
    build: {
        rollupOptions: {
            input: [
                "independent.ts",
            ],
        },
    },
}

1. Run:

    npm install
    vite build  # ok
    vite  # Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
   

2. Comment out crx plugin in vite.config.js

3. Run:

    vite build  # ok
    vite  # ok
   

I should note that the same thing happens with vite@3.
I also tried overriding the build-related dependency versions of vite-plugin to be the latest ones, but that didn't lead to anything.

Logs

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
at error (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
at Module.error (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:12429:16)
at Module.tryParse (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:12806:25)
at Module.setSource (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:12711:24)
at ModuleLoader.addModuleSource (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:22153:20) {
code: 'PARSE_ERROR',
parserError: SyntaxError: Unexpected token (1:12)
at pp$4.raise (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:19614:13)
at pp$9.unexpected (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:16908:8)
at pp$8.parseVar (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:17453:12)
at pp$8.parseVarStatement (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:17315:8)
at pp$8.parseStatement (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:17063:17)
at pp$8.parseTopLevel (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:16965:21)
at Parser.parse (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:16737:15)
at Function.parse (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:16787:35)
at Graph.contextParse (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:22921:38)
at Module.tryParse (file://<PROJECT_ROOT>/node_modules/rollup/dist/es/shared/rollup.js:12796:31) {
pos: 12,
loc: Position { line: 1, column: 12 },
raisedAt: 13
},
id: '<PROJECT_ROOT>/independent.ts',
pos: 12,
loc: {
column: 12,
file: '<PROJECT_ROOT>/independent.ts',
line: 1
},
frame: '1:     const ts: string = "typed variable";\n' +
'               ^\n' +
'2:     console.log(ts);',
watchFiles: [
'/@crx/manifest',
'<PROJECT_ROOT>/independent.ts'
]
}

System Info

Binaries:
    Node: 21.6.1 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 121.0.6167.160
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.23 => 2.0.0-beta.23 
    vite: ^5.1.2 => 5.1.2

Severity

annoyance

[ceifa]

Same error for me