Migrating to Remix Vite issues (ReferenceError: module is not defined)

[Gougerik]

Greetings!

I have recently embarked on the transition from the traditional Classic Remix Compiler to the more contemporary Remix Vite. As anticipated, this migration has not been without its challenges. I have encountered and resolved a number of issues thus far. However, I am currently facing a particularly perplexing obstacle:
ReferenceError: module is not defined at eval (C:/Users/ASUS/Documents/WEB/turista/wip/node_modules/react/jsx-dev-runtime.js:8:3) at instantiateModule (file:///C:/Users/ASUS/Documents/WEB/turista/wip/node_modules/vite/dist/node/chunks/dep-BcXSligG.js:53408:11)

vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
    ssr: {
        noExternal: true
    },
    plugins: [
        remix(),
        tsconfigPaths(),
    ],
    build: {
        commonjsOptions: {
            transformMixedEsModules: true
        }
    }
});

As you may have noticed, I incorporated some configuration settings I discovered on Stack Overflow, GitHub, and other sources. These adjustments have successfully resolved the production build issues, and the production build now appears to be functioning correctly. However, while running the development build, the previously mentioned error persists. I suspect that the issue is caused by one or more of the dependencies.

package.json

{
  // ...
  "type": "module",
  "private": true,
  "sideEffects": false,
  "dependencies": {
    "@apollo/client": "^3.10.6",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/sortable": "^8.0.0",
    "@emotion/react": "^11.11.4",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.5",
    "@fontsource/inter": "^5.0.18",
    "@marsidev/react-turnstile": "^0.7.1",
    "@mui/icons-material": "^5.15.20",
    "@mui/material": "^5.15.20",
    "@mui/x-date-pickers": "^7.7.1",
    "@mui/x-date-pickers-pro": "^7.7.1",
    "@react-leaflet/core": "^2.1.0",
    "@remix-run/css-bundle": "^2.9.2",
    "@remix-run/express": "^2.9.2",
    "@remix-run/node": "^2.9.2",
    "@remix-run/react": "^2.9.2",
    "@sentry/remix": "^8.11.0",
    "axios": "^1.7.2",
    "cross-env": "^7.0.3",
    "date-fns": "3.6.0",
    "draft-js": "^0.11.7",
    "embla-carousel-react": "^8.1.5",
    "graphql": "^16.9.0",
    "immutable": "^4.3.6",
    "isbot": "^5.1.10",
    "leaflet": "^1.9.4",
    "lodash-es": "^4.17.21",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-drag-drop-files": "^2.3.10",
    "react-lazy-load-image-component": "^1.6.2",
    "react-leaflet": "^4.2.1",
    "recharts": "^2.12.7",
    "universal-cookie": "^7.1.4"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.9.2",
    "@remix-run/eslint-config": "^2.9.2",
    "@types/cookie-parser": "^1.4.7",
    "@types/draft-js": "^0.11.18",
    "@types/leaflet": "^1.9.12",
    "@types/leaflet.fullscreen": "^3.0.2",
    "@types/lodash-es": "^4.17.12",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/react-lazy-load-image-component": "^1.6.4",
    "@types/recharts": "^1.8.29",
    "dotenv": "^16.4.5",
    "eslint": "^9.5.0",
    "remix-sitemap": "^3.2.0",
    "typescript": "^5.5.2",
    "vite": "^5.3.1",
    "vite-plugin-cjs-interop": "^2.1.1",
    "vite-tsconfig-paths": "^4.3.2"
  },
}

tsconfig.json

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/.server/**/*.ts",
    "**/.server/**/*.tsx",
    "**/.client/**/*.ts",
    "**/.client/**/*.tsx"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["@remix-run/node", "vite/client"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "#api/*": ["./app/api/*"],
      "#components/*": ["./app/lib/components/*"],
      "#utils/*": ["./app/lib/utils/*"],
      "#types/*": ["./app/lib/types/*"]
    },
    "noEmit": true
  }
}

I tried using vite-plugin-cjs-interop, vite-plugin-commonjs plugins but that didn't help.

If you require any additional information or code snippets, please let me know, and I will provide them.
Thank you in advance for your assistance.

[LocatedInSpace]

What did you do to resolve this 😅 ?

[Gougerik]

What did you do to resolve this 😅 ?

I found out when I removed noExternals: true flag a development build thrown another error which I was able to reproduce using vite-plugin-cjs-interop although then I couldn't even build for production so I tried several combinations of vite config and ended up with following vite.config.ts:

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

export default defineConfig({
    ssr: {
        noExternal: process.env.NODE_ENV === 'production' ? true : []
    },
    plugins: [
        remix(),
        tsconfigPaths(),
        cjsInterop({
            dependencies: process.env.NODE_ENV === 'development' ? [
                '@apollo/client',
                'draft-js',
                'react-lazy-load-image-component',
            ] : []
        })
    ],
    build: {
        commonjsOptions: {
            transformMixedEsModules: true,
        }
    }
});

I'm not sure if that's correct approach but at least for now I can work with that.

[LocatedInSpace]

I tried something similar but have not solved my issue - thanks for the answer though :)

[matthewlynch]

@Gougerik thanks for this. This config pointed me in the right direction to solve an issue I was facing with @tanstack/react-form depending on a CJS module (use-sync-external-store).