Importing functions into server.js file

[guepjo]

Hi team,
Sorry if this question is a bit basic, but I am pretty new to remix and frontend development as a whole. I am facing an with importing a function into the server.js file. I created a simple remix app and to show my problem.

• testApp/app/component/getValue/getValue.tsx

export const getValue = () => {
    return "value1";
}

• testApp/server.js

import getValue ..
...
const value = getValue();
console.log("value", value);
...

I am facing this error when I run the app ❌

import getValue from "./app/component/getValue";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1027:15)
    at Module._compile (node:internal/modules/cjs/loader:1063:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

Does anyone know a way to work around this?

[sergiodxa]

Your server.js file in Node is not a ESM module by default, it uses CJS instead, so you need to use require, also because it's not being compiled together with the rest of the app if you import code from your app it will fail because your app is using ESM and maybe TS or JSX.

You can use the remix.config.js server option to ask Remix to bundle your server.js so you can use ESM, TS and even JSX there.

[sergiodxa]

https://remix.run/docs/en/main/file-conventions/remix-config#server

[yannick-softwerft]

@sergiodxa If I do it like you said I get a Error: Top-level await is not available in the configured target environment ("node14")

server.js:82:12:
      82 │ let build = await import(BUILD_PATH)

suddenly I cannot await the import of the BUILD_PATH anymore.
Then I upgraded to node18 by simply replacing target: "node14", to target: "node18", in the compiler.js.

But since we have code like const BUILD_PATH = './build/index.js' in our server.js, it tries to import itself?

Now the error is:

Error: Cannot find module '/home/path/to/remix-application/build/build/index.js' imported from /home/path/to/remix-application/build/index.js
Did you mean to import ./?

It would be very nice if you might have a working example to share.

[joseph-lozano]

Thanks @sergiodxa!

Coming back a bit later, now that the vite config is the default, how would one accomplish this with the Vite config?

[GoldenretriverYT]

Wondering the same, is this possible with the Vite config?

[kiliman]

I have a set of packages that allows you to combine your Express server and Remix app in a single bundle. It's a Vite plugin, and you create your Express app in entry.server.tsx. You can then import anything from your Remix app.

https://github.com/kiliman/remix-express-vite-plugin

There's also a video where I explain how it works. You can skip the Middleware part.

https://www.youtube.com/watch?v=_dbMs9D5kdQ&t=1s&ab_channel=Remix

If you want to jump straight to the setup
https://youtu.be/_dbMs9D5kdQ?si=l841lIL2YTX8r4Qs&t=564

[spy16]

I have this same issue 😔.. Stuck on this for hours now. if i get the build step working, the dev command won't work anymore. if i remove the server config and make the dev part work, build won't work anymore..

[yannick-softwerft]

@guepjo @spy16 Have a look here. This issue helped me solving the problem.
#3032 (comment)