Manifest file imports are required

[toddheslin]

Description

Sometimes the manifest.json file doesn't have an includes property, and this throws an error.

This is the line where we are directly accessing includes, which should fail gracefully but instead throws: https://github.com/idleberg/php-vite-manifest/blob/c9393a05a13135b48e41b4d6534ba390da1dc416/src/ViteManifest.php#L104

Here is my config:

vite.config.ts

export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  plugins: [
    // Note, this plugin is the one I made to temporary fix the problem
    manifestImports(),
    liveReload([
      `${__dirname}/*.php`,
      `${__dirname}/includes/**/*.php`,
      `${__dirname}/includes/**/*.mustache`,
    ]),
  ],
  build: {
    outDir: path.resolve(__dirname, './assets/dist'),
    emptyOutDir: true,
    assetsDir: '.',
    manifest: true,
    target: 'modules',
    rollupOptions: {
      // our entry
      input: './assets/src/main.ts',
    },
  },
  server: {
    cors: true,
    strictPort: true,
    port: 5173,
  },
})

manifest.json

{
  "assets/src/main.ts": {
    "file": "main.c291a420.js",
    "src": "assets/src/main.ts",
    "isEntry": true,
    "css": [
      "main.f71924f5.css"
    ],
    "imports": []
  },
  "assets/src/main.css": {
    "file": "main.f71924f5.css",
    "src": "assets/src/main.css",
    "imports": []
  }
}

To fix the problem, I've created this little plugin within the vite.config.ts, but ideally the package would deal with a lack of imports:

vite.config.ts

// Normal config, as above
export default defineConfig({ ...}

// The plugin to add a default imports array
function manifestImports(): Plugin {
  return {
    name: 'vite-plugin-manifest-imports',
    apply: 'build',
    enforce: 'post',
    async writeBundle({ dir }) {
      await augmentManifest('manifest.json', dir!)
    },
  }
}

async function augmentManifest(manifestPath: string, outDir: string) {
  const resolveInOutDir = (path: string) => resolve(outDir, path)
  manifestPath = resolveInOutDir(manifestPath)

  const manifest: Manifest | undefined
    = await fs.readFile(manifestPath, 'utf-8').then(JSON.parse, () => undefined)

  if (manifest) {
    await Promise.all(Object.values(manifest).map(async (chunk) => {
      // adding it here
      if (!chunk.imports) chunk.imports = []
    }))
    await fs.writeFile(manifestPath, JSON.stringify(manifest, null, 2))
  }
}

[idleberg]

Would you be so kind and test the updated version?

[toddheslin]

Thanks @idleberg I'll do this early next week. :-)

[toddheslin]

@idleberg looks like it's still throwing an error where the imports key is not present.

PHP Fatal error:  Uncaught TypeError: array_map(): Argument #2 ($array) must be of type array, null given in /var/www/html/plugins/pointhacks-plastic/vendor/idleberg/vite-manifest/src/ViteManifest.php:104
Stack trace:
#0 /var/www/html/plugins/pointhacks-plastic/vendor/idleberg/vite-manifest/src/ViteManifest.php(104): array_map(Object(Closure), NULL, Array)
#1 /var/www/html/plugins/pointhacks-plastic/vendor/idleberg/wordpress-vite-assets/src/WordpressViteAssets.php(139): Idleberg\ViteManifest\ViteManifest->getImports('assets/src/main...')

[idleberg]

Not sure why that happens, the test went through fine. Anyway, made another modification.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.