Slice preview shows an error for each slice using NX mono repro and Clerk

[nolafs]

Versions

slicemachine/adapter-next ^0.3.45 slice-machine-ui ^2.4.1 node 20

Reproduction

The preview have stopped working for me. I cannot debug it as the previews only display an error message in the preview but no console errors. I do see a network error (failed)net::ERR_TOO_MANY_REDIRECTS requesting the slice-simulator route. I am not complete sure if this is cause my Clerk.

Request URL: https://deploy-preview-10--kids-guitar-dojo.netlify.app/slice-simulator Request Method: GET Status Code: 307 Temporary Redirect Remote Address: 35.156.224.161:443 Referrer Policy: strict-origin-when-cross-origin

The slice simulator does work perfectly fine when going to the route:

https://deploy-preview-10--kids-guitar-dojo.netlify.app/slice-simulator

Steps to reproduce

I do have to mention I am using NX mono repro and host the site on Netlify. In order to get slice machine to work, I added package.json to the route of the app. As Netlify only allows one yarn.lock file, the the app/myapp/yarn.lock is not committed to the repository.

What is expected?

I expect the preview to work perfectly.

What is actually happening?

[xrutayisire]

Hi,

Yes, it seems since you're using Clerk it prevents the slice preview to work. If you prevent the slice-simulator route to be intercepted by the middleware, it should work.

I had a notification mentioning a comment from you that you were able to do that. I will close this issue, you can comment back if you need more help.

[nolafs]

Hi,

Adding slice-simulator to the middleware.ts config does not work.

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isProtectedRoute = createRouteMatcher(['/admin(.*)', '/courses(.*)']);

export default clerkMiddleware(
  (auth, req) => {
    const url = req.nextUrl.pathname;
    // Skip Clerk processing for /slice-simulator and its sub-paths
    if (url.startsWith('/slice-simulator')) {
      return;
    }

    if (isProtectedRoute(req)) auth().protect();
  },
  { debug: false },
);

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
    '/(!slice-simulator)',
  ],
};

Either I am doing it wrong or something needs to be amended on your side.

[nolafs]

Ok, figured it out:

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|slice-simulator|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

this is working now