Next.js Discord

Discord Forum

A problem with React in Vercel Serverless Functions - SyntaxError: Cannot use import statement outsi

Unanswered
Acorn-plum gall posted this in #help-forum
Open in Discord
Acorn-plum gallOP
Hi :meow_coffee:

Yesterday I decided to create such a program that returns the text from my portfolio to the terminal when curl -L okinea.dev/cli is requested

It should look as shown in the photo

My program works simply:

1. Renders the CLI interface with React ink (React library for creating TUI) - https://github.com/vadimdemedes/ink
2. Converts React to string
3. Returns the rendered TUI to the user

When I run Vercel Serverless Function locally with the command bunx vercel dev everything works fine! :this_is_fine:
But when I deployed it to Vercel :vercel_light: and made a request to my function, I saw the following error in the logs:

/var/task/api/cli.js:1
(function (exports, require, module, __filename, __dirname) { import { jsx as _jsx } from "react/jsx-runtime";
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (node:vm:117:7)
    ....


At all, I have no idea what the error is...

Here is my project on GitHub: https://github.com/okineadev/curl-website
Project on Vercel: https://vercel.com/okineadev-projects/curl-website

package.json: https://github.com/okineadev/curl-website/blob/ed191d8e16b6629eee82ba4b9ac9fb46211f6aa6/package.json

tsconfig.json: https://github.com/okineadev/curl-website/blob/ed191d8e16b6629eee82ba4b9ac9fb46211f6aa6/tsconfig.json

api/cli.tsx: https://github.com/okineadev/curl-website/blob/ed191d8e16b6629eee82ba4b9ac9fb46211f6aa6/api/cli.tsx

Please help, I will be very grateful! 🙌

0 Replies