search

crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.9k stars 191 forks source link

Build error - "(0 , import_vite_plugin.crx) is not a function" #758

Open CalmProton opened 1 year ago

CalmProton commented 1 year ago

Build tool

Vite

Where do you see the problem?

Describe the bug

It occurs whenever running either build or dev commands, and fails almost immediately. It started happening after upgrading to 2.0.0

Reproduction

Created a repo - https://github.com/CalmProton/crxjs-vite-notafunction

  1. npm i
  2. npm run dev or npm run build
  3. Observe error

Logs

failed to load config from /Users/[user]/Documents/Git Repositories/extension/vite.config.ts
error when starting dev server:
TypeError: (0 , import_vite_plugin.crx) is not a function
    at Object.<anonymous> (/Users/[user]/Documents/Git Repositories/extension/vite.config.ts:97:74)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at _require.extensions.<computed> [as .js] (file:///Users/[user]/Documents/Git%20Repositories/extension/node_modules/vite/dist/node/chunks/dep-a8e37fae.js:66174:24)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at Module.require (node:internal/modules/cjs/loader:1021:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at loadConfigFromBundledFile (file:///Users/[user]/Documents/Git%20Repositories/extension/node_modules/vite/dist/node/chunks/dep-a8e37fae.js:66182:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async loadConfigFromFile (file:///Users/[user]/Documents/Git%20Repositories/extension/node_modules/vite/dist/node/chunks/dep-a8e37fae.js:66007:28)

System Info

System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M1
    Memory: 95.55 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.8.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 15.6
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.18 => 2.0.0-beta.18 
    vite: ^4.0.1 => 4.4.6 (same on the latest version of vite)

Severity

blocking all usage of RPCE

lokesh-coder commented 1 year ago

Changing file name vite.config.js to vite.config.mjs worked for me

saxsir commented 1 year ago

https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only

renaming vite.config.js/vite.config.ts to vite.config.mjs/vite.config.mts

Same as @lokesh-coder, vite.config.ts to vite.config.mts worked for me :)

Kurohyou commented 1 year ago

Alternatively, simply add "type":"module" to your package.json as noted in the getting started guide.