analogjs / analog

The fullstack meta-framework for Angular. Powered by Vite and Nitro
https://analogjs.org
MIT License
2.48k stars 234 forks source link

Build fails when using algoliasearch #1173

Closed rabraghib closed 2 months ago

rabraghib commented 2 months ago

Please provide the environment you discovered this bug in.

https://github.com/rabraghib/analog-algoliasearch-bug

Which area/package is the issue in?

vite-plugin-angular

Description

When using the algoliasearch/lite package in an AnalogJS project, the build process (npm run build) fails. However, the project runs as expected in development mode (npm run dev).

Nothing is generated in the output folder when the build fails. It seems like the client build phase doesn't generate an output and the SSR build phase throws an error.

I've tried adding algoliasearch and algoliasearch/lite to the noExternal configuration in vite.config.js but did not fix the problem:

ssr: {
  noExternal: ['algoliasearch'], // 'algoliasearch/lite'
},

Please provide the exception or error you saw

vite v5.3.1 building for production...
✓ 362 modules transformed.
Building SSR application...
x Build failed in 14.46s
An unhandled exception occurred: [@analogjs/vite-plugin-nitro] ENOENT: no such file or directory, open 'D:\GitHub\Side-Projects\test\analog-app\dist\client\index.html'
See "C:\Users\RABRAG~1\AppData\Local\Temp\ng-EYOvDD\angular-errors.log" for further details.

Other information

No response

I would be willing to submit a PR to fix this issue

brandonroberts commented 2 months ago

This can be resolved with the vite-plugin-node-polyfills package.

npm i vite-plugin-node-polyfills --save-dev

And update the vite config

/// <reference types="vitest" />

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  build: {
    target: ['es2020'],
  },
  resolve: {
    mainFields: ['module'],
  },
  plugins: [
    analog(),
    nodePolyfills(),
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['src/test-setup.ts'],
    include: ['**/*.spec.ts'],
    reporters: ['default'],
  },
  define: {
    'import.meta.vitest': mode !== 'production',
  },
}));

You might see a build error logged to the console at the end, but the server runs correctly.

Reference: https://github.com/vitejs/vite/discussions/8799#discussioncomment-6240272