Razzle: Utilisation avec module non transpilé dans node_modules ?

Réussi à le résoudre. Pour référence future:

Il s'avère que webpack-node-externals est appliqué et utilisé pendant le SSR, ce qui signifie qu'aucun module de node_modules n'est inclus pour le regroupement et donc le transpilage. Je l'ai résolu en faisant quelque chose dans ce sens dans mon 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),
      }),
    ] : [];

... où la majorité de ce code est copié directement à partir de createConfig.js dans ce dépôt.

@zth merci !!

@zth comment l'avez-vous fait fonctionner côté client en premier lieu ? pourrais-tu partager ta config ?

Ok, j'ai compris. Vous devez étendre les inclusions du babel-loader . Vous devez également définir explicitement les babelOptions moins qu'ils ne soient spécifiés dans un .babelrc à l'intérieur du package non transpilé , avoir un /babelrc dans votre package d'applications ne suffit pas.

Voici un exemple de configuration complet :

'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;
  },
};

J'ai réussi à faire le même tour que @MrLoh également pour Typescript ts-loader. Vérifiez les packages autorisés, vous pouvez y insérer le nom de votre package. J'ai également pris en compte une idée selon laquelle il semble qu'il suffit que la version actuelle de Razzle soit sans config.externals personnalisé, mais vous pourriez également être intéressé par la solution @MrLoh originale (voir à propos de la suppression 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

Cela a fonctionné avec moi. Ma question est la suivante: les bibliothèques sont dupliquées dans le bundle client et serveur. Un moyen de regrouper ce point commun dans un nouveau fichier à l'aide de razzle.config.js ?