[React ssr via functions]Unexpected token error

Support
, ,
1

Hi everyone,

I am following the steps provided here ${title} to deploy my server-side renderer build with express on Netlify.
I am getting the following error:

ERROR in ../src/App.scss 1:0

Module parse failed: Unexpected character ‘@’ (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack

@import ‘scss/style’;
@ …/src/App.js 11:0-20
@ ./main.js

Here is my current implementation locally (not deployed atm as not working):

import serverless from "serverless-http";
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from '../src/App';

const functionName = 'server';
const app = express();

const Html = ({ body, title }) => {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <title>${title}</title>
      </head>
      <body style="margin:0">
        <div id="root">${body}</div>
      </body>
    </html>
  `
};
const routerBasePath = `/.netlify/functions/${functionName}/`;

app.get(routerBasePath, (req, res) => {
  const reactAppHtml = renderToString(<App />);
  const html = Html({
    title: 'React SSR!',
    body: reactAppHtml
  })
  res.send(html);
})

exports.handler = serverless(app);
2

I think you’re seeing a case sensitivity issue here, @ARose. On a Mac or Windows machine, “…/src/App” is the same as “…/src/app” and “…/SRC/ApP” but not in our build environment, as described in more detail here:

This line in particular is probably the problem:

import App from '../src/App'; since that is looking for a capitalized file and I bet it is not capitalized in git. We recommend standardizing on lowercase!

3

Hi,

Thanks very much for your feedback. I am facing this issue locally and not when I am deploying to Netlify. After adding the netlify-lambda package, I can build locally anymore. I have multiple webpack errors. My app is implemented using react-create-app and I don’t have any webpack error when running it outside of netlify. All my files are capitalized in github. Could it be possible that there is something going on with netlify-lamba package? Is it still the right step to use it while deploying SSR on Netlify?
One on the error was: WARNING in ./node_modules/express/lib/view.js #4
And then I get another that say that main.js that contains the ssr code is not found by Netlify.

I am running this command locally: netlify-lambda serve functions and for the build netlify-lambda build functions which will do yarn build then yarn ssr to run the express server.

I am following the steps describe in this doc: netlify-functions-express/react-express-ssr.js at master · netlify-labs/netlify-functions-express · GitHub.

Thanks.

4

Macbooks are also case-sensitive so if you are using macOS, fool’s advice would still be relevant. If not, do you happen to have an example repository that I can use to replicate your issue?