Build errors: Rollup failed to resolve import "/:routes.js"

[andreysamode]

To reproduce:

git clone https://github.com/openai/openai-realtime-console
npm i
npm run build:
...
x Build failed in 31ms
error during build:
[vite]: Rollup failed to resolve import "/:routes.js" from "/openai-realtime-console/client/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///openai-realtime-console/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65589:17)
    at onwarn (file:///openai-realtime-console/node_modules/@vitejs/plugin-react/dist/index.mjs:282:9)
    at onRollupWarning (file:///openai-realtime-console/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65619:5)
    at onwarn (file:///openai-realtime-console/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65284:7)
    at file:///openai-realtime-console/node_modules/rollup/dist/es/shared/node-entry.js:19475:13
    at Object.logger [as onLog] (file:///openai-realtime-console/node_modules/rollup/dist/es/shared/node-entry.js:21201:9)
    at ModuleLoader.handleInvalidResolvedId (file:///openai-realtime-console/node_modules/rollup/dist/es/shared/node-entry.js:20090:26)
    at file:///openai-realtime-console/node_modules/rollup/dist/es/shared/node-entry.js:20048:26

[dbakuntsev]

Possibly, package.json should have "build:server": "vite build --outDir dist/server --ssr entry-server.jsx" instead of "build:server": "vite build --outDir dist/server --ssr /index.js". It will get you an output in dist/server.

[maheshitechnotion]

Solution 1: Update package.json and add vite.config.server.js file

1. Update the build:server script in package.json to include the SSR configuration:
   In your package.json, modify the build script:

"build:server": "vite build --outDir dist/server --ssr client/entry-server.jsx --config vite.config.server.js",

2. Create a vite.config.server.js file in the root directory of your project.
   This configuration ensures proper SSR handling and externalizes assets:

Create vite.config.server.js file with the following content:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
#
export default defineConfig({
  plugins: [react()],
  build: {
    ssr: true,
    outDir: 'dist/server',
    emptyOutDir: true,
    rollupOptions: {
      // Externalize asset imports for SSR build
      external: [
        /\.(png|jpg|jpeg|gif|svg|webp|ico)$/,
      ]
    }
  },
  // Ensure assets are properly handled
  assetsInclude: ['**/*.svg']
});

3. After making the above changes, run the build again:
   npm run build

---

Solution 2: Update the build:server script directly in package.json

1. Modify the build:server script in package.json to correctly reference entry-server.jsx:

In your package.json, update the build script:

"build:server": "vite build --outDir dist/server --ssr entry-server.jsx",

2. After making the change, run the build command again:
   npm run build

[vinaayakha]

I tried to run this app for DEMO using vercel can you suggest which build command to use, the build:client or build:server?

[AIC-HMV]

Use build:server with the updated svelte.config.server.js and SSR-specific configuration.

🔧 Extra Tip for Vercel:
Ensure your Vercel deployment settings are correct by adding a vercel.json (if not already present) like this:

{
"buildCommand": "npm run build:server",
"outputDirectory": "dist" // or adjust to match your actual build output
}

[AIC-HMV]

import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import path from 'path';

export default defineConfig({
plugins: [sveltekit()],
resolve: {
alias: {
$routes: path.resolve('./src/routes'),
},
},
ssr: {
noExternal: ['@sveltejs/kit']
}
});

Update your package.json scripts:

"scripts": {
"build:server": "vite build --config svelte.config.server.js"
}

. If using Vercel, ensure vercel.json has:

{
"buildCommand": "npm run build:server",
"outputDirectory": "dist"
}

This approach ensures SSR works correctly and avoids Rollup failed to resolve import '/routes' errors.
• Avoid using build:client unless you’re building a pure SPA

[vinaayakha]

thanks @AIC-HMV for this approach, i tired to run it like:

1. moving all api's to api/index.js
2. exporting app from there and added a small change to it for local development and vercel deployment.

// ─────────── Dev vs Prod middleware ───────────
if (process.env.NODE_ENV === "development") {
    const { createServer: createViteServer } = await import("vite");
    const vite = await createViteServer({ server: { middlewareMode: true }, appType: "custom" });
  
    app.use(vite.middlewares);
  
    app.use("*", async (req, res, next) => {
      try {
        const url = req.originalUrl;
        const template = await vite.transformIndexHtml(
          url,
          fs.readFileSync("./client/index.html", "utf-8")
        );
        const { render } = await vite.ssrLoadModule("./client/entry-server.jsx");
        const appHtml = await render(url);
        res
          .status(200)
          .set({ "Content-Type": "text/html" })
          .end(template.replace("<!--ssr-outlet-->", appHtml?.html));
      } catch (e) {
        vite.ssrFixStacktrace(e);
        next(e);
      }
    });
  } else {
    // Production: serve the pre-built client
    const clientDist = path.resolve(__dirname, "../dist/client");
    app.use(express.static(clientDist));
  
    // SPA / SSR fallback
    app.get("*", (_req, res) =>
      res.sendFile(path.join(clientDist, "index.html"))
    );
  }

  
  /* ------------------------------------------------------------------ */
  /*  DO NOT app.listen() here – Vercel will call the exported handler      */
  /* ------------------------------------------------------------------ */
  
  export default app;          // 👈  Vercel picks this up automatically

4. and adding this config to vercel.json :-

{
  "version": 2,
  "builds": [
    { "src": "api/index.js", "use": "@vercel/node" },
    { "src": "package.json", "use": "@vercel/static-build", "config": { "distDir": "client/dist/client" } }
  ],
  "routes": [
    { "handle": "filesystem" },
    { "src": "/api/(.*)", "dest": "/api/index.js" },
    { "src": "/(.*)", "dest": "/api/index.js" }
  ]
}

[vinaayakha]

and also added path to serve the React app build from api/index.js

import { fileURLToPath } from "url";
import path from "path";

const __filename = fileURLToPath(import.meta.url);
const __dirname  = path.dirname(__filename);