Cannot parse manifest.json during `vite build`

[madhavgharmalkar]

Build tool

Vite

Where do you see the problem?

• [ ] In the browser
• [X] In the terminal

Describe the bug

I'm unable to build an application with yarn vite build. I've attached some debugging output below. It seems that in some instances manifest.json is parsed with use strict in the beginning which causes it to fail.

Reproduction

I'm unable to publish a repo because it's company code, I can send it via a private message.

Logs

yarn run v1.22.19
$ vite build
vite v4.2.1 building for production...
transforming (1) ../../../../../../@crx/manifest{
  manifestJson: `export default "{\\"$schema\\":\\"https://json.schemastore.org/chrome-manifest.json\\",\\"manifest_version\\":3,\\"name\\":\\"Rosetta\\",\\"version\\":\\"1.0\\",\\"description\\":\\"A simple extension that changes the background of a webpage to Shane's face.\\",\\"background\\":{\\"service_worker\\":\\"src/background.ts\\",\\"type\\":\\"module\\"},\\"content_scripts\\":[{\\"matches\\":[\\"<all_urls>\\"],\\"js\\":[\\"src/content_script.ts\\"]}],\\"permissions\\":[\\"activeTab\\"],\\"host_permissions\\":[\\"<all_urls>\\"],\\"action\\":{}}"`
}
✓ 5 modules transformed.
7:06:50 PM [vite-plugin-svelte] dom compile done.
package         files     time     avg
extension           1   15.3ms  15.3ms
{
  manifestJson: 'const s = `{"$schema":"https://json.schemastore.org/chrome-manifest.json","manifest_version":3,"name":"Rosetta","version":"1.0","description":"A simple extension that changes the background of a webpage to Shane\'s face.","background":{"service_worker":"09d49ef1","type":"module"},"content_scripts":[{"matches":["<all_urls>"],"js":["src/content_script.ts"]}],"permissions":["activeTab"],"host_permissions":["<all_urls>"],"action":{}}`;\n' +
    'export {\n' +
    '  s as default\n' +
    '};\n'
}
dist/service-worker-loader.js     0.03 kB
dist/content_script.ts-loader.js  0.33 kB
dist/manifest.json                0.79 kB
dist/background.js                0.32 kB │ gzip: 0.23 kB
dist/content_script.js            0.38 kB │ gzip: 0.27 kB
dist/App-caca1fa2.js              4.13 kB │ gzip: 1.65 kB
{
  manifestJson: '"use strict";const s=`{"$schema":"https://json.schemastore.org/chrome-manifest.json","manifest_version":3,"name":"Rosetta","version":"1.0","description":"A simple extension that changes the background of a webpage to Shane\'s face.","background":{"service_worker":"09d49ef1","type":"module"},"content_scripts":[{"matches":["<all_urls>"],"js":["src/content_script.ts"]}],"permissions":["activeTab"],"host_permissions":["<all_urls>"],"action":{}}`;module.exports=s;\n'
}
[crx:manifest-post] Unexpected token 'u', "use strict" is not valid JSON
✓ built in 141ms
error during build:
SyntaxError: Unexpected token 'u', "use strict" is not valid JSON
    at JSON.parse (<anonymous>)
    at Object.decodeManifest (file:///Users/madhav/Developer/rosetta/node_modules/@crxjs/vite-plugin/dist/index.mjs:93:21)
    at Object.generateBundle (file:///Users/madhav/Developer/rosetta/node_modules/@crxjs/vite-plugin/dist/index.mjs:1579:40)
    at file:///Users/madhav/Developer/rosetta/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:24395:40
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
madhav@Madhavs-MacBook-Pro extension % 

### System Info

```shell
System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 874.36 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.3.0 - ~/.nvm/versions/node/v19.3.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v19.3.0/bin/npm
    Watchman: 2023.02.13.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 112.0.5615.49
    Safari: 16.3

Severity

blocking all usage of RPCE

[filipw01]

Could you share your vite config? It looks like it might be a misconfiguration

[madhavgharmalkar]

I just realized my error. I've removed the lib entries and it seems to work. Thanks!

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { crx } from "@crxjs/vite-plugin";
import manifest from "./manifest";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte(), crx({ manifest })],
  build: {
    lib: {
      entry: {
        background: "./src/background.ts",
        content_script: "./src/content_script.ts",
      },
      name: "background",
    },
  },
});