search

crxjs / chrome-extension-tools

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

Build error [crx:web-accessible-resources] TypeError: OutputBundle["manifest.json"] is undefined #836

Closed aitmamatovmusa closed 10 months ago

aitmamatovmusa commented 12 months ago

Build tool

Vite

Where do you see the problem?

Describe the bug

There are errors when i build (npm run build) related to manifest.json if i remove content.jsx from content_scripts everything works fine.

{
    "manifest_version": 3,
    "name": "CRXJS React Vite Example",
    "version": "1.0.0",
    "action": {
        "default_popup": "index.html"
    },
    "content_scripts": [
        {
            "js": [
                "src/content.jsx"
            ],
            "matches": [
                "https://www.google.com/*"
            ]
        }
    ]
}

Reproduction

https://github.com/aytmamatov/crxjs-example

Logs

npm run build

> crxjs-example@0.0.0 build
> tsc && vite build

vite v5.0.3 building for production...
✓ 35 modules transformed.
[crx:web-accessible-resources] TypeError: OutputBundle["manifest.json"] is undefined.
    at parseJsonAsset (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/@crxjs/vite-plugin/dist/index.mjs:103:11)
    at Object.renderCrxManifest (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/@crxjs/vite-plugin/dist/index.mjs:1883:32)
    at Object.generateBundle (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/@crxjs/vite-plugin/dist/index.mjs:1668:60)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Bundle.generate (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/rollup/dist/es/shared/node-entry.js:16972:9)
    at async file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/rollup/dist/es/shared/node-entry.js:19518:27
    at async catchUnfinishedHookActions (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/rollup/dist/es/shared/node-entry.js:18949:16)
    at async build (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/vite/dist/node/chunks/dep-vyqc0_aB.js:66264:22)
    at async CAC.<anonymous> (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/vite/dist/node/cli.js:845:9)
[crx:manifest-post] Error in crx:web-accessible-resources.renderCrxManifest
✓ built in 1.59s
error during build:
Error: Error in crx:web-accessible-resources.renderCrxManifest
    at Object.generateBundle (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/@crxjs/vite-plugin/dist/index.mjs:1681:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Bundle.generate (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/rollup/dist/es/shared/node-entry.js:16972:9)
    at async file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/rollup/dist/es/shared/node-entry.js:19518:27
    at async catchUnfinishedHookActions (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/rollup/dist/es/shared/node-entry.js:18949:16)
    at async build (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/vite/dist/node/chunks/dep-vyqc0_aB.js:66264:22)
    at async CAC.<anonymous> (file:///Users/macbookpro/Desktop/home/study/projects/crxjs-example/node_modules/vite/dist/node/cli.js:845:9)

System Info

System:
    OS: macOS 12.6.1
    CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
    Memory: 3.00 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.8.0 - ~/.nvm/versions/node/v20.8.0/bin/node
    npm: 8.5.2 - /usr/local/bin/npm
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.21 => 2.0.0-beta.21 
    vite: ^5.0.0 => 5.0.3

Severity

blocking all usage of RPCE

PauloMesquitaSP commented 12 months ago

I'm having the same problem, in @crxjs/vite-plugin/dist/index.mjs if I change const asset = bundle[key]; to const asset = bundle[key] || bundle[`.vite/${key}`]; it starts to work, it seems that the "bundle" variable don't have a key named "manifest.json", in my case the options are:

 [
  'assets/main.tsx-4SQhfq8G.js',
  'assets/crx-manifest.js-DzEZuLEe.js',
  'assets/index.html-djdEtln7.js',
  'assets/background.ts-pqoZZU2H.js',
  'assets/client-H9Qj9e3E.js',
  'assets/main.tsx-loader-g6xFzHuK.js',
  'index.html',
  '.vite/manifest.json',
  'service-worker-loader.js'
]

I started to use this lib today and I don't know sufficient about it to try to do a PR for this myself

aitmamatovmusa commented 12 months ago

Should I use it in my manifest file?

 [
  'assets/main.tsx-4SQhfq8G.js',
  'assets/crx-manifest.js-DzEZuLEe.js',
  'assets/index.html-djdEtln7.js',
  'assets/background.ts-pqoZZU2H.js',
  'assets/client-H9Qj9e3E.js',
  'assets/main.tsx-loader-g6xFzHuK.js',
  'index.html',
  '.vite/manifest.json',
  'service-worker-loader.js'
]
PauloMesquitaSP commented 12 months ago

this is just me showing the bundle variable to help the person that'll help us. Temporarily I did the const asset = bundle[key] || bundle[`.vite/${key}`]; and it worked

Jgordon-pencilwrench commented 12 months ago

Running into the same issue as well. I confirmed @PauloMesquitaSP 's fix worked for me as well:

image
yanglee2421 commented 12 months ago

I'm having the same problem, in @crxjs/vite-plugin/dist/index.mjs if I change const asset = bundle[key]; to const asset = bundle[key] || bundle[`.vite/${key}`]; it starts to work, it seems that the "bundle" variable don't have a key named "manifest.json", in my case the options are:

 [
  'assets/main.tsx-4SQhfq8G.js',
  'assets/crx-manifest.js-DzEZuLEe.js',
  'assets/index.html-djdEtln7.js',
  'assets/background.ts-pqoZZU2H.js',
  'assets/client-H9Qj9e3E.js',
  'assets/main.tsx-loader-g6xFzHuK.js',
  'index.html',
  '.vite/manifest.json',
  'service-worker-loader.js'
]

I started to use this lib today and I don't know sufficient about it to try to do a PR for this myself

Amazing, this worked for me

Jgordon-pencilwrench commented 12 months ago

Unfortunately, I'm with @PauloMesquitaSP when it comes to making a PR. I don't have enough background to feel comfortable posting a PR. Why is manifest.json as a key being found in the bundle as .vite/manifest.json? ¯_(ツ)_/¯

I'm thinking this issue is a showstopper for using the tool.

mubaidr commented 11 months ago

Actually this issuse is caused by updating vite to v5, this tool does not currently support v5.

Jgordon-pencilwrench commented 11 months ago

Actually this issuse is caused by updating vite to v5, this tool does not currently support v5.

Thank you for that info, @mubaidr . I confirmed that downgrading to vite v4.5.0 solved the issue.

Anyone know of plans to support vite v5? :-)

Jgordon-pencilwrench commented 11 months ago

Stumbled on this today with Vite 5: they introduced a .vite directory where the manifest.json file is stored. They have a section about that in the migration docs for v5: https://vitejs.dev/guide/migration#manifest-files-are-now-generated-in-vite-directory-by-default

naokiuma commented 11 months ago

My error is fixed too!

node_modules/@crxjs/vite-plugin/dist/index.mjs

// const asset = bundle[key]; //this code makes error!
const asset = bundle[key] || bundle[`.vite/${key}`]; // nice code!!

I realize again the importance of checking errors. Thank you very much!

nicolasthy commented 11 months ago

The fix suggested by @PauloMesquitaSP works, any chance we can include this to the lib to avoid having to fork it?

AntonOfTheWoods commented 11 months ago

I'm pickin the maintainers are on holiday. I guess we just wait patiently!

ffaubert commented 10 months ago

bump

ale-ben commented 10 months ago

841 Has been merged and should solve this