doesn't work with react-ab-test

[preactjs]

doesn't work with react-ab-test

[rossPatton]

so, i was able to fix this. here is the solution in case anyone else comes across this problem.

in my case, it was because packages with a / in the name were not being properly aliased. so when react-ab-test was requiring react-dom/server for their server render, it was not being aliased properly

i needed to add the following to my webpack server config (i got this from some other thread, can't remember):

let nodeModules = {}
fs.readdirSync('node_modules').forEach(function (module) {
  if (module !== '.bin') {
    nodeModules[module] = true;
  }
})

const nodeModulesTransform = function(context, request, callback) {
  // search for a '/' indicating a nested module
  const slashIndex = request.indexOf("/");
  let rootModuleName;
  if (slashIndex == -1) {
    rootModuleName = request;
  } else {
    rootModuleName = request.substr(0, slashIndex);
  }

  // Match for root modules that are in our node_modules
  if (nodeModules.hasOwnProperty(rootModuleName)) {
    callback(null, 'commonjs ' + request);
  } else {
    callback();
  }
}

and then in your config object itself add this line:

externals: [nodeModulesTransform],

[developit]

@rossPatton That is usually caused by an alias not working - preact-render-to-string is being passed a React element but it only supports Preact ones. How are you aliasing, and how are you running server-side?

Usually the common problem is that people alias in preact-compat in their webpack config, but then their server-side setup actually imports things directly (ie, not using webpack). The solution is pretty simple, you just need to apply the same aliases from your webpack config to node's module loader itself via module-alias.

[rossPatton]

i am using webpack ProvidePlugin like this:

new webpack.ProvidePlugin({
    React: 'preact-compat',
    ReactDOM: 'preact-compat',
    ReactDOMServer: 'preact-render-to-string',
})

I use webpack for both my server and client builds (i bundle my server file) so I would assume that any aliases I set in webpack would be consistent on both the server and client side

Would this not be the case?