Load dotenv/config before reading the config

packages/toolpad-app/src/server/appServerWorker.ts

@@ -66,6 +66,7 @@ function devServerPlugin({ config }: ToolpadAppDevServerParams): Plugin {
 }
 
 export interface AppViteServerConfig extends ToolpadAppDevServerParams {
+  toolpadDevMode: boolean;
   port: number;
   mainThreadRpcPort: MessagePort;
 }

packages/toolpad-app/src/server/config.ts

@@ -19,7 +19,7 @@ export type ServerConfig = {
 
 function readConfig(): ServerConfig {
   if (typeof window !== 'undefined') {
-    throw new Error(`Serverside config can't be loaded on the client side`);
+    throw new Error(`Server-side config can't be loaded on the client side`);
   }
 
   // Whitespace separated, do not use spaces in your keys

packages/toolpad-app/src/server/index.ts

@@ -63,6 +63,7 @@ async function createDevHandler(project: ToolpadProject) {
 
   const worker = new Worker(appServerPath, {
     workerData: {
+      toolpadDevMode: project.options.toolpadDevMode,
       outDir: project.getAppOutputFolder(),
       base: project.options.base,
       config: runtimeConfig,
@@ -290,7 +291,7 @@ async function createToolpadHandler({
 }: ToolpadHandlerConfig): Promise<AppHandler> {
   const editorBasename = '/_toolpad';
 
-  const project = await initProject({ dev, dir, externalUrl, base });
+  const project = await initProject({ toolpadDevMode, dev, dir, externalUrl, base });
   await project.start();
 
   const router = express.Router();

packages/toolpad-app/src/server/localMode.ts

@@ -1326,6 +1326,7 @@ export async function initProject({ dir: dirInput, ...config }: InitProjectOptio
   const dir = resolveProjectDir(dirInput);
 
   const resolvedConfig: ToolpadProjectOptions = {
+    toolpadDevMode: false,
     dev: false,
     base: '/prod',
     customServer: false,

packages/toolpad-app/src/server/toolpadAppBuilder.ts

@@ -124,6 +124,7 @@ function toolpadVitePlugin(): Plugin {
 }
 
 export interface CreateViteConfigParams {
+  toolpadDevMode: boolean;
   outDir: string;
   root: string;
   dev: boolean;
@@ -136,6 +137,7 @@ export interface CreateViteConfigParams {
 }
 
 export async function createViteConfig({
+  toolpadDevMode,
   outDir,
   root,
   dev,
@@ -308,8 +310,12 @@ if (import.meta.hot) {
         },
       },
       optimizeDeps: {
-        entries: [MAIN_ENTRY],
-        include: FALLBACK_MODULES.map((moduleName) => `@mui/toolpad > ${moduleName}`),
+        force: toolpadDevMode ? true : undefined,
+        include: [
+          ...FALLBACK_MODULES.map((moduleName) => `@mui/toolpad > ${moduleName}`),
+          '@mui/toolpad/runtime',
+          '@mui/toolpad/canvas',
+        ],
       },
       appType: 'custom',
       logLevel: 'info',
@@ -343,6 +349,7 @@ export async function buildApp({
   outDir,
 }: ToolpadBuilderParams) {
   const { viteConfig } = await createViteConfig({
+    toolpadDevMode: false,
     dev: false,
     root,
     base,

packages/toolpad-app/src/server/toolpadAppServer.ts

@@ -1,4 +1,3 @@
-import 'dotenv/config';
 import * as path from 'path';
 import * as fs from 'fs/promises';
 import { Server } from 'http';

packages/toolpad-app/src/types.ts

@@ -205,6 +205,7 @@ export type ProjectEvents = {
 };
 
 export interface ToolpadProjectOptions {
+  toolpadDevMode: boolean;
   dev: boolean;
   externalUrl?: string;
   base: string;

packages/toolpad-app/tsup.config.ts

@@ -30,6 +30,12 @@ export default defineConfig((options) => [
     format: ['esm'],
     outDir: 'dist/cli',
     silent: true,
+    // Code splitting in esbuild is buggy. It doesn't preserve order of imports correctly.
+    // It's important that `dotenv/config` remains the first import in the program because it
+    // needs to set up environment variables before anything else is imported.
+    // To fix this, we disable code splitting.
+    // See: https://github.com/evanw/esbuild/issues/399
+    splitting: false,
     clean: !options.watch,
     sourcemap: true,
     esbuildPlugins: [cleanFolderOnFailure(path.resolve(__dirname, './dist/cli'))],