Remix App Getting "TypeError: (0 , import_isbot.default) is not a funct"

[Devejo]

Hi, I just created a fresh remix app using shopify CLI and after everything is setup, I run into an error saying "TypeError: (0 , import_isbot.default) is not a funct" not sure what happen but I just run "npm init @Shopify/app@latest" then "npm run dev". Any help? Thanks a lot in advance. 

[SomeUsernameHe]

Weird... I only used the JS version but I did try the TS just now and I am also running into the same issue. 

I think you might want to submit a bug report on the github: 

https://github.com/Shopify/shopify-app-template-remix/issues

Side note: It did have me upgrade to the latest shopify create-app

Need to install the following packages:
  @Shopify/create-app@3.53.0

so it could be a bug with the new package? 

[Devejo]

Hi, thanks for the quick reply.

I'm actually new to this but I did install the app using the JS format not the TS.

[SomeUsernameHe]

Try the same fix, I'm not at my computer at the moment but you should have an entry.server.js in your app folder. Possibly in routes.

[SomeUsernameHe · Accepted solution]

Here is the correct code to fix the issue for you, replace your entire entry.server.ts with the following: 

import { PassThrough } from "stream";
import { renderToPipeableStream } from "react-dom/server";
import { RemixServer } from "@remix-run/react";
import {
  createReadableStreamFromReadable,
  type EntryContext,
} from "@remix-run/node";
import { isbot } from "isbot";
import { addDocumentResponseHeaders } from "./shopify.server";

const ABORT_DELAY = 5000;

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  addDocumentResponseHeaders(request, responseHeaders);
  const callbackName = isbot(request.headers.get("user-agent") || "")
    ? "onAllReady"
    : "onShellReady";

  return new Promise((resolve, reject) => {
    const { pipe, abort } = renderToPipeableStream(
      <RemixServer
        context={remixContext}
        url={request.url}
        abortDelay={ABORT_DELAY}
      />,
      {
        [callbackName]: () => {
          const body = new PassThrough();
          const stream = createReadableStreamFromReadable(body);

          responseHeaders.set("Content-Type", "text/html");
          resolve(
            new Response(stream, {
              headers: responseHeaders,
              status: responseStatusCode,
            })
          );
          pipe(body);
        },
        onShellError(error) {
          reject(error);
        },
        onError(error) {
          responseStatusCode = 500;
          console.error(error);
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

Sorry, I was in a rush at the time. But the two changes are these lines here:

import isbot from "isbot";

to

import { isbot } from "isbot";

and 

  const callbackName = isbot(request.headers.get("user-agent"))

to

  const callbackName = isbot(request.headers.get("user-agent") || "")

[Devejo]

Thank you so much.

While this one works, I only have to adjust two code which is the ff:

from import isbot from "isbot"; to import { isbot } from "isbot";
from const callbackName = isbot(request.headers.get("user-agent")) to const callbackName = isbot(request.headers.get("user-agent") || "")

[dkcamargoexe]

Hey man i was struggling yestarday all day with this issue and now i found this very helpful also solved my problem!!

[SomeUsernameHe]

Awesome, I am super glad I could help! If you run into any other problems, feel free to reach out!

Happy Coding guys! 

[Ponmari]

Thank you so much , It worked:)

[rpushap]

thanks, help a lot