I was working on a new project this week and starting with JSS 20. This wasn’t a NextJS project, unfortunately, so it was going to be a webpack kind of day. Make that two days. Ok, it was more..but whatever..read the post.

Anywho, I popped open my server.bundle.js file, which had been deployed to my dist folder. I looked for this module text in there, and lo and behold…here it was:

;// CONCATENATED MODULE: ./node_modules/@apollo/client/react/ssr/renderToStringWithData.js

function renderToStringWithData(component) {
    return getMarkupFromTree({
        tree: component,
        renderFunction: require('react-dom/server').renderToString
    });
}
//# sourceMappingURL=renderToStringWithData.js.map

The require() statement definitely shouldn’t be there. This is an all-inclusive bundle which will have no node_modules folder to carry modules with it (Especially in Integrated mode). Why was this happening? Was the react-dom module just not being transpiled? Digging more into the bundle…it was!

// EXTERNAL MODULE: ./node_modules/react-dom/server.js
var server = __webpack_require__(1152);

Ok….the root problem seems to be with the @apollo client, then. There’s something occurring where it’s not being processed.

After bringing this up with my FED Experts (I like that title, change approved), and a massive amount of googling, we stumbled upon someone else with this issue: https://github.com/webpack/webpack/issues/16089

The root cause for this is, as it states, that the apollo client is typed as a module, which makes webpack somewhat…ignore it. You can see this by looking at the node_modules\@apollo\client\package.json file at the end.

So….. now what? As was suggested, you need to modify your webpack configuration file to force it to treat apollo like a JS file, not a module. How do you do that? Open up your server\server.webpack.config.js and add the following to your rules:

{
  include: path.resolve(__dirname, '..', "node_modules", "@apollo", "client", 'react', 'ssr'),
  type: "javascript/auto"
},

Once you’ve made the change, re-run your JSS Deploy Files command (or even npm run build:server) and you should see a much nicer output:

function renderToStringWithData(component) {
    return getMarkupFromTree({
        tree: component,
        renderFunction: (__webpack_require__(1152).renderToString)
    });
}

With this change in place, our error was gone! Woot!

Facebooktwitterredditlinkedinmail