bug: remix vitePlugin module not found while running remix as vite plugin

[izznatsir]

Version: Deno 1.39.2

{
  "compilerOptions": {
    "allowJs": true,
    "jsx": "react-jsx",
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "strict": true
  },
  "imports": {
    "~/": "./app/"
  },
  "unstable": ["bare-node-builtins", "byonm", "sloppy-imports"]
}

I use the official unstable-vite template with Deno byonm mode as configured above. When executing deno task dev I saw below error:

failed to load config from /home/izznatsir/codes/local/deno/remix-vite/vite.config.ts
error when starting dev server:
SyntaxError: The requested module 'file:///home/izznatsir/codes/local/deno/remix-vite/node_modules/@remix-run/dev/dist/index.js' does not provide an export named 'unstable_vitePlugin' at file:///home/izznatsir/codes/local/deno/remix-vite/vite.config.ts.timestamp-1704507445127-6a0837dd2ff8a.mjs:2:10
    at async loadConfigFromBundledFile (file:///home/izznatsir/codes/local/deno/remix-vite/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:68380:21)
    at async loadConfigFromFile (file:///home/izznatsir/codes/local/deno/remix-vite/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:68237:28)
    at async resolveConfig (file:///home/izznatsir/codes/local/deno/remix-vite/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:67838:28)
    at async _createServer (file:///home/izznatsir/codes/local/deno/remix-vite/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:60327:20)
    at async CAC.<anonymous> (file:///home/izznatsir/codes/local/deno/remix-vite/node_modules/vite/dist/node/cli.js:764:24)

But, executing vite.config.ts directly is working via deno run -A vite.config.ts.

[kt3k]

@dsherret Do you have any clue on this?

[marvinhagemeister]

Intercepting what vite is doing it seems like the config file is transpiled to ESM:

import { unstable_vitePlugin as remix } from "file:///Users/marvinh/dev/test/my-remix-app/node_modules/@remix-run/dev/dist/index.js";
import { defineConfig } from "file:///Users/marvinh/dev/test/my-remix-app/node_modules/vite/dist/node/index.js";
import tsconfigPaths from "file:///Users/marvinh/dev/test/my-remix-app/node_modules/vite-tsconfig-paths/dist/index.mjs";
var vite_config_default = defineConfig({
  plugins: [remix(), tsconfigPaths()]
});
export {
  vite_config_default as default
};

But because the first import is a file:// import instead of npm: the CJS detection doesn't kick in. This works perfectly fine in node though.

Here is a minimal reproduction:

1. Create a new folder and create a package.json file with these contents:

{
  "type": "module",
  "dependencies": {
    "@remix-run/dev": "^2.4.1"
  }
}

2. Run npm i
3. Create file foo.js these contents:

import * as remix from "@remix-run/dev";
console.log(remix);

4. Run deno run -A --unstable-bare-node-builtins --unstable-byonm --unstable-sloppy-imports main.js -> Error

This works perfectly fine in node. It looks like we're not checking if the file resides in a module directory and check package.json for the module type.

[birkskyum]

this repro appear to work with deno 1.43.3:

repos/deno-kitchensink/viteplugin via 🅒 base 
➜ node main.js 
[Module: null prototype] {
  __esModule: true,
  cli: { run: [AsyncFunction: run] },
  cloudflareDevProxyVitePlugin: [Function: cloudflareDevProxyVitePlugin],
  default: {
    cli: { run: [AsyncFunction: run] },
    getDependenciesToBundle: [Function: getDependenciesToBundle],
    vitePlugin: [Function: vitePlugin],
    cloudflareDevProxyVitePlugin: [Function: cloudflareDevProxyVitePlugin]
  },
  getDependenciesToBundle: [Function: getDependenciesToBundle],
  vitePlugin: [Function: vitePlugin]
}

repos/deno-kitchensink/viteplugin via 🅒 base 
➜ deno run -A --unstable-bare-node-builtins --unstable-byonm --unstable-sloppy-imports main.js
Warning Sloppy imports are not recommended and have a negative impact on performance.
[Module: null prototype] {
  __esModule: true,
  cli: { run: [AsyncFunction: run] },
  cloudflareDevProxyVitePlugin: [Function: cloudflareDevProxyVitePlugin],
  default: {
    cli: { run: [AsyncFunction: run] },
    getDependenciesToBundle: [Function: getDependenciesToBundle],
    vitePlugin: [Function: vitePlugin],
    cloudflareDevProxyVitePlugin: [Function: cloudflareDevProxyVitePlugin]
  },
  getDependenciesToBundle: [Function: getDependenciesToBundle],
  vitePlugin: [Function: vitePlugin]
}

Also the unstable-vite template is now simply named remix, and tracked further in

• Support Remix / React Router v7 #20790

[izznatsir]

It works! Thanks!