Running remix starter in new NX Workspace

[IssaGithub]

Remix Frontend Setup Issues

Problem Summary

I am trying to intergrate storefront-remix-starter into NX Monorepo, but have several problems with vite etc.
This is my repo
https://github.com/IssaGithub/Vendure_NX_Remix_Starter

Thanks for your help.

Issues Identified

1. Dynamic Import Analysis Warning

File: apps/remix-frontend/app/utils/platform-adapter.ts
Error:

The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats.

What iam missing regarding vite or setup nx in order to run the storefront-remix-starter inside nx?

Current Code:

export async function safeRequireNodeDependency(module: string) {
  return import(module.split('').join(''));
}

Solution: Add @vite-ignore comment and proper error handling.

2. Null Reference Error in Header Component

File: apps/remix-frontend/app/components/header/Header.tsx
Error:

TypeError: Cannot read properties of null (reading 'activeCustomer')

Root Cause: The simplified loader in root.tsx returns null for activeCustomer, but the Header component expects a valid object.

3. CSS Import Route Error

Error:

No route matches URL "/@tailwind%20base;/*%20@tailwind%20components;%20*/@tailwind%20utilities;..."

Root Cause: CSS imports are being treated as routes, indicating a configuration issue with Vite/Remix CSS handling.

4. Missing Dependencies

Several packages are missing or have incorrect versions:

• clsx - Required for className utilities
• @remix-run/node - Required for server-side functionality
• Various i18n packages causing import issues

5. TypeScript Path Mapping Issues

File: apps/remix-frontend/tsconfig.app.json
Issue: The ~ alias for imports is not properly configured, causing module resolution failures.

Proposed Solutions

1. Fix Dynamic Import

export async function safeRequireNodeDependency(module: string) {
  try {
    // @vite-ignore
    return await import(module);
  } catch (error) {
    console.warn(`Failed to import ${module}:`, error);
    return null;
  }
}

2. Fix Header Component Null Handling

// In Header component, add null checks:
const { activeCustomer } = useRootLoader();
const customerName = activeCustomer?.firstName || 'Guest';

3. Fix CSS Configuration

Ensure proper CSS handling in vite.config.ts and check for conflicting CSS imports.

4. Install Missing Dependencies

npm install clsx @remix-run/node

5. Fix TypeScript Configuration

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    }
  }
}

Environment

• OS: Windows 10
• Node.js: v22.13.0
• Package Manager: npm/yarn
• Framework: Remix with NX workspace
• Build Tool: Vite

Priority

High - These issues prevent the frontend from running at all.

Additional Notes

The frontend appears to be a Vendure storefront with complex i18n setup and external API dependencies. Consider creating a simplified version for development without external dependencies.

[IssaGithub]

note: I will try to migrate nx to the remix starter, maybe the other side around works better :-)