I got error when ssr with Netlify functions

Support
1

I’m trying to implement SSR in my React js website in local.
I wrote a netlify function as i did previously.

When I start a local development server with netlify dev command.
I get this full error log:

▲ [WARNING] The CommonJS “exports” variable is treated as a global variable in an ECMAScript module and may not work as expected [commonjs-variable-in-esm]

netlify/functions/ssr.mjs:7:0:
  7 │ exports.handler = async (event, context) => {
    ╵ ~~~~~~~

This file is considered to be an ECMAScript module because the file name ends in “.mjs”.

X [ERROR] The JSX syntax extension is not currently enabled

netlify/functions/ssr.mjs:16:56:
  16 │     const componentHtml = ReactDOMServer.renderToString(<App/>);
     ╵                                                         ^

The esbuild loader for this file is currently set to “js” but it must be set to “jsx” to be able
to parse JSX syntax. You can use “loader: { ‘.js’: ‘jsx’ }” to do that.

◈ Loaded function proxy
◈ Loaded function generateSiteMap
X [ERROR] No loader is configured for “.webp” files: src/Resources/graybg.webp

src/Client-View/Component/DataLoader/DataLoader.jsx:16:17:

◈ Loaded function generateFile
16 │ import Gray from “…/…/…/Resources/graybg.webp”;
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] No loader is configured for “.jpeg” files: src/Resources/_vizyon3000main.jpeg

src/Admin-Panel/dashboard.jsx:31:17:
  31 │ import main from "../Resources/_vizyon3000main.jpeg"
     ╵                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] No loader is configured for “.jpeg” files: src/Resources/_vizyon3000logo.jpeg

src/Admin-Panel/dashboard.jsx:30:27:
  30 │ import vizyon3000logo from "../Resources/_vizyon3000logo.jpeg"
     ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] Top-level await is currently not supported with the “cjs” output format

src/Client-View/Main/Components/CardVariant/const.js:34:21:
  34 │     backgroundColor: await getColor(),
     ╵                      ~~~~~

X [ERROR] No loader is configured for “.png” files: src/Resources/search-128.png

src/Client-View/Component/PaginationComponents/CardPaginatedSearch.jsx:25:22:
  25 │ import searcIcon from "../../../Resources/search-128.png";
     ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

X [ERROR] No loader is configured for “.gif” files: src/Resources/resim_yok.gif

src/Admin-Panel/Editor/Components/ImageDrop/ImageDrop.jsx:6:20:
  6 │ import NoImage from "../../../../Resources/resim_yok.gif";
    ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

◈ Failed to load function ssr: Build failed with 7 errors:
netlify/functions/ssr.mjs:16:56: ERROR: The JSX syntax extension is not currently enabled
src/Admin-Panel/Editor/Components/ImageDrop/ImageDrop.jsx:6:20: ERROR: No loader is configured for “.gif” files: src/Resources/resim_yok.gif
src/Admin-Panel/dashboard.jsx:30:27: ERROR: No loader is configured for “.jpeg” files: src/Resources/_vizyon3000logo.jpeg
src/Admin-Panel/dashboard.jsx:31:17: ERROR: No loader is configured for “.jpeg” files: src/Resources/_vizyon3000main.jpeg
src/Client-View/Component/DataLoader/DataLoader.jsx:16:17: ERROR: No loader is configured for “.webp” files: src/Resources/graybg.webp
…

» Error: Netlify CLI has terminated unexpectedly
This is a problem with the Netlify CLI, not with your application.
If you recently updated the CLI, consider reverting to an older version by running:

npm install -g netlify-cli@VERSION

You can use any version from Releases · netlify/cli · GitHub.

Please report this problem at Sign in to GitHub · GitHub including the error details below.

Error: Build failed with 7 errors:
netlify/functions/ssr.mjs:16:56: ERROR: The JSX syntax extension is not currently enabled
src/Admin-Panel/Editor/Components/ImageDrop/ImageDrop.jsx:6:20: ERROR: No loader is configured for “.gif” files: src/Resources/resim_yok.gif
src/Admin-Panel/dashboard.jsx:30:27: ERROR: No loader is configured for “.jpeg” files: src/Resources/_vizyon3000logo.jpeg
src/Admin-Panel/dashboard.jsx:31:17: ERROR: No loader is configured for “.jpeg” files: src/Resources/_vizyon3000main.jpeg
src/Client-View/Component/DataLoader/DataLoader.jsx:16:17: ERROR: No loader is configured for “.webp” files: src/Resources/graybg.webp
…
at failureErrorWithLog (C:\Users\samil\AppData\Roaming\npm\node_modules\netlify-cli\node_modules@netlify\zip-it-and-ship-it\node_modules\esbuild\lib\main.js:1650:15)
at C:\Users\samil\AppData\Roaming\npm\node_modules\netlify-cli\node_modules@netlify\zip-it-and-ship-it\node_modules\esbuild\lib\main.js:1058:25
at runOnEndCallbacks (C:\Users\samil\AppData\Roaming\npm\node_modules\netlify-cli\node_modules@netlify\zip-it-and-ship-it\node_modules\esbuild\lib\main.js:1485:45)
at buildResponseToResult (C:\Users\samil\AppData\Roaming\npm\node_modules\netlify-cli\node_modules@netlify\zip-it-and-ship-it\node_modules\esbuild\lib\main.js:1056:7)
at C:\Users\samil\AppData\Roaming\npm\node_modules\netlify-cli\node_modules@netlify\zip-it-and-ship-it\node_modules\esbuild\lib\main.js:1085:16
at responseCallbacks. (C:\Users\samil\AppData\Roaming\npm\node_modules\netlify-cli\node_modules@netlify\zip-it-and-ship-it\node_modules\esbuild\lib\main.js:703:9)
at handleIncomingPacket (C:\Users\samil\AppData\Roaming\npm\node_modules\netlify-cli\node_modules@netlify\zip-it-and-ship-it\node_modules\esbuild\lib\main.js:763:9)
at Socket.readFromStdout (C:\Users\samil\AppData\Roaming\npm\node_modules\netlify-cli\node_modules@netlify\zip-it-and-ship-it\node_modules\esbuild\lib\main.js:679:7)
at Socket.emit (node:events:514:28)
at Socket.emit (node:domain:488:12)

System:
OS: Windows 10 10.0.22631
CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics
Binaries:
Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (123.0.2420.97)

I would appreciate if you can help. Thanks

2

I think SSR is one of the reasons why you have Next.js. I don’t see a good reason in trying to re-invent the wheel. But if you are absolutely determined to go down this route, note that it might not be easy to do so (if at all).

In the past, I was able to achieve SSR with Netlify Functions using something like: vite-plugin-ssr. I had tried more of such libraries. They all more or less worked. Sadly, I never create a repo or kept it as a reference for future, but I know it’s possible to do (I think I had tried this like a month or so ago).

3

I migrate my project to next-js but now I got problem like this:
I run project in my local server response time is under 1sec but deployed site on netlify server response took almost 5 sec why is that?
Screenshot 2024-05-02 205959

deployed_on_netlify
deployed_on_netlify459×528 20 KB

4

Did you try: [Support Guide] Why is my function taking long or timing out?

5

it’s not relevant mentioned there with my situation

6

i added log to end of getServerSideProps function and it logs Server Response time: 864 ms. But response time shown at console newtork and manual page load duration estimation are 4.78 sec.

7

Only this page takes 800 sec to respond:

  export default function Test() {
    return <div>This is only test page</div>;
  }
  export async function getServerSideProps(context) {
    return {
      props: {},
    };
  }

And that page takes around 1.8 - 2.2 sec to respond:
Log message below: Fetch operation takes around:400-600 ms.

export default function Test({custompage}) {
  return <div>{custompage.title}</div>;
}
export async function getServerSideProps(context) {
  const start = new Date();
  const dbSite = process.env.DB_HOST;
  const params = context.params;
  let custompage = await getPageBySlug(dbSite, "new-page");
  let end = new Date();
  console.log(`Fetch operation takes:${end-start} ms`);
  return {
    props: {
      custompage: custompage,
      DB_HOST: process.env.DB_HOST,
    },
  };
}


async function getPageBySlug(hostname, slug) {
  try {
    const custompageRef = query(
      collection(db, `${hostname}/db/customPages`),
      where("id", "==", slug)
    );
    const custompageSnapshot = await getDocs(custompageRef);
    const custompage = custompageSnapshot.docs.map((doc) => doc.data());
    return custompage[0];
} catch (error) {
  console.error(error)
}

I also captured this log which is weird because there is no action takes this long in there.
Screenshot 2024-05-09 202057

I’ll be glad for any further guidance

8

Could you share a URL where we can reproduce this?

9

https://news-module-nextjs.netlify.app/test

10

The timeout error log has been fixed in the latest versions. You’re still using 5.1.2, so that explains it.

As for the response times, it’s working as expected as well. This is the timing for the request:

image
image716×1131 46.8 KB

You can enable the server timing API by making a request with x-next-debug-logging: 1 header. The generate response timing is the time taken by Next.js to generate a response which is a black box for us as we can’t control or check what happens in there.

11

https://news-module-nextjs-pego.vercel.app/test I’ve deployed exact same project on Vercel and that took 280ms to respond. I think you’re missing something.