2

I am trying to use SplitChunks on a Webpack 4 application, but I am seeing "window is not defined". I am trying to opt my SSR bundle out of being chunked or affected by chunking in any way, but it isn't working:

const { environment } = require('@rails/webpacker');

const notServerRendering = (name) => name !== 'server-bundle';

environment.splitChunks((config) =>
  Object.assign({}, config, {
    optimization: {
      splitChunks: {
        chunks (chunk) {
          console.log(chunk.name);
          console.log(notServerRendering(chunk.name));
          return notServerRendering(chunk.name);
        },
        minSize: 0
      }
    }
  })
);

module.exports = environment;

The problem is, the first line of my server bundle is:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["server-bundle"],{

This is causing my SSR execution to blow up.

Based on https://webpack.js.org/configuration/output/#outputjsonpfunction which I just found, I think I need to somehow change the output target to node from web for my server bundle. I'm not sure how to do that yet.

Brandon
  • 1,735
  • 2
  • 22
  • 37
  • Does the suggestion from this guide work? https://survivejs.com/webpack/output/server-side-rendering/#configuring-webpack. I think the key points are to specify the output libraryTarget as ‘umd’ and global as ‘this’. You should be able to merge that config into the webpacker default. – rossta Jan 02 '20 at 00:02
  • I'm not sure if I am closer or further to having it work. That resulted in `Encountered error: "ReferenceError: ReactOnRails is not defined"`, which means ExecJS isn't seeing the react_on_rails library now. – Brandon Jan 02 '20 at 01:59
  • Ah, you're using react-on-rails, that's helpful. My guess is, based on their sample project, that you'll need a separate Webpack config for SSR. https://github.com/shakacode/react-webpack-rails-tutorial – rossta Jan 02 '20 at 12:24
  • I'm not sure where you are that in the sample project? – Brandon Jan 03 '20 at 04:34
  • Oops, I meant to say I wasn't sure where you were *seeing* that. I honestly have no idea how to achieve what you recommended, so I'd love to see it in action. – Brandon Jan 04 '20 at 04:47
  • I'd start by looking here, where the example project has several Webpack configs that appear to either be shared or serve different targets: https://github.com/shakacode/react-webpack-rails-tutorial/tree/master/client – rossta Jan 06 '20 at 02:32
  • I will certainly do that. I'm very curious about how it uses multiple configs. Thanks! – Brandon Jan 06 '20 at 04:45

0 Answers0