CSS bundling fails without `entry.client.tsx` and `entry.server.tsx` in a monorepo

[huw]

What version of Remix are you using?

1.14.0

Are all your remix dependencies & dev-dependencies using the same version?

• [X] Yes

Steps to Reproduce

1. Have a monorepo that installs packages outside of the sub-package root (ex. using Yarn Workspaces)
2. Use create-remix to create a new project in the monorepo
3. Enable unstable_vanillaExtract or unstable_cssModules
4. Delete app/entry.client.tsx and app/entry.server.tsx
5. Add the following to root.tsx:

import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

6. remix build

Expected Behavior

The project should build correctly, as it does when entry.client.tsx and entry.server.tsx are present (this is also the appropriate workaround)

Actual Behavior

The following error is produced:

error: Build failed with 1 error:
css-bundle-entry-module:__remix_cssBundleEntryModule__:1:29: ERROR: Could not resolve "../../node_modules/@remix-run/dev/dist/config/defaults/entry.client.react.tsx"
    at failureErrorWithLog (/workspaces/remix/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1591:15)
    at /workspaces/remix/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1047:28
    at runOnEndCallbacks (/workspaces/remix/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1463:61)
    at buildResponseToResult (/workspaces/remix/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1045:7)
    at /workspaces/remix/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1157:14
    at responseCallbacks.<computed> (/workspaces/remix/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:694:9)    at handleIncomingPacket (/workspaces/remix/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:749:9)
    at Socket.readFromStdout (/workspaces/remix/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:670:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 29,
        file: 'css-bundle-entry-module:__remix_cssBundleEntryModule__',
        length: 79,
        line: 1,
        lineText: 'export * as entryClient from "../../node_modules/@remix-run/dev/dist/config/defaults/entry.client.react.
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Could not resolve "../../node_modules/@remix-run/dev/dist/config/defaults/entry.client.react.tsx"'
    }
  ],
  warnings: []
}

I tested with exactly the same package outside of a monorepo, and the error did not occur. So my best guess is that in a monorepo the relative import is failing due to a scoping issue of some kind.

[wesleygrimes]

I can confirm I am having a similar issue in an Nx monorepo using unstable_cssModules. If I downgrade to 1.13.0 it works great. In my case, however, I have both entry.client.tsx and entry.server.tsx and am receiving the following error that appears related to the above.

/Users/wes/Code/iheartjane/client/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1591
  let error = new Error(`${text}${summary}`);
              ^
Error: Build failed with 1 error:
css-bundle-entry-module:__remix_cssBundleEntryModule__:1:29: ERROR: Could not resolve "src/app/entry.client.tsx"
    at failureErrorWithLog (/Users/wes/Code/iheartjane/client/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1591:15)
    at /Users/wes/Code/iheartjane/client/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1047:28
    at runOnEndCallbacks (/Users/wes/Code/iheartjane/client/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1463:61)
    at buildResponseToResult (/Users/wes/Code/iheartjane/client/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1045:7)
    at /Users/wes/Code/iheartjane/client/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:1157:14
    at responseCallbacks.<computed> (/Users/wes/Code/iheartjane/client/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:694:9)
    at handleIncomingPacket (/Users/wes/Code/iheartjane/client/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:749:9)
    at Socket.readFromStdout (/Users/wes/Code/iheartjane/client/node_modules/@remix-run/dev/node_modules/esbuild/lib/main.js:670:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 29,
        file: 'css-bundle-entry-module:__remix_cssBundleEntryModule__',
        length: 26,
        line: 1,
        lineText: 'export * as entryClient from "src/app/entry.client.tsx";',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "src/app/entry.client.tsx" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "src/app/entry.client.tsx"'
    }
  ],
  warnings: []
}

[wesleygrimes]

Thank you @mcansh for tackling this! I will give this fix a try locally with patch-package as well.

[wesleygrimes]

Just confirming that at least in my instance, your PR resolves the issue. I applied this patch and it works:

diff --git a/node_modules/@remix-run/dev/dist/compiler/plugins/cssBundleEntryModulePlugin.js b/node_modules/@remix-run/dev/dist/compiler/plugins/cssBundleEntryModulePlugin.js
index 61b318c..0ba16c6 100644
--- a/node_modules/@remix-run/dev/dist/compiler/plugins/cssBundleEntryModulePlugin.js
+++ b/node_modules/@remix-run/dev/dist/compiler/plugins/cssBundleEntryModulePlugin.js
@@ -47,7 +47,7 @@ function cssBundleEntryModulePlugin(config) {
           loader: "js",
           contents: [
           // These need to be exports to avoid tree shaking
-          `export * as entryClient from ${JSON.stringify(path__default["default"].relative(config.rootDirectory, config.entryClientFilePath))};`, ...Object.keys(config.routes).map((key, index) => {
+          `export * as entryClient from ${JSON.stringify(path__default["default"].resolve(config.rootDirectory, config.entryClientFilePath))};`, ...Object.keys(config.routes).map((key, index) => {
             let route = config.routes[key];
             return `export * as route${index} from ${JSON.stringify(`./${route.file}`)};`;
           })].join("\n")

[github-actions[bot]]

🤖 Hello there,

We just published version v0.0.0-nightly-bf9d0a9-20230314 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[wesleygrimes]

I can confirm that this issue is resolved for my case in v0.0.0-nightly-bf9d0a9-20230314. @huw does it work for you now?

[huw]

Solved for me too. Awesome.

[machour]

Fixed in 1.15.0: https://github.com/remix-run/remix/blob/remix%401.15.0/packages/remix-dev/CHANGELOG.md#patch-changes