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

Shopify Discussion
1

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_77 [email removed] then “npm run dev”. Any help? Thanks a lot in advance.

Devejo_0-1704232324759.png
Devejo_0-1704232324759.png1078×508 2.27 KB

2 Likes
2

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:
  /create-app@3.53.0

so it could be a bug with the new package?

3

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(
      

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

```markup
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") || "")
10 Likes
4

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.

5

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.

6

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”) || “”)

1 Like
7

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

1 Like
8

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

Happy Coding guys!

9

Thank you so much , It worked:)

1 Like
10

thanks, help a lot