How to do SSR with an ESM server ? #7575

SanNic20 · 2023-05-20T12:34:17Z

SanNic20
May 20, 2023

As indicated in the title, how to do SSR with a server in ESM format ? Currently I am trying to set up the SSR following the official documentation. But when I run the server, this is what I get:

[nodemon] starting `babel-node --require dotenv/config src/index.mjs`
file:///app/src/index.mjs:101
      <ApolloProvider client={client}>
      ^

SyntaxError: Unexpected token '<'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:468:14)
    at async link (node:internal/modules/esm/module_job:67:21)
[nodemon] app crashed - waiting for file changes before starting...

Do you know what I have to do to make it work with an ESM server? Because I did a test with a server in CJS format and it works without problem.

Thank you in advance for your answers and advice. Best regards.

trevor-scheer · 2023-05-20T13:58:58Z

trevor-scheer
May 20, 2023
Collaborator

JSX isn't standard JavaScript which is why you're getting a syntax error. It looks like your Babel config needs to handle the JSX before the ESM loader. I might be able to help more if you shared your project or at least your Babel config.

3 replies

SanNic20 May 20, 2023
Author

@trevor-scheer Thank you very much for your fast reply and your time. Of course, I can share my code without any problem.

Here is my Babel config (.babelrc file)

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-syntax-import-assertions"
    ],
    ["@babel/plugin-transform-react-jsx"],
    [
      "transform-assets",
      {
        "extensions": ["css", "svg"]
      }
    ]
  ]
}

Here is the part of the file on my SSR server that is causing problems. (server.mjs)

...
  app.use((req, res) => {
    const client = new ApolloClient({
      ssrMode: true,
      // Remember that this is the interface the SSR server will use to connect to the
      // API server, so we need to ensure it isn't firewalled, etc
      networkInterface: createNetworkInterface({
        uri: 'http://localhost:3010',
        opts: {
          credentials: 'same-origin',
          headers: {
            cookie: req.header('Cookie'),
          },
        },
      }),
    });
    const context = {};
    // The client-side app will instead use <BrowserRouter>
    const app = (
      <ApolloProvider client={client}>
        <StaticRouter location={req.url} context={context}></StaticRouter>
      </ApolloProvider>
    );

    getDataFromTree(App).then((content) => {
      // Extract the entirety of the Apollo Client cache's current state
      const initialState = client.extract();

      // Add both the page content and the cache state to a top-level component
      const html = <Html content={content} state={initialState} />;

      // Render the component to static markup and return it
      res.status(200);
      res.send(`<!doctype html>\n${ReactDOM.renderToStaticMarkup(html)}`);
      res.end();
    });
  });
...

As mentioned, my code is based on the official documentation, but with the difference that I would like it to work on an ESM format (MJS file).

Thank you in advance for your help. Best regards.

SanNic20 Jul 16, 2023
Author

@trevor-scheer : Have you had a chance to take a look? Thanks in advance for your help.

trevor-scheer Jul 21, 2023
Collaborator

Sorry, I know a fair amount about ESM issues but not how it relates to babel. Have you tried setting your project to use "type": "module" and using .js(x) extensions instead? Don't you need the x in your extension when you have JSX in a file? (so maybe .mjsx?

I won't be able to help any more than guess without a full project in front of me. Can you just share a repo instead of snippets?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to do SSR with an ESM server ? #7575

{{title}}

Replies: 1 comment 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

How to do SSR with an ESM server ? #7575

SanNic20 May 20, 2023

Replies: 1 comment · 3 replies

trevor-scheer May 20, 2023 Collaborator

SanNic20 May 20, 2023 Author

SanNic20 Jul 16, 2023 Author

trevor-scheer Jul 21, 2023 Collaborator

SanNic20
May 20, 2023

Replies: 1 comment 3 replies

trevor-scheer
May 20, 2023
Collaborator

SanNic20 May 20, 2023
Author

SanNic20 Jul 16, 2023
Author

trevor-scheer Jul 21, 2023
Collaborator