Running server for first time using tutorial throws error

[csillagkrisztian]

"react": "18.2.0",
"boardgame.io": "^0.50.2",

I have set up the package.json and server.js according to the React tutorial. The only thing I changed was I imported my own game, which works perfectly fine on Local.

Upon running npm run serve I get the following error:

/Users/KCsillag/boardgbloom/apps/board-game-bloom/src/app/gameEngine/game-engine.js:60
    <div>
    ^

SyntaxError: Invalid or unexpected token
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)

Where the error lies, is the board

const Board = ({ G, ctx }) => {
  return (
    <div> // this is the div the error points to
      {initialState.game.components.map((componentInfo) => {
        return getComponent(
          initialState.layout[componentInfo._id],
          componentInfo,
          componentInfo.type
        );
      })}
    </div>
  );
};

If I comment out the div inside the board component, the error will jump to another html element somewhere in the code and the errror stays the same.

Tried this multiple times, same error...

[csillagkrisztian]

It seems that once I completely separate code that isn't pure javascript, meaning I don't import anything that has a png or a single div, the error goes away. Maybe this is specified in the documentation, but I haven't seen it. Or maybe it's provided in the esm documentation, but I haven't bothered to read that. Could this be mentioned in the Multiplayer Remote Master tutorial? Just a red bubble -> esm doesn't allow anything but pure javascript, so make sure the game object is in a separate file with imports that don't contain any images??? I dunno it's a work in progress 🐰 I was just using a js file with all my data for to mimic a database and so both board and game data was there, so I guess it's on me!

[on3iro]

I would probably definitely split up your frontend and backend code (the frontend could still consume parts of the general game logic modules). Nodejs does not know how to handle imports of images or what to do with JSX etc. - most react setups use plugins for vite/webpack/etc. under the hood, to handle these as modules in the frontend.
As far as I can tell your question is not really related to boardgame.io, therefore I would probably not add such specifics to the docs.

[chasen]

This is likely because the tutorial hasnt been fully updated for React18, downgrade to react 17 and it all works fine