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

[BesmerchEPAM]

Sep 24 2024 - same error, issue still there

[ngryman]

@denis-ismailaj Did you find a workaround for this? I can't really downgrade crx to 1.x as I need to the new side panel feature.

[denis-ismailaj]

@ngryman Unfortunately, I did not. I ended up just dealing with the additional hassle of doing vite build every time.

[unmash]

try disabling input when the mode is "development"

export default ({ mode }) => {
  const isDev = mode === 'development'
  
  const rollupOptionsInput = !isDev ? ['independent.ts'] : []
  return {
    plugins: [
      crx({
        manifest: {
          manifest_version: 3,
          name: 'CRXJS',
          version: '1.0.0',
        },
      }),
    ],
    build: {
      rollupOptions: {
        input: rollupOptionsInput,
      },
    },
  }
}

[github-actions]

Thanks for contributing to CRXJS! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within 7 days.