Build and Start Issues with Remix and Vite

[askneedle]

Remix + Vite + MUI: ESM/CommonJS Conflict After Migration

Description

I'm encountering issues with building and starting a project that was recently migrated to Vite from the classic compiler. The project builds successfully, but when attempting to start after a successful build, it encounters module import errors.

Project Configuration

package.json

Click to expand

{
  "name": "EID012",
  "version": "5.0.0",
  "private": true,
  "scripts": {
    "setup:dev": "./setup.sh dev",
    "setup:prod": "./setup.sh prod",
    "setup:next": "./setup.sh next",
    "build": "remix vite:build",
    "build:dev": "npm run setup:dev && remix vite:build",
    "build:prod": "npm run setup:prod && remix vite:build",
    "build:next": "npm run setup:next && remix vite:build",
    "dev": "remix vite:dev",
    "dev:dev": "./start-fly-connect.sh dev",
    "dev:prod": "./start-fly-connect.sh prod",
    "dev:next": "./start-fly-connect.sh next",
    "start": "remix-serve ./build/server/index.js",
    "script": "npx ts-node script.ts",
    "deploy:dev": "npm run setup:dev && fly deploy --local-only",
    "deploy:next": "npm run setup:next && fly deploy",
    "deploy:prod": "npm run setup:prod && fly deploy",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@anthropic-ai/sdk": "^0.19.1",
    "@emotion/cache": "latest",
    "@emotion/react": "^11.13.0",
    "@emotion/server": "latest",
    "@emotion/styled": "^11.13.0",
    "@google-cloud/bigquery": "^7.5.0",
    "@hello-pangea/dnd": "^16.6.0",
    "@hookform/resolvers": "^3.5.0",
    "@langchain/anthropic": "^0.1.9",
    "@langchain/core": "^0.1.53",
    "@langchain/openai": "^0.0.25",
    "@mui/icons-material": "^5.15.20",
    "@mui/lab": "^5.0.0-alpha.163",
    "@mui/material": "^5.16.4",
    "@mui/system": "^5.16.6",
    "@mui/x-data-grid": "^7.6.1",
    "@mui/x-date-pickers": "^7.11.1",
    "@notionhq/client": "^2.2.14",
    "@prisma/client": "^5.5.2",
    "@remix-run/node": "latest",
    "@remix-run/react": "latest",
    "@remix-run/serve": "latest",
    "@remix-run/server-runtime": "latest",
    "@segment/analytics-node": "^2.1.2",
    "@sendgrid/mail": "^8.1.3",
    "@tiptap/extension-document": "^2.4.0",
    "@tiptap/extension-link": "^2.4.0",
    "@tiptap/extension-mention": "^2.4.0",
    "@tiptap/extension-paragraph": "^2.4.0",
    "@tiptap/extension-text": "^2.4.0",
    "@tiptap/pm": "^2.4.0",
    "@tiptap/react": "^2.4.0",
    "@tiptap/starter-kit": "^2.4.0",
    "@vitejs/plugin-react": "^4.3.1",
    "algoliasearch": "^4.23.3",
    "bcrypt": "^5.1.1",
    "cloudinary": "^1.41.0",
    "date-fns": "^2.30.0",
    "dotenv": "^16.4.5",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "file-saver": "^2.0.5",
    "firebase": "^10.11.0",
    "firebase-admin": "^12.0.0",
    "google-auth-library": "^9.4.1",
    "google-spreadsheet": "^4.1.1",
    "html-to-draftjs": "^1.5.0",
    "ioredis": "^5.3.2",
    "jsdom": "^22.1.0",
    "lodash": "^4.17.21",
    "markdown-to-jsx": "^7.3.2",
    "marked": "^12.0.2",
    "openai": "^4.19.1",
    "prop-types": "^15.8.1",
    "react": "latest",
    "react-dom": "latest",
    "react-draft-wysiwyg": "^1.15.0",
    "react-hook-form": "^7.51.5",
    "react-icons": "^5.0.1",
    "react-image-crop": "^11.0.5",
    "react-instantsearch": "^7.10.0",
    "react-select": "^5.8.0",
    "react-simple-wysiwyg": "^3.1.1",
    "react-toastify": "^10.0.5",
    "remix-auth": "^3.6.0",
    "remix-auth-form": "^1.4.0",
    "remix-toast": "^1.2.0",
    "remix-utils": "^7.6.0",
    "uuid": "^9.0.1",
    "vite-plugin-require": "^1.2.14",
    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@flydotio/dockerfile": "^0.4.10",
    "@remix-run/dev": "^2.11.0",
    "@types/bcrypt": "^5.0.2",
    "@types/draft-js": "^0.11.18",
    "@types/draftjs-to-html": "^0.8.4",
    "@types/file-saver": "^2.0.7",
    "@types/html-to-draftjs": "^1.4.3",
    "@types/jsdom": "^21.1.5",
    "@types/lodash": "^4.17.0",
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "@types/react-draft-wysiwyg": "^1.13.8",
    "@types/react-window": "^1.8.8",
    "@types/uuid": "^9.0.7",
    "prisma": "^5.5.2",
    "typescript": "latest",
    "vite": "^5.3.5",
    "vite-plugin-cjs-interop": "^2.1.1",
    "vite-tsconfig-paths": "^4.3.2"
  },
  "engines": {
    "node": ">=14"
  },
  "sideEffects": false
}

tsconfig.json

Click to expand

{
  "include": [
    "remix.env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "redis/redis",
    "**/*.d.ts",
    "vite.config.mjs",
    "vite.config.ts"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022", "ESNext"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"],
      "@mui/*": ["node_modules/@mui/*"]
    },
    "types": ["@remix-run/node", "vite/client"],
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowSyntheticDefaultImports": true,
    "noEmit": true
  }
}

vite.config.ts

Click to expand

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { cjsInterop } from "vite-plugin-cjs-interop";
import vitePluginRequire from "vite-plugin-require";

installGlobals();

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    vitePluginRequire(),
    remix({
      ignoredRouteFiles: ["**/*.css"],
    }),
    tsconfigPaths(),
    cjsInterop({
      dependencies: [
        "require",
        "draft-js",
        "firebase-admin",
        "@sendgrid/mail",
        "file-saver",
      ],
    }),
  ],
  optimizeDeps: {
    include: ["prop-types", "react-is", "react-dom", "@mui/system"],
    exclude: ["date-fns"],
  },
  resolve: {
    alias: {
      "@mui/system": "@mui/system/esm",
      "@mui/icons-material": "@mui/icons-material/esm",
      "date-fns": "date-fns/esm",
    },
  },
});

Error Messages

Initial Error

When running npm run start, I get this error:

> [email protected] start
> remix-serve ./build/server/index.js

(node:37734) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/faris/Desktop/Projects/emails/build/server/index.js:2
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at run (/Users/faris/Desktop/Projects/emails/node_modules/@remix-run/serve/dist/cli.js:112:15)

Error After Setting "type": "module" in package.json

After setting "type": "module" in the package.json or using the .mjs extension, I get the following error:

file:///Users/faris/Desktop/Projects/emails/build/server/index.js?t=1722842207938.5627:30
import { useTheme as useTheme$1, keyframes, GlobalStyles as GlobalStyles$1, createBox, css, createContainer, createStack, unstable_resolveBreakpointValues, handleBreakpoints, getPath, alpha as alpha$1, styled as styled$2, shouldForwardProp } from "@mui/system/esm/index.js";
                                            ^^^^^^^^^^^^
SyntaxError: Named export 'GlobalStyles' not found. The requested module '@mui/system/esm/index.js' is a CommonJS module, which may not support all module.exports as named exports.

Question

Has anyone encountered similar issues with Remix, Vite, and MUI? Any suggestions on how to resolve this ESM/CommonJS conflict would be greatly appreciated.

Additional Context

• This project was built with remix classic compiler. I just recently migrated to vite
• The project uses Material-UI (MUI) components
• The project was recently migrated from the classic compiler to Vite

[sparkida]

@askneedle The issue is due to the alias which circumvents Node's ability to perform module resolution automatically. Instead Node will just assume it's CJS and not ESM because there is no package.json at @mui/system/esm/ and the main file ends in .js not .mjs.

To fix the issue:

1. Remove from resolve.alias and let Vite handle the resolution on it's own.
2. Remove from optimizeDeps - in general, if it's in node_modules, you don't need to include it.
3. Make sure your package.json does use "type": "module".

Additional insights:

• I use resolve.alias in conjuction with optimizeDeps.exclude when there is a distributable build that is already optimized in order to speed up build times for deployments. For example, Tensorflow has a distributable esm build, and is otherwise a large package to bundle.

  const config = {
    plugins: [remix(remixConfig)],
    resolve: {
      alias: {
        '~': path.resolve('./app')
      },
    },
  };
  if (isProduction) {
    // don't attempt to optimize, we'll provide it directly below
    config.optimizeDeps = {
      exclude: ['@tensorflow/tfjs'],
    };
    config.resolve.alias['@tensorflow/tfjs'] = path.resolve(
      __dirname, 
      'node_modules/@tensorflow/tfjs/dist/tf.es2017.min.js'
    );
    // ...
  }
  return config;