Razzle: ¿Uso con módulo no transpilado en node_modules?

Consiguió solucionarlo. Para futura referencia:

Resulta que webpack-node-externals se aplica y usa durante SSR, lo que significa que no se incluyen módulos de node_modules para agrupar y, por lo tanto, transpilar. Lo resolví haciendo algo en este sentido en mi razzle.config.js :

config.externals = target === 'node' ? [
      nodeExternals({
        whitelist: [
          dev ? 'webpack/hot/poll?300' : null,
          /\.(eot|woff|woff2|ttf|otf)$/,
          /\.(svg|png|jpg|jpeg|gif|ico)$/,
          /\.(mp4|mp3|ogg|swf|webp)$/,
          /\.(css|scss|sass|sss|less)$/,
          /^my-untranspiled-package/
        ].filter(Boolean),
      }),
    ] : [];

...donde la mayoría de ese código se copia directamente desde createConfig.js en este repositorio.

@zth gracias!!

@zth , ¿cómo conseguiste que funcionara en el lado del cliente en primer lugar? ¿podrías compartir tu configuración?

Bien, lo descubrí. Debe extender las inclusiones de babel-loader . También debe configurar babelOptions explícitamente a menos que se especifiquen en un .babelrc dentro del paquete no transpilado , tener un /babelrc en su paquete de aplicaciones no es suficiente.

Aquí hay una configuración de ejemplo completa:

'use strict';
const nodeExternals = require('webpack-node-externals');
const fs = require('fs');

module.exports = {
  modifyBabelOptions() {
    return {
      presets: ['razzle/babel'],
      plugins: ['transform-flow-strip-types'],
    };
  },
  modify(config, { target, dev }, webpack) {
    // package un-transpiled packages
    const babelRuleIndex = config.module.rules.findIndex(
      (rule) => rule.use && rule.use[0].loader && rule.use[0].loader.includes('babel-loader')
    );
    config.module.rules[babelRuleIndex] = Object.assign(config.module.rules[babelRuleIndex], {
      include: [
        ...config.module.rules[babelRuleIndex].include,
        fs.realpathSync('./node_modules/untranspiled-package')
      ],
    });
    config.externals =
      target === 'node'
        ? [
            nodeExternals({
              whitelist: [
                dev ? 'webpack/hot/poll?300' : null,
                /\.(eot|woff|woff2|ttf|otf)$/,
                /\.(svg|png|jpg|jpeg|gif|ico)$/,
                /\.(mp4|mp3|ogg|swf|webp)$/,
                /\.(css|scss|sass|sss|less)$/,
                /^untranspiled-package/,
              ].filter(Boolean),
            }),
          ]
        : [];
    // return
    return config;
  },
};

Logré hacer el mismo truco que @MrLoh también para Typescript ts-loader. Verifique los paquetes permitidos, puede insertar el nombre de su paquete allí. También tomé en cuenta la idea de que parece que es suficiente para la versión actual de Razzle estar sin config.externals personalizados, pero también podría estar interesado en la solución original de @MrLoh (vea sobre la eliminación de config.externals: https:// github.com/jaredpalmer/razzle/issues/842#issuecomment-475722036)

  const allowedPackages = ['my-component']

  const allowedPackagePaths = allowedPackages.map(packageName =>
    fs.realpathSync('./node_modules/' + packageName)
  )

  const tsRuleIndex = config.module.rules.findIndex(
    rule =>
      rule.use && rule.use[0].loader && rule.use[0].loader.includes('ts-loader')
  )

  if (tsRuleIndex === -1) {
    throw Error(
      'This component assumes that you are using ts-loader. If you are not using it, then you might need to check and test code for how would it work with other loaders'
    )
  }

  config.module.rules[tsRuleIndex] = {
    ...config.module.rules[tsRuleIndex],

    include: [
      ...config.module.rules[tsRuleIndex].include,
      ...allowedPackagePaths,
    ],
  }

  delete config.externals

Esto funcionó conmigo. Mi pregunta es: las bibliotecas se están duplicando en el paquete de cliente y servidor. ¿Alguna forma de dividir esto común en un nuevo archivo usando razzle.config.js?