diff --git a/packages/vite/src/lib/getDefaultViteConfig.ts b/packages/vite/src/lib/getDefaultViteConfig.ts index 7f7fe77cb4b4..579e6db4db54 100644 --- a/packages/vite/src/lib/getDefaultViteConfig.ts +++ b/packages/vite/src/lib/getDefaultViteConfig.ts @@ -14,6 +14,8 @@ export function getDefaultViteConfig(rwConfig: Config, rwPaths: Paths) { apiHost ??= rwConfig.api.host apiHost ??= process.env.NODE_ENV === 'production' ? '0.0.0.0' : '[::]' + const rscEnabled = rwConfig.experimental.rsc?.enabled + let apiPort if (process.env.REDWOOD_API_PORT) { apiPort = parseInt(process.env.REDWOOD_API_PORT) @@ -21,14 +23,22 @@ export function getDefaultViteConfig(rwConfig: Config, rwPaths: Paths) { apiPort = rwConfig.api.port } - return { + const defaultRwViteConfig: UserConfig = { root: rwPaths.web.src, - // Disabling for now, let babel handle this for consistency + // @MARK: when we have these aliases, the warnings from the FE server go + // away BUT, if you have imports like this: + // ``` + // import RandomNumberServerCell from + // 'src/components/RandomNumberServerCell/RandomNumberServerCell' + // ``` + // they start failing (can't have the double + // `/RandomNumberServerCell/RandomNumberServerCell` at the end) + // // resolve: { // alias: [ // { // find: 'src', - // replacement: redwoodPaths.web.src, + // replacement: rwPaths.web.src, // }, // ], // }, @@ -36,8 +46,8 @@ export function getDefaultViteConfig(rwConfig: Config, rwPaths: Paths) { publicDir: path.join(rwPaths.web.base, 'public'), define: getEnvVarDefinitions(), css: { - // @NOTE config path is relative to where vite.config.js is if you use relative path - // postcss: './config/', + // @NOTE config path is relative to where vite.config.js is if you use + // a relative path postcss: rwPaths.web.config, }, server: { @@ -51,8 +61,9 @@ export function getDefaultViteConfig(rwConfig: Config, rwPaths: Paths) { // Remove the `.redwood/functions` part, but leave the `/graphql` rewrite: (path) => path.replace(rwConfig.web.apiUrl, ''), configure: (proxy) => { - // @MARK: this is a hack to prevent showing confusing proxy errors on startup - // because Vite launches so much faster than the API server. + // @MARK: this is a hack to prevent showing confusing proxy + // errors on startup because Vite launches so much faster than + // the API server. let waitingForApiServer = true // Wait for 2.5s, then restore regular proxy error logging @@ -72,7 +83,8 @@ export function getDefaultViteConfig(rwConfig: Config, rwPaths: Paths) { errors: [ { message: - 'The RedwoodJS API server is not available or is currently reloading. Please refresh.', + 'The RedwoodJS API server is not available or is ' + + 'currently reloading. Please refresh.', }, ], } @@ -92,19 +104,19 @@ export function getDefaultViteConfig(rwConfig: Config, rwPaths: Paths) { outDir: options.build?.outDir || rwPaths.web.dist, emptyOutDir: true, manifest: !env.ssrBuild ? 'client-build-manifest.json' : undefined, - sourcemap: !env.ssrBuild && rwConfig.web.sourceMap, // Note that this can be boolean or 'inline' + // Note that sourcemap can be boolean or 'inline' + sourcemap: !env.ssrBuild && rwConfig.web.sourceMap, rollupOptions: { input: getRollupInput(!!env.ssrBuild), }, }, legacy: { - buildSsrCjsExternalHeuristics: rwConfig.experimental?.rsc?.enabled - ? false - : env.ssrBuild, + buildSsrCjsExternalHeuristics: rscEnabled ? false : env.ssrBuild, }, optimizeDeps: { esbuildOptions: { - // @MARK this is because JS projects in Redwood don't have .jsx extensions + // @MARK this is because JS projects in Redwood don't have .jsx + // extensions loader: { '.js': 'jsx', }, @@ -117,16 +129,20 @@ export function getDefaultViteConfig(rwConfig: Config, rwPaths: Paths) { }, }, } + + return defaultRwViteConfig } } /** * This function configures how vite (actually Rollup) will bundle. * - * By default, the entry point is the index.html file - even if you don't specify it in RollupOptions + * By default, the entry point is the index.html file - even if you don't + * specify it in RollupOptions * - * With streaming SSR, out entrypoint is different - either entry.client.tsx or entry.server.tsx - * and the html file is not used at all, because it is defined in Document.tsx + * With streaming SSR, out entrypoint is different - either entry.client.tsx or + * entry.server.tsx and the html file is not used at all, because it is defined + * in Document.tsx * * @param ssr {boolean} Whether to return the SSR inputs or not * @returns Rollup input Options @@ -135,12 +151,14 @@ function getRollupInput(ssr: boolean): InputOption | undefined { const rwConfig = getConfig() const rwPaths = getPaths() - // @NOTE once streaming ssr is out of experimental, this will become the default + // @NOTE once streaming ssr is out of experimental, this will become the + // default if (rwConfig.experimental.streamingSsr.enabled) { return ssr ? { 'entry.server': rwPaths.web.entryServer as string, - Document: rwPaths.web.document, // We need the document for React's fallback + // We need the document for React's fallback + Document: rwPaths.web.document, } : (rwPaths.web.entryClient as string) }