Production ERROR (Inertia + React)

[decoderid]

Package version

@adonisjs/[email protected]

Describe the bug

INTRO

I don't know why this isn't working as expected in production, but on the development side, it works normally without any issues.

Env

TZ=UTC
PORT=8080
HOST=0.0.0.0
LOG_LEVEL=info
APP_KEY=testingkey123456
NODE_ENV=production
SESSION_DRIVER=cookie
DB_HOST=db-testing
DB_PORT=3306
DB_USER=root
DB_PASSWORD=testing
DB_DATABASE=testing
COMPANY_NAME=App Test
VITE_APP_NAME=App Test
DOMAIN_ROOT=example.com
DOMAIN_API=api.example.com

Routing

/*
|--------------------------------------------------------------------------
| Routes file
|--------------------------------------------------------------------------
|
| The routes file is used for defining the HTTP routes.
|
*/

import router from '@adonisjs/core/services/router'
import env from '#start/env'
import { middleware } from '#start/kernel'
const AuthController = () => import('#controllers/api/auth_controller')
const ServiceplanController = () => import('#controllers/api/serviceplans_controller')
const MemberController = () => import('#controllers/api/members_controller')
const InvoiceController = () => import('#controllers/api/invoices_controller')

router.group(() => {

    /**
     * GUEST
     */
    router.group(() => {
        router.post('/auth/login', [AuthController, 'login'])
    }).middleware(middleware.guest())

    router.group(() => {

        /**
         * SERVICE PLAN
         */
        router.group(() => {
            router.get('/', [ServiceplanController, 'index'])
            router.post('/', [ServiceplanController, 'create'])
            router.patch('/:id', [ServiceplanController, 'update'])
            router.delete('/:id', [ServiceplanController, 'delete'])
        }).prefix('serviceplan')

        /**
         * MEMBER
         */
        router.group(() => {
            router.get('/', [MemberController, 'index'])
            router.post('/', [MemberController, 'create'])
            router.get('/id:', [MemberController, 'show'])
            router.patch('/:id', [MemberController, 'update'])
            router.delete('/:id', [MemberController, 'delete'])
            router.get('/:id/invoice', [MemberController, 'invoice'])
            router.get('/:id/disconnect', [MemberController, 'disconnect'])
            router.get('/:id/disable', [MemberController, 'disable'])
            router.get('/:id/enable', [MemberController, 'enable'])
        }).prefix('member')    

        /**
         * INVOICE
         */
        router.group(() => {
            router.get('/', [InvoiceController, 'index'])
            router.get('/:id', [InvoiceController, 'show'])
            router.post('/:id/renewal', [InvoiceController, 'renewal'])
        }).prefix('invoice')

    }).middleware(middleware.auth({
        guards: ['web', 'api']
    }))

}).domain(env.get('DOMAIN_API')).prefix('v1')

Tailwind + DaisyUI

import daisyui from 'daisyui'
import tailwindTypography from '@tailwindcss/typography'

/** @type {import('tailwindcss').Config} */
const tailwindConfig = {
  content: [
    './resources/**/*.edge',
    './inertia/**/*.{js,ts,jsx,tsx}',
    'node_modules/daisyui/dist/**/*.js',
    'node_modules/react-daisyui/dist/**/*.js'
  ],
  darkMode: 'class',
  theme:{},
  daisyui: {
    themes: [
      'light',
      'dark',
      {
        ecs: {          
          'primary': '#003366',          
          'secondary': '#008080',
          'accent': '#FFD700',
          'neutral': '#f5f5f5',
          'base-100': '#ffffff',
          'info': '#1e90ff',
          'success': '#28a745',
          'warning': '#ffc107',
          'error': '#dc3545',
        },
      }
    ]
  },
  plugins: [
    tailwindTypography,
    daisyui
  ],
}

export default tailwindConfig

Dockerfile

FROM node:23.3-alpine3.20 AS base

# All deps stage
FROM base AS deps
WORKDIR /app
ADD package.json package-lock.json ./
RUN npm ci

# Production only deps stage
FROM base AS production-deps
WORKDIR /app
ADD package.json package-lock.json ./
RUN npm ci --omit=dev

# Build stage
FROM base AS build
WORKDIR /app
COPY --from=deps /app/node_modules /app/node_modules
ADD . .
RUN node ace build --ignore-ts-errors

# Production stage
FROM base
ENV NODE_ENV=production
WORKDIR /app
COPY --from=production-deps /app/node_modules /app/node_modules
COPY --from=build /app/build /app
EXPOSE 8080
CMD ["node", "./bin/server.js"]

Log Output

2024/11/28 07:51AM 60 pid=1 hostname=8e750e5f5654 request_id=z6malq9ncdqatqm9x0c474of err={"type":"TypeError","message":"Cannot read properties of undefined (reading 'default')","stack":"TypeError: Cannot read properties of undefined (reading 'default')\n    at file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1551\n    at async V (file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1570)\n    at async _ServerRenderer.render (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:25:20)\n    at async #renderOnServer (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:123:28)\n    at async HttpExceptionHandler.handle (file:///app/node_modules/@adonisjs/http-server/build/index.js:293:34)"} msg=Exception raised by error handler

2024/11/28 07:51AM 50 pid=1 hostname=8e750e5f5654 request_id=ke332xj02bcsf3ao8hjeg770 err={"type":"TypeError","message":"Cannot read properties of undefined (reading 'default')","stack":"TypeError: Cannot read properties of undefined (reading 'default')\n    at file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1551\n    at async V (file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1570)\n    at async _ServerRenderer.render (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:25:20)\n    at async #renderOnServer (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:123:28)\n    at async HttpExceptionHandler.handle (file:///app/node_modules/@adonisjs/http-server/build/index.js:293:34)\n    at async InertiaMiddleware.handle (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:182:5)\n    at async file:///app/node_modules/@adonisjs/static/build/chunk-SGSC2NHP.js:44:11","status":500} x-request-id=ke332xj02bcsf3ao8hjeg770 msg=Cannot read properties of undefined (reading 'default')

2024/11/28 07:51AM 50 pid=1 hostname=8e750e5f5654 request_id=ke332xj02bcsf3ao8hjeg770 err={"type":"TypeError","message":"Cannot read properties of undefined (reading 'default')","stack":"TypeError: Cannot read properties of undefined (reading 'default')\n    at file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1551\n    at async V (file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1570)\n    at async _ServerRenderer.render (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:25:20)\n    at async #renderOnServer (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:123:28)\n    at async HttpExceptionHandler.handle (file:///app/node_modules/@adonisjs/http-server/build/index.js:293:34)\n    at async file:///app/node_modules/@adonisjs/static/build/chunk-SGSC2NHP.js:44:11","status":500} x-request-id=ke332xj02bcsf3ao8hjeg770 msg=Cannot read properties of undefined (reading 'default')

2024/11/28 07:51AM 50 pid=1 hostname=8e750e5f5654 request_id=ke332xj02bcsf3ao8hjeg770 err={"type":"TypeError","message":"Cannot read properties of undefined (reading 'default')","stack":"TypeError: Cannot read properties of undefined (reading 'default')\n    at file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1551\n    at async V (file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1570)\n    at async _ServerRenderer.render (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:25:20)\n    at async #renderOnServer (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:123:28)\n    at async HttpExceptionHandler.handle (file:///app/node_modules/@adonisjs/http-server/build/index.js:293:34)\n    at async file:///app/node_modules/@adonisjs/static/build/chunk-SGSC2NHP.js:44:11","status":500} x-request-id=ke332xj02bcsf3ao8hjeg770 msg=Cannot read properties of undefined (reading 'default')

2024/11/28 07:51AM 50 pid=1 hostname=8e750e5f5654 request_id=ke332xj02bcsf3ao8hjeg770 err={"type":"TypeError","message":"Cannot read properties of undefined (reading 'default')","stack":"TypeError: Cannot read properties of undefined (reading 'default')\n    at file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1551\n    at async V (file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1570)\n    at async _ServerRenderer.render (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:25:20)\n    at async #renderOnServer (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:123:28)\n    at async HttpExceptionHandler.handle (file:///app/node_modules/@adonisjs/http-server/build/index.js:293:34)\n    at async file:///app/node_modules/@adonisjs/static/build/chunk-SGSC2NHP.js:44:11","status":500} x-request-id=ke332xj02bcsf3ao8hjeg770 msg=Cannot read properties of undefined (reading 'default')

2024/11/28 07:51AM 50 pid=1 hostname=8e750e5f5654 request_id=ke332xj02bcsf3ao8hjeg770 err={"type":"TypeError","message":"Cannot read properties of undefined (reading 'default')","stack":"TypeError: Cannot read properties of undefined (reading 'default')\n    at file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1551\n    at async V (file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1570)\n    at async _ServerRenderer.render (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:25:20)\n    at async #renderOnServer (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:123:28)\n    at async HttpExceptionHandler.handle (file:///app/node_modules/@adonisjs/http-server/build/index.js:293:34)","status":500} x-request-id=ke332xj02bcsf3ao8hjeg770 msg=Cannot read properties of undefined (reading 'default')

2024/11/28 07:51AM 60 pid=1 hostname=8e750e5f5654 request_id=ke332xj02bcsf3ao8hjeg770 err={"type":"TypeError","message":"Cannot read properties of undefined (reading 'default')","stack":"TypeError: Cannot read properties of undefined (reading 'default')\n    at file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1551\n    at async V (file:///app/node_modules/@inertiajs/react/dist/index.esm.js:5:1570)\n    at async _ServerRenderer.render (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:25:20)\n    at async #renderOnServer (file:///app/node_modules/@adonisjs/inertia/build/chunk-QNLKQLLS.js:123:28)\n    at async HttpExceptionHandler.handle (file:///app/node_modules/@adonisjs/http-server/build/index.js:293:34)"} msg=Exception raised by error handler

Api Endpoint Check

No issue on Development

chunk-QNLKQLLS.js

// src/server_renderer.ts
import { pathToFileURL } from "node:url";
var ServerRenderer = class _ServerRenderer {
  constructor(config, vite) {
    this.config = config;
    this.vite = vite;
  }
  static runtime;
  /**
   * Render the page on the server
   *
   * On development, we use the Vite Runtime API
   * On production, we just import and use the SSR bundle generated by Vite
   */
  async render(pageObject) {
    let render;
    const devServer = this.vite?.getDevServer();
    if (devServer) {
      _ServerRenderer.runtime ??= await this.vite.createRuntime();
      _ServerRenderer.runtime.clearCache();
      render = await _ServerRenderer.runtime.executeEntrypoint(this.config.ssr.entrypoint);
    } else {
      render = await import(pathToFileURL(this.config.ssr.bundle).href);
    }
    const result = await render.default(pageObject);
    return { head: result.head, body: result.body };
  }
};

// src/inertia.ts
var kLazySymbol = Symbol("lazy");
var Inertia = class {
  constructor(ctx, config, vite) {
    this.ctx = ctx;
    this.config = config;
    this.vite = vite;
    this.#sharedData = config.sharedData;
    this.#serverRenderer = new ServerRenderer(config, vite);
  }
  #sharedData = {};
  #serverRenderer;
  /**
   * Check if a value is a lazy prop
   */
  #isLazyProps(value) {
    return typeof value === "object" && value && kLazySymbol in value;
  }
  /**
   * Pick props to resolve based on x-inertia-partial-data header
   *
   * If header is not present, resolve all props except lazy props
   * If header is present, resolve only the props that are listed in the header
   */
  #pickPropsToResolve(component, props) {
    const partialData = this.ctx.request.header("x-inertia-partial-data")?.split(",").filter(Boolean);
    const partialComponent = this.ctx.request.header("x-inertia-partial-component");
    let entriesToResolve = Object.entries(props);
    if (partialData && partialComponent === component) {
      entriesToResolve = entriesToResolve.filter(([key]) => partialData.includes(key));
    } else {
      entriesToResolve = entriesToResolve.filter(([key]) => !this.#isLazyProps(props[key]));
    }
    return entriesToResolve;
  }
  /**
   * Resolve the props that will be sent to the client
   */
  async #resolvePageProps(component, props) {
    const entriesToResolve = this.#pickPropsToResolve(component, props);
    const entries = entriesToResolve.map(async ([key, value]) => {
      if (typeof value === "function") {
        return [key, await value(this.ctx)];
      }
      if (this.#isLazyProps(value)) {
        const lazyValue = value[kLazySymbol];
        return [key, await lazyValue()];
      }
      return [key, value];
    });
    return Object.fromEntries(await Promise.all(entries));
  }
  /**
   * Build the page object that will be returned to the client
   *
   * See https://inertiajs.com/the-protocol#the-page-object
   */
  async #buildPageObject(component, pageProps) {
    return {
      component,
      version: this.config.versionCache.getVersion(),
      props: await this.#resolvePageProps(component, { ...this.#sharedData, ...pageProps }),
      url: this.ctx.request.url(true)
    };
  }
  /**
   * If the page should be rendered on the server or not
   *
   * The ssr.pages config can be a list of pages or a function that returns a boolean
   */
  async #shouldRenderOnServer(component) {
    const isSsrEnabled = this.config.ssr.enabled;
    if (!isSsrEnabled) return false;
    let isSsrEnabledForPage = false;
    if (typeof this.config.ssr.pages === "function") {
      isSsrEnabledForPage = await this.config.ssr.pages(this.ctx, component);
    } else if (this.config.ssr.pages) {
      isSsrEnabledForPage = this.config.ssr.pages?.includes(component);
    } else {
      isSsrEnabledForPage = true;
    }
    return isSsrEnabledForPage;
  }
  /**
   * Resolve the root view
   */
  #resolveRootView() {
    return typeof this.config.rootView === "function" ? this.config.rootView(this.ctx) : this.config.rootView;
  }
  /**
   * Render the page on the server
   */
  async #renderOnServer(pageObject, viewProps) {
    const { head, body } = await this.#serverRenderer.render(pageObject);
    return this.ctx.view.render(this.#resolveRootView(), {
      ...viewProps,
      page: { ssrHead: head, ssrBody: body, ...pageObject }
    });
  }
  /**
   * Share data for the current request.
   * This data will override any shared data defined in the config.
   */
  share(data) {
    this.#sharedData = { ...this.#sharedData, ...data };
  }
  /**
   * Render a page using Inertia
   */
  async render(component, pageProps, viewProps) {
    const pageObject = await this.#buildPageObject(component, pageProps);
    const isInertiaRequest = !!this.ctx.request.header("x-inertia");
    if (!isInertiaRequest) {
      const shouldRenderOnServer = await this.#shouldRenderOnServer(component);
      if (shouldRenderOnServer) return this.#renderOnServer(pageObject, viewProps);
      return this.ctx.view.render(this.#resolveRootView(), { ...viewProps, page: pageObject });
    }
    this.ctx.response.header("x-inertia", "true");
    return pageObject;
  }
  /**
   * Create a lazy prop
   *
   * Lazy props are never resolved on first visit, but only when the client
   * request a partial reload explicitely with this value.
   *
   * See https://inertiajs.com/partial-reloads#lazy-data-evaluation
   */
  lazy(callback) {
    return { [kLazySymbol]: callback };
  }
  /**
   * This method can be used to redirect the user to an external website
   * or even a non-inertia route of your application.
   *
   * See https://inertiajs.com/redirects#external-redirects
   */
  async location(url) {
    this.ctx.response.header("X-Inertia-Location", url);
    this.ctx.response.status(409);
  }
};

// src/inertia_middleware.ts
var InertiaMiddleware = class {
  constructor(config, vite) {
    this.config = config;
    this.vite = vite;
  }
  async handle(ctx, next) {
    const { response, request } = ctx;
    ctx.inertia = new Inertia(ctx, this.config, this.vite);
    await next();
    const isInertiaRequest = !!request.header("x-inertia");
    if (!isInertiaRequest) return;
    response.header("Vary", "Accept");
    const method = request.method();
    if (response.getStatus() === 302 && ["PUT", "PATCH", "DELETE"].includes(method)) {
      response.status(303);
    }
    const version = this.config.versionCache.getVersion().toString();
    if (method === "GET" && request.header("x-inertia-version", "") !== version) {
      response.header("x-inertia-location", request.url());
      response.status(409);
    }
  }
};

export {
  InertiaMiddleware
};

Reproduction repo

No response

[thetutlage]

Hey, the issue tracker is to report bugs. You must discuss these things on the discussion forum instead