Can't build the extension for production

Build tool

Vite

Where do you see the problem?

[ ] In the browser
[X] In the terminal

Describe the bug

I'm using @crxjs/vite-plugin and everything works well during development. I got no error with npm run dev. However if I try to build for production with npm run build I got the error.

Digging deeper in the error (log below) I printed this information:

{
  refId: 'a6363fb3',
  manifestName: 'assets/crx-manifest.js-!~{002}~.js',
  manifestJs: undefined
}

manifestJs is undefined but the line below try to access the code property of it raising the error:

https://github.com/crxjs/chrome-extension-tools/blob/af2fdbc9e0715fa18418f473945624494243968e/packages/vite-plugin/src/node/plugin-manifest.ts#L255-L258

Here is also the bundle printed out:

{
  bundle: [Object: null prototype] {
    'assets/google-cbe97726.svg': {
      fileName: 'assets/google-cbe97726.svg',
      name: 'google.svg',
      source: <Buffer ...>,
      type: 'asset'
    },
    'assets/loading-e7005199.svg': {
      fileName: 'assets/loading-e7005199.svg',
      name: 'loading.svg',
      source: <Buffer ...>,
      type: 'asset'
    },
    'assets/main-64fe60aa.css': {
      fileName: 'assets/main-64fe60aa.css',
      name: 'main.css',
      source: ...,
      type: 'asset'
    },
    'assets/main.ts-7d24bbea.js': {
      exports: [],
      facadeModuleId: '/extension-path/src/content-scripts/main.ts',    
      isDynamicEntry: false,
      isEntry: true,
      isImplicitEntry: false,
      moduleIds: [Array],
      name: 'main.ts',
      type: 'chunk',
      dynamicImports: [],
      fileName: 'assets/main.ts-7d24bbea.js',
      implicitlyLoadedBefore: [],
      importedBindings: {},
      imports: [],
      modules: [Object: null prototype],
      referencedFiles: [],
      viteMetadata: [Object],
      code: ...,
      map: null
    },
    'assets/crx-manifest.js-8d3b57cb.js': {
      exports: [Array],
      facadeModuleId: '/@crx/manifest',
      isDynamicEntry: false,
      isEntry: true,
      isImplicitEntry: false,
      moduleIds: [Array],
      name: 'crx-manifest.js',
      type: 'chunk',
      dynamicImports: [],
      fileName: 'assets/crx-manifest.js-8d3b57cb.js',
      implicitlyLoadedBefore: [],
      importedBindings: {},
      imports: [],
      modules: [Object: null prototype],
      referencedFiles: [],
      viteMetadata: [Object],
      code: ...,
      map: null
    },
    'assets/main.html-ee92ec57.js': {
      exports: [],
      facadeModuleId: '/extension-path/src/popup/main.html',
      isDynamicEntry: false,
      isEntry: true,
      isImplicitEntry: false,
      moduleIds: [Array],
      name: 'main.html',
      type: 'chunk',
      dynamicImports: [],
      fileName: 'assets/main.html-ee92ec57.js',
      implicitlyLoadedBefore: [],
      importedBindings: {},
      imports: [],
      modules: [Object: null prototype],
      referencedFiles: [],
      viteMetadata: [Object],
      code: ...,
      map: null
    },
    'assets/main.ts-loader-f39abd2b.js': {
      fileName: 'assets/main.ts-loader-f39abd2b.js',
      name: 'main.ts-loader.js',
      source: '(function () {\n' +
        "  'use strict';\n" +
        '\n' +
        '  (async () => {\n' +
        '    await import(\n' +
        '      /* @vite-ignore */\n' +
        '      chrome.runtime.getURL("assets/main.ts-!~{003}~.js")\n' +
        '    );\n' +
        '  })().catch(console.error);\n' +
        '\n' +
        '})();\n',
      type: 'asset'
    },
    'src/popup/main.html': {
      fileName: 'src/popup/main.html',
      name: undefined,
      source: '<!DOCTYPE html>\n' +
        '<html lang="pt-BR">\n' +
        '    <head>\n' +
        '        <meta charset="UTF-8">\n' +
        '        <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n' +
        '        <link rel="icon" type="image/png" href="/assets/icon-128.png" />\n' +
        '        <title>OLX Ignore Ad</title>\n' +
        '        <link rel="preconnect" href="https://fonts.googleapis.com">\n' +
        '        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n' +
        '        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">\n' +
        '      <script type="module" crossorigin src="/assets/main.html-ee92ec57.js"></script>\n' +
        '      <link rel="stylesheet" href="/assets/main-64fe60aa.css">\n' +
        '    </head>\n' +
        '    <body>\n' +
        '        <div id="root"></div>\n' +
        '        \n' +
        '    </body>\n' +
        '</html>\n',
      type: 'asset'
    },
    'manifest.json': {
      fileName: 'manifest.json',
      name: undefined,
      source: '{\n' +
        '  "src/assets/google.svg": {\n' +
        '    "file": "assets/google-cbe97726.svg",\n' +
        '    "src": "src/assets/google.svg"\n' +
        '  },\n' +
        '  "src/assets/loading.svg": {\n' +
        '    "file": "assets/loading-e7005199.svg",\n' +
        '    "src": "src/assets/loading.svg"\n' +
        '  },\n' +
        '  "src/popup/main.css": {\n' +
        '    "file": "assets/main-64fe60aa.css",\n' +
        '    "src": "src/popup/main.css"\n' +
        '  },\n' +
        '  "src/content-scripts/main.ts": {\n' +
        '    "file": "assets/main.ts-7d24bbea.js",\n' +
        '    "src": "src/content-scripts/main.ts",\n' +
        '    "isEntry": true\n' +
        '  },\n' +
        '  "../../../../../@crx/manifest": {\n' +
        '    "file": "assets/crx-manifest.js-8d3b57cb.js",\n' +
        '    "src": "../../../../../@crx/manifest",\n' +
        '    "isEntry": true\n' +
        '  },\n' +
        '  "src/popup/main.html": {\n' +
        '    "file": "assets/main.html-ee92ec57.js",\n' +
        '    "src": "src/popup/main.html",\n' +
        '    "isEntry": true,\n' +
        '    "css": [\n' +
        '      "assets/main-64fe60aa.css"\n' +
        '    ],\n' +
        '    "assets": [\n' +
        '      "assets/google-cbe97726.svg"\n' +
        '    ]\n' +
        '  },\n' +
        '  "main.ts-loader.js": {\n' +
        '    "file": "assets/main.ts-loader-f39abd2b.js",\n' +
        '    "src": "main.ts-loader.js"\n' +
        '  }\n' +
        '}',
      type: 'asset'
    }
  }
}

Reproduction

Repo: https://github.com/tembra/crxjs-vite-test

I basically follow the Get Started in 90 Seconds - React from the documentation

Logs

$ npm run build

> extension-name@1.0 build
> tsc && vite build

vite v4.0.0 building for production...
✓ 74 modules transformed.
[crx:manifest-post] Cannot read properties of undefined (reading 'code')
error during build:
TypeError: Cannot read properties of undefined (reading 'code')
    at Object.generateBundle (file:///extension-path/node_modules/@crxjs/vite-plugin/dist/index.mjs:1493:62)
    at file:///extension-path/node_modules/vite/node_modules/rollup/dist/es/shared/rollup.js:23400:40
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

System Info

  System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-7600 CPU @ 3.50GHz
    Memory: 7.04 GB / 15.96 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 108.0.5359.99
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.46)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.9 => 2.0.0-beta.9
    vite: ^4.0.0 => 4.0.0

Severity

blocking an upgrade

crxjs / chrome-extension-tools

Can't build the extension for production #607