@clerk/remix compatibility issues with Remix v2

deepakbaliga commented 1 year ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerkinc/javascript/issues
[X] This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

https://github.com/deepakbaliga/boilr/tree/clerk-remix-version-compatibility-issue

Publishable key

pk_test_YWNjdXJhdGUtdG9ydG9pc2UtMjEuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Steps to reproduce:

Create a new project with npx create-remix@latest <projectname>
Install @clerk/remix as per the documentation https://clerk.com/docs/quickstarts/remix

Expected behavior:

Clerk to be compatible with remix v2.

Actual behavior:

✘ [ERROR] Build failed with 1 error:
app/root.tsx:5:31: ERROR: Could not resolve "@clerk/remix/ssr" [plugin css-bundle-plugin]

    app/root.tsx:20:30:
      20 │ import { cssBundleHref } from '@remix-run/css-bundle';
         ╵                               ~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/@remix-run/dev/dist/compiler/plugins/cssBundlePlugin.js:35:12:
      35 │       build.onLoad({
         ╵             ~~~~~~

    at setup (/Users/deepakbaliga/Workspace/boilr/node_modules/@remix-run/dev/dist/compiler/plugins/cssBundlePlugin.js:35:13)
    at handlePlugins (/Users/deepakbaliga/Workspace/boilr/node_modules/esbuild/lib/main.js:1279:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

✘ [ERROR] Could not resolve "@clerk/remix/ssr"

    app/root.tsx:23:31:
      23 │ import { rootAuthLoader } from '@clerk/remix/ssr';
         ╵                                ~~~~~~~~~~~~~~~~~~

  You can mark the path "@clerk/remix/ssr" as external to exclude it from the bundle, which will remove this error.

Environment

System:
    OS: macOS 13.5.2
    CPU: (8) arm64 Apple M1
    Memory: 49.47 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.6.1 - /opt/homebrew/bin/node
    npm: 9.8.1 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 16.6
  npmPackages:
    @clerk/remix: ^2.10.2 => 2.10.2 
    @radix-ui/react-slot: ^1.0.2 => 1.0.2 
    @remix-run/css-bundle: ^2.0.0 => 2.0.0 
    @remix-run/dev: ^2.0.0 => 2.0.0 
    @remix-run/eslint-config: ^2.0.0 => 2.0.0 
    @remix-run/node: ^2.0.0 => 2.0.0 
    @remix-run/react: ^2.0.0 => 2.0.0 
    @remix-run/serve: ^2.0.0 => 2.0.0 
    @types/react: ^18.2.20 => 18.2.21 
    @types/react-dom: ^18.2.7 => 18.2.7 
    autoprefixer: ^10.4.15 => 10.4.15 
    class-variance-authority: ^0.7.0 => 0.7.0 
    clsx: ^2.0.0 => 2.0.0 
    eslint: ^8.38.0 => 8.49.0 
    husky: ^8.0.3 => 8.0.3 
    isbot: ^3.6.8 => 3.6.13 
    lucide-react: ^0.279.0 => 0.279.0 
    prettier: ^3.0.3 => 3.0.3 
    pretty-quick: ^3.1.3 => 3.1.3 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    tailwind-merge: ^1.14.0 => 1.14.0 
    tailwindcss: ^3.3.3 => 3.3.3 
    tailwindcss-animate: ^1.0.7 => 1.0.7 
    typescript: ^5.1.6 => 5.2.2

dimkl commented 1 year ago

Hello @deepakbaliga Could you try using this import import { rootAuthLoader } from "@clerk/remix/ssr.server";?

ref: https://github.com/clerkinc/javascript/tree/main/packages/remix

deepakbaliga commented 1 year ago

Hi @dimkl , thanks for jumping on to the issue.

import { rootAuthLoader } from "@clerk/remix/ssr.server";

Doesnt seem to be helping.

LekoArts commented 1 year ago

Please try this import:

import { rootAuthLoader } from "@clerk/remix/ssr.server.js";

In my test project this seems to work. This is a workaround for now!

deepakbaliga commented 1 year ago

@LekoArts , that worked. Thank you very much.

clerk-cookie commented 1 month ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

clerk / javascript