Error when trying to use a function from the *.server.js file

Shopify Apps

Topic summary

A developer is encountering a TypeError stating that an imported function is not a function when trying to call server-side code from their Shopify app’s client component.

The Issue:

  • Attempting to import and execute a function from a *.server.js file within app.admin.jsx
  • Error occurs at line 64: Uncaught (in promise) TypeError: Test is not a function
  • Even a simple “Hello World” test function produces the same error

Code Structure:

  • app.admin.jsx imports Test from ../models/superM.server.js
  • The function is called within an async handleSubmit event handler
  • The server file exports a Test function that should return “Hello World”

Likely Cause:
This appears to be an architecture issue—client-side components cannot directly import and execute server-side functions in Shopify Remix apps. Server functions need to be called through loaders, actions, or API routes rather than direct imports.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

I am trying to send the data from a form that I have in my app.jsx to a function within server.js, when I execute the function I get an error saying that it is not a function, I also did a test calling a function with “hello world” with the same result

app.admin.jsx

import { Test } from '../models/superMark.server';

async function handleSubmit(event) {
  event.preventDefault();

  const test = Test();
  console.log(test);
}

superMark.server.js

export function Test() {
  return "Hello world";
}

And I get app.admin.jsx:64 Uncaught (in promise) TypeError: (0 , import_superMark.Test) is not a function