How does build/.../server.js find the client?

[Leandro Soares]

Hi,

First of all, good job with this repo. It's a really great example.

I think this should be on stackoverflow but I will post it here anyway. I followed this project as an example for my own project, but there's something that I'm not being able to fix.

My project is really similar to yours, the biggest difference is that my client and my server are in different packages.

Right now whenever I use your start.js it builds both server and client however it fails saying the following:

C:\Users\Leandro Soares\source\repos\poc-modular\poc-frame-client\src\entry.js
(function (exports, require, module, __filename, __dirname) { import React from "react";
                                                                     ^^^^^
SyntaxError: Unexpected identifier

Noticing the first line I can see that server.js is calling poc-frame-client entry.js which is supposed, but I was expecting the transpiled version to call something else than the source package.

I think this has to do with the resolvers.js you have, more specifically resolve.modules.

So my question is, since src/server/render.js imports App from the Shared and the final bundle build/server/server.js doesn't contain the code for App, how does it find it?

Edit 1
I guess I have this problem because my package that contains App is symlinked.

[Manuel Bieh]

Hey, difficult to tell without seeing your code and directory structure. The error message looks a lot like webpack is not using babel-loader to transpile your files. As you already mentioned, that might have to do with the resolve.modules config. How do you symlink your packages? As node modules using yarn link or npm link?

[Leandro Soares]

Sorry for the idle time, so it seems that I had 2 situations going on.

1. My resolve.modules was wrong, after implementing similar to yours it started working.
2. It seems that I need to run node --preserve-symlinks scripts/start.js

This last one was critical because I have the following structure:

• Root
  • Base
  • Build
  • Client
  • Server

So, Server compiles the client aswell and makes use of the build config.
When you link (either yarn or npm) server and client, server will use <AbsolutePathTo_Root>/Client instead of node_modules/Client.

This is a problem because babel-loader won't grab anything outside Server (the project calling webpack/babel).

So by running it with --preserve-symlinks when the package is linked, server will consume Client as node_modules/Client.
Joining this with a new exclude option on babel-loader (/(node_modules[\\/](?!@client))/) it will transpile the linked package as it should.

Sorry for the hassle.

PS: Client, Server are figurative

[Manuel Bieh]

I guess this is solved, right? Feel free to re-open if not! 🐿