Seems there would be one more drawback. How to handle fs?

[raymondsze]

Using universal-webpack, seems the whole server will be bundled.
In my case, there is a file using require-directory which may lookup a directory to require all the files.
Since the server is bundled, the lookup path will be different and of course the system cannot find the right directory to require the files as they are also bundled.
What is the recommend way to handle this?

[catamphetamine]

I don't understand what you are talking about.
Provide an example.

[raymondsze]

The followings are server-side codes.

translations/index.js

import requireDir from 'require-directory';
export default requireDir(module); // This would be error if using bundled server.js, since it make use of fs to runtime load files.

getLocaleMessages.js

// get all translation message from build folder
import translations from './translations';

/**
 * Get all translated messages of a locale.
 * @param {string} locale - Locale.
 * @returns {{ locale: string, messages: Object }} - Object of locale and messages.
 */
function getLocaleMessages(locale) {
  const messages = translations[locale];
  return { locale, messages };
}

export default getLocaleMessages;

[catamphetamine]

So, what you're saying is that translations/index.js does bundle all the required modules on the client, but does not on the server?
If that's the case, then open the compiled server-side bundle, find the line where compiled translations/index.js goes, and post the compiled source of translations/index.js.

[raymondsze]

No, it is not the case. Maybe i provide a more simple example.
fs.readFile(path.resolve(__dirname, .....));
After bundled, the __dirname is changed, the path would be incorrect, so cannot read the correct file.
I am thinking of setting something like this in start up
global.SERVER_SRC_PATH = '.....';
then change the above to
fs.readFile(SERVER_SRC_PATH, .....));

[catamphetamine]

So, you're saying that Webpack substitutes __dirname for client-side builds but doesn't do so for server-side builds?

[raymondsze]

My client side would not run those codes. After webpack bundled, I found the server side __dirname always equal to '/', but it could be printed correctly in startup file which is not bundled by webpack.

[catamphetamine]

My client side would not run those codes.

Then you can move React rendering to a separate service and that would solve your issue
https://github.com/halt-hammerzeit/universal-webpack#separate-react-rendering-service-from-the-main-code

After webpack bundled, I found the server side __dirname always equal to '/'

Then that's what Webpack does for __dirname variable

[raymondsze]

o.... My bad. Found solution by setting this option to webpack.
node: {
__dirname: true
}
webpack/webpack#1599

[catamphetamine]

(this workaround is now part of the library since several people requested it)
#30