Razzle: node_modulesの変換されていないモジュールでの使用？

それを解決することができました。 将来の参考のために：

webpack-node-externalsがSSR中に適用および使用されることが判明しました。つまり、 node_modulesのモジュールは、バンドルおよびトランスパイルに含まれていません。 私は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),
      }),
    ] : [];

...そのコードの大部分がこのリポジトリのcreateConfig.jsから直接コピーされます。

@zthありがとうございます!!

@zthそもそも、クライアント側でどのように機能させるのですか？ 設定を共有できますか？

わかりました、わかりました。 babel-loaderのインクルードを拡張する必要があります。 また、 babelOptionsは、変換されていないパッケージ内の.babelrcで指定されていない限り、明示的に設定する必要があります。アプリパッケージに/babelrcを含めるだけでは不十分です。

完全な設定例は次のとおりです。

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

Typescript ts-loaderについても、 @ MrLohと同じトリックを実行できました。 許可されたパッケージを確認してください。そこにパッケージ名を挿入できます。 また、現在のバージョンのRazzleにはカスタムconfig.externalsがなくても十分であると思われるという考えも考慮に入れましたが、元の@MrLohソリューションにも興味があるかもしれません（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

これは私と一緒に働いた。 私の質問は、ライブラリがクライアントとサーバーのバンドルで複製されているということです。 この一般的なこれをrazzle.config.jsを使用して新しいファイルにチャンクする方法はありますか？