Razzle: Penggunaan dengan modul yang tidak ditranspilasikan di node_modules?

Berhasil menyelesaikannya. Untuk referensi di masa mendatang:

Ternyata webpack-node-externals diterapkan dan digunakan selama SSR, artinya tidak ada modul dari node_modules yang disertakan untuk bundling dan dengan demikian transpiling. Saya menyelesaikannya dengan melakukan sesuatu di sepanjang baris ini di razzle.config.js saya:

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),
      }),
    ] : [];

...di mana sebagian besar kode itu disalin langsung dari createConfig.js di repo ini.

@zth terima kasih!!

@zth bagaimana Anda membuatnya berfungsi di sisi klien? dapatkah Anda membagikan konfigurasi Anda?

Oke, saya menemukan jawabannya. Anda perlu memperluas penyertaan babel-loader . Anda juga harus menyetel babelOptions secara eksplisit kecuali ditentukan dalam .babelrc di dalam untranspiled package , memiliki /babelrc dalam paket aplikasi Anda tidak cukup.

Berikut contoh konfigurasi lengkapnya:

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

Saya berhasil melakukan trik yang sama seperti @MrLoh juga untuk TypeScript ts-loader. Periksa AllowPackages, Anda dapat memasukkan nama paket Anda di sana. Saya juga mempertimbangkan gagasan bahwa tampaknya cukup untuk versi Razzle saat ini tanpa config.externals khusus, tetapi Anda mungkin juga tertarik dengan solusi @MrLoh asli (lihat tentang penghapusan 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

Ini berhasil dengan saya. Pertanyaan saya adalah, Perpustakaan sedang diduplikasi dalam bundel klien dan server. Adakah cara untuk membagi ini menjadi file baru menggunakan razzle.config.js ?