Home Nextjs app. Everything runs well in Dev environment. npm run build gives an error

Questions

Nextjs app. Everything runs well in Dev environment. npm run build gives an error

April 30, 2024

I am getting the following error when trying to build Nextjs app.

Generating static pages (0/20) [= ]TypeError: u is not a function at m (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\.next\server\app\(brewery)\test\Customers\page.js:1:9038) at em (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:131226) at C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:142926 at Array.toJSON (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:146504) at stringify (<anonymous>) at eR (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:134889) at eP (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:135332) at AsyncLocalStorage.run (node:async_hooks:346:14) at Timeout._onTimeout (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:146956) at listOnTimeout (node:internal/timers:573:17) TypeError: u is not a function at m (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\.next\server\app\(brewery)\test\Customers\page.js:1:9038) at em (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:131226) at C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:142926 at Array.toJSON (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:146504)

Here is the code Customer\page.jsx.

// pages/customers.js

import { QueryDataFromSupabase } from "@/lib/db";
import { useQuery } from "@tanstack/react-query";

function CustomerPage() {
  let qStr = 'SELECT * FROM "Customer" LIMIT 5;';
  const x = useQuery({ queryKey: ["customers"], queryFn: QueryDataFromSupabase(qStr, "sqlRows") });

  console.log("Fetching customers from Supabase:", customers);

  return (
    <div>
      <h1>Customer Info</h1>
      {customers.map((customer, index) => (
        <div key={index}>
          {/* Display customer info here */}
          <p>{customer.name}</p>
          {/* Add more customer details as needed */}
        </div>
      ))}
    </div>
  );
}

export default CustomerPage;

Please help with the error message.

I was expecting npm run build to complete without any error.

>Solution :

You’re passing the QueryDataFromSupabase function directly to the queryFn option of useQuery, it’s looking for a function to return a promise.
You need to modify the useQuery hook to handle the query function correctly.

See if this works for you

import { QueryDataFromSupabase } from "@/lib/db";
import { useQuery } from "@tanstack/react-query";

function CustomerPage() {
  let qStr = 'SELECT * FROM "Customer" LIMIT 5;';
  const { data: customers, isLoading, error } = useQuery({
    queryKey: ["customers"],
    queryFn: () => QueryDataFromSupabase(qStr, "sqlRows"),
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  console.log("Fetched customers from Supabase:", customers);

  return (
    <div>
      <h1>Customer Info</h1>
      {customers.map((customer, index) => (
        <div key={index}>
          {/* Display customer info here */}
          <p>{customer.name}</p>
          {/* Add more customer details as needed */}
        </div>
      ))}
    </div>
  );
}

export default CustomerPage;