Solved

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

Devejo
Shopify Partner
12 0 3

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. 

 

Devejo_0-1704232324759.png

 

Accepted Solution (1)

SomeUsernameHe
Shopify Partner
455 49 82

This is an 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") || "")




 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

View solution in original post

Replies 8 (8)

SomeUsernameHe
Shopify Partner
455 49 82

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? 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Devejo
Shopify Partner
12 0 3

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
Shopify Partner
455 49 82

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.

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

SomeUsernameHe
Shopify Partner
455 49 82

This is an 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") || "")




 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Devejo
Shopify Partner
12 0 3

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
Shopify Partner
2 0 1

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

 

 

SomeUsernameHe
Shopify Partner
455 49 82

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

Happy Coding guys! 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Ponmari
Shopify Partner
15 1 1

Thank you so much , It worked:)