Razzle: Masalah dengan node eksternal

Di canary Anda dapat menggunakan modifikasiBabelPreset dan menambahkan https://babeljs.io/docs/en/babel-plugin-proposal-private-methods ke plugin Babel

Atau lebih sederhana, tambahkan itu ke plugin di .babelrc

@fivethreeo , terima kasih atas sarannya. Saya mencoba menambahkannya ke .babelrc tetapi hasilnya sama.

Saya menyadari sekarang saya harus (1) telah mengajukan ini di bawah Diskusi, dan (2) menjelaskan struktur repo saya sedikit lebih banyak. Jadi di sini kita pergi:

Saya mencoba menambahkan razzle ke repo buat-reaksi-aplikasi yang ada menggunakan redux. Struktur repo saya terlihat seperti ini:

|-- node_modules
|-- app
     |-- node_modules
     |-- src
     |-- index.js (client)
|-- server
     |-- node_modules
          |-- simple-oauth2
     |-- src
     |-- index.mjs (http server)
     |-- expressServer.mjs (express server)
|-- config
     |-- config.mjs (server config file)

Saya menambahkan razzle (dan dependensinya) langsung di bawah aplikasi saya dan kemudian mengonfigurasi jalur menggunakan razzle.config.js.

// razzle.config.js

const path = require('path')

module.exports = {
  options: {
    verbose: true,
  },

  modifyPaths({
    webpackObject,
    options: {
      razzleOptions,
    },
    paths,
  }) {
    paths.appSrc = path.join(paths.appPath, 'app/src')
    paths.appServerJs = path.join(paths.appPath, 'server/src/expressServer')
    paths.appServerIndexJs = path.join(paths.appPath, 'server/src/index')
    paths.appClientIndexJs = path.join(paths.appPath, 'app/src/index')

    return paths
  },
}

Ketika saya menjalankan 'npm start', saya mendapatkan kesalahan saya memulai utas ini dengan atau yang di bawah ini:

my-app/build/server.js:3606
throw new Error("Module parse failed: Unexpected token (399:4)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n|   const store = getStore({ server: true })\n|   const Application = (\n>     <Provider store={store}>\n|       <StaticRouter context={context} location={req.url}>\n|         <div>");
      ^

Module parse failed: Unexpected token (399:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   const store = getStore({ server: true })
|   const Application = (
>     <Provider store={store}>
|       <StaticRouter context={context} location={req.url}>
|         <div>

Di sini tersandung pada sintaks JSX di dalam file server/src/expressServer.mjs. Saya pasti melewatkan sesuatu yang sangat jelas bagi seseorang yang lebih berpengalaman. Saya akan menerima saran apa pun :)

Tampaknya menjadi masalah jalur. Jika saya membuat aplikasi baru dengan create-razzle-app dan memindahkan file server.js ke direktori server/src baru dan mengubah lokasinya melalui appServerIndexJs di razzle.config.js, saya mendapatkan kesalahan serupa.

Saya kira pasti ada cara untuk membuat ini berhasil.

Saya membuat sedikit kemajuan dengan menambahkan file jsconfig.json dengan yang berikut:

{
  "compilerOptions": {
    "baseUrl": "node_modules",
    "paths": {
      "AppSrc": ["../app/src"],
      "ServerSrc": ["../server/src"],
      "Config": ["../config"]
    }
  }
}

Sekarang saya kembali ke kesalahan asli di bagian atas utas ini.

Tampaknya masalahnya adalah simple-oauth2 berada di bawah my-app/server/node_modules. Dengan aplikasi create-razzle-baru, jika saya meletakkan simple-oauth2 di bawah my-app/node_modules, itu berfungsi. Jika saya memindahkannya di bawah server/node_modules, saya mendapatkan kesalahan. Pasti ada hubungannya dengan cara kerja babel atau webpack.

Anda dapat mencoba mengatur NODE_PATH=./server/node_modules

Terima kasih sekali lagi atas sarannya. Saya menjalankan NODE_PATH=./server/node_modules npm start dan mendapatkan kesalahan yang sama.

Saya mengerti karena saya mencoba melakukan SSR, klien dan server sekarang terhubung bersama sehingga mereka harus benar-benar berbagi satu direktori package.json dan node_modules, untuk menghindari redundansi dan ketidakcocokan versi. Pada akhirnya saya mungkin akan melakukan itu.

Tapi saya ingin tahu mengapa itu tidak berfungsi dengan struktur direktori saat ini dan bagaimana membuatnya berfungsi. Sepertinya ini ada hubungannya dengan bagaimana webpack memutuskan untuk mengurai/memproses modul.

Atau NODE_PATH=../server/node_modules , saya sedang mengerjakan contoh monorepo, jadi akan menguji ini

Hasil yang sama, tidak pergi. Saya pikir itu ada hubungannya dengan jalur resolve.modules juga, jadi saya bahkan mencoba menambahkan opsi paths.extraModules baru untuk menambahkan jalur ke sana, tapi itu juga tidak membantu.

Menelusuri masalah ke kode ini di razzle/config/createConfigAsync.js:

      // Same as above: if the package, when required from the root,
      // would be different from what the real resolution would use, we
      // cannot externalize it.
      if (baseRes !== res) {
        return callback();
      }

res dan baseRes tidak cocok:

nodeExternalsFunc simple-oauth2
... context my-app-canary/server/src
... res my-app-canary/server/node_modules/simple-oauth2/index.js
... baseRes my-app-canary/node_modules/simple-oauth2/index.js

jadi itu tidak menganggap file sebagai eksternal.

Mungkin kita entah bagaimana harus memeriksa semua direktori modul yang kita tambahkan .. tapi bagaimana ..

Dan bagaimana cara kerjanya setelah penyebaran ketika itu mungkin berbeda

Atau selesaikan modul itu relatif terhadap appdir dalam alias webpack?

Saya perlu mendidik diri saya sendiri tentang eksternal webpack. Saya tersandung tentang artikel stackoverflow ini yang berbicara tentang perpustakaan yang disebut webpack-node-externals. Tidak yakin apakah itu akan diterapkan di sini.

Saya belum mencoba menerapkan apa pun dengan razzle, jadi saya tidak yakin tentang bagian itu.

Atau selesaikan modul itu relatif terhadap appdir dalam alias webpack?
Apakah tampaknya layak untuk mendefinisikan alias webpack untuk setiap perpustakaan?

Pertanyaan yang bagus pada saat ini mungkin apakah itu struktur yang ingin Anda dukung.

Razzle menggunakan itu sebelumnya, tapi itu agak terlalu tidak bisa diandalkan. Di kenari ini ditambahkan. Next.js juga menyelesaikan eksternal seperti ini.

Bagaimana dengan opsi jalur untuk menambahkan eksternal webpack? Saya benar-benar tidak cukup tahu tentang razzle untuk membuat panggilan yang tepat di sini.

https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L568

Saya pikir Anda dapat menambahkan lebih banyak eksternal sebelum atau sesudah fungsi ini untuk mengganti modul tertentu.

https://webpack.js.org/configuration/externals/#combining -sintaks

Masalah yang kompleks, saya sudah memeras otak saya untuk yang satu ini ;)

Oh baiklah! Dan saya melihat dua masalah terpisah di sini:
1) Eksternal webpack memungkinkan untuk melewatkan mencoba membundel perpustakaan.
2) Tetapi bagaimana jika kita benar-benar ingin mentranspile dan membundel perpustakaan? akankah webpack 5 membantu mendukung sintaks?
Saya pikir plugin babel di atas dapat membantu dengan webpack 4 tetapi sepertinya tidak berhasil juga.

https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/createConfigAsync.js#L495 - atau atur ulang ini

webpack 5 atau webpack 4 seharusnya tidak masalah

Saya berpikir untuk menambahkan notExternals yang merupakan daftar regex.

Saya menyebutkan webpack 5 sebelumnya karena meskipun babel tidak mengubah kode ini, saya pikir webpack 5 akan memiliki dukungan untuk sintaks ini sehingga tidak akan menimbulkan kesalahan dalam kode yang dihasilkan.

Saya masih agak kabur tentang bagaimana semua ini bekerja. Perilaku saat ini tampaknya tidak mengubah kode di bawah my-app/node_modules, setidaknya untuk kompilasi server, tetapi bagaimana jika saya ingin/membutuhkan kode untuk ditranspilasikan. Apakah ada cara untuk mencapai itu?

Saya dapat membuat contoh create-razzle-app saya berfungsi dengan baik:

{ 
  "compilerOptions": {
    "baseUrl": "node_modules",
    "paths": {
      "Client": ["../src"],
      "Server": ["../server/src"],
      "ServerNodeModules": ["../server/node_modules"]
    }
  }
}

atau:

{ 
  "compilerOptions": {
    "baseUrl": "node_modules",
    "paths": {
      "Client": ["../src"],
      "Server": ["../server/src"],
      "SimpleOAuth2": ["../server/node_modules/simple-oauth2"]
    }
  }
}

Masalahnya adalah node js dan browser tidak mendukung sintaks ini. Jadi babel harus mengubah kode ini apa pun yang terjadi. Saya akan mencoba memperbaiki ini di canary besok. Saya akan menambahkan opsi razzle baru. notNodeExternals Anda dapat mengatur ke [/server/simple-oauth2/] saya juga harus menulis beberapa dokumen tentang ini dan tanpa server dan mungkin menambahkan serverLessNodeExternals, dan clientExternals.

Seseorang menginginkan keluaran perpustakaan juga yang dapat digunakan untuk membuat eksternal dikonsumsi di dalam/di luar webpack. Tapi itu akan menjadi 4.1 paling awal.

Saya biasa menjalankan node sebagai berikut untuk server:
node --trace-warnings --experimental-modules --es-module-specifier-resolution=node

Ini mendukung bidang kelas tetapi saya mengerti ini eksperimental. Yang membawa saya ke permintaan atau saran lain. Akan sangat bagus jika dimungkinkan untuk menentukan opsi baris perintah untuk node.js. Atau apakah itu sudah mungkin dengan mengganti variabel NODE env?

Itu juga berhasil :) Tapi itu harus lebih baik untuk dilakukan

Saya dapat menambahkan beberapa opsi razzle untuk memodifikasi ini https://github.com/jaredpalmer/razzle/blob/canary/packages/razzle/config/createConfigAsync.js#L615

Tetapi ketika memulai produksi, tambahkan itu di skrip package.json.

Pertanyaan sampingan: apakah benar 'server.js' di-hardcode pada baris ini?

https://github.com/jaredpalmer/razzle/blob/0c2532c037d80bebf17c1e00123103620d5ce983/packages/razzle/config/createConfigAsync.js#L632

Nama sebenarnya tidak digunakan dalam plugin itu. Tapi entryName di-hardcode.

Hmm mencoba menjalankan create-razzle-app yang akhirnya bisa saya kompilasi memberi saya kesalahan ini:

Invariant failed: You should not use <Switch> outside a <Router>
    at invariant (.../my-app-canary/node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13:11)
    at Object.children (.../my-app-canary/node_modules/react-router/modules/Switch.js:17:11)
    at ReactDOMServerRenderer.render (.../my-app-canary/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:3635:1)
    at ReactDOMServerRenderer.read (.../my-app-canary/build/webpack:/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:1)
    at renderToString (.../my-app-canary/build/webpack:/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:1)
    at .../my-app-canary/build/webpack:/server/src/server.js:42:1
    at Layer.handle [as handle_request] (.../my-app-canary/build/webpack:/server/node_modules/express/lib/router/layer.js:95:1)
    at next (.../my-app-canary/build/webpack:/server/node_modules/express/lib/router/route.js:137:1)
    at Route.dispatch (.../my-app-canary/build/webpack:/server/node_modules/express/lib/router/route.js:112:1)
    at Layer.handle [as handle_request] (.../my-app-canary/build/webpack:/server/node_modules/express/lib/router/layer.js:95:1)

jadi saya kira saya mengklaim kemenangan terlalu cepat.

Contoh bawaan?

Bisa jadi modul react-router-dom yang saling bertentangan. Coba gunakan resolusi di package.json

Contoh default dengan server.js dan index.js dipindahkan ke server/src, dan package.json (dan node_modules terkait) di bawah server/. Jika saya menghapus direktori server/node_modules, itu berfungsi lagi. Mungkin saya berusaha terlalu keras untuk membuat hidup saya lebih sulit.

Akan mencoba saran Anda.

Oke, saya menemukan solusi. Webpack perlu mengetahui modul mana yang diprioritaskan, jika tidak maka akan mengemas semuanya dan menjadi bingung (tampaknya). Saya menambahkan ini ke razzle.config.js:

// razzle.config.js

const path = require('path')

module.exports = {
  options: {
    verbose: true,
  },

  modifyWebpackConfig({
    env: {
      target,
      dev,
    },
    webpackConfig,
    webpackObject,
    options,
    paths,
  }) {
    if (target === 'node') {
      // Tell webpack which modules have priority in case of duplicates
      webpackConfig.resolve.modules = [
        path.resolve(__dirname, 'node_modules'),
        path.resolve(__dirname, 'server/node_modules'),
      ];
    }

    return webpackConfig
  },

  modifyPaths({
    webpackObject,
    options,
    paths,
  }) {
    // Update location of server files
    paths.appServerIndexJs = path.join(paths.appPath, 'server/src/index')
    paths.appServerJs = path.join(paths.appPath, 'server/src/server')

    return paths
  },
}

Sekarang coba gunakan itu dan perbaiki masalah dengan eksternal (untuk simple-oauth2).

Saya pikir opsi notExternals Anda akan berhasil (sampai webpack mendukung semua sintaks ini secara asli). Sementara itu, saya dapat menambahkan ini ke razzle.config.js di bawah modifikasiWebpackConfig :

const resolveRequest = require('razzle-dev-utils/resolveRequest');

module.exports = {
  ...
  modifyWebpackConfig({
    ...
  }) {
    if (target === 'node') {
      webpackConfig.externals.unshift((context, request, callback) => {
        let res
        try {
          res = resolveRequest(request, `${context}/`)
        } catch (err) {
          return callback()
        }
        if (res.match(/simple-oauth2/) || (res.match(/node_modules/) && !res.match(/\/server\//))) {
          const externalRequest = path.posix.join(
            paths.appPath,
            path
            .relative(paths.appPath, res)
            // Windows path normalization
            .replace(/\\/g, '/')
          )
          return callback(undefined, `commonjs ${externalRequest}`)
        }
        return callback()
      })
    }
    ...
  }
}

Sebagai alternatif, saya dapat menambahkan jalur simple-oauth2 sebagai alias di jsconfig.json:

{ 
  "compilerOptions": {
    "baseUrl": "node_modules",
    "paths": {
      "ServerSrc": ["../server/src"],
      "OAuth2": ["../server/node_modules/simple-oauth2"]
    }
  }
}

tetapi kemudian dependensi modulnya masih diproses oleh webpack dan membuat bundel yang jauh lebih besar.

Tunggu, bukankah razzleOptions.notExternalModules opsi yang sudah ada? tapi mungkin tidak cukup baik karena ini bukan array regexps. Tapi sebenarnya masalah saya adalah sebaliknya. Saya perlu simple-oauth2 untuk diperlakukan sebagai eksternal. Dan kemudian semua node_modules kecuali sisanya di bawah server/node_modules.

Saya menyadari bahwa fungsi eksternal webpack tidak berfungsi seperti middleware, jadi kode saya di atas akan kehilangan sebagian dari apa yang ada di createConfigAsync.js.

Sesuatu seperti ini akan berhasil (tapi canggung):

      const fnResMatch = razzleOptions.externalResMatch
        && razzleOptions.externalResMatch(res);

      ...
      if ((baseRes !== res) && !fnResMatch) {
        return callback();
      }
      ...
      if (res.match(/node_modules[/\\].*\.js$/) && fnResMatch) {

sehingga saya bisa melakukan ini:

    // do not externalize the server node modules except for simple-oauth2
    razzleOptions.externalResMatch = res => !res.match(/\/server\//) || res.match(/simple-oauth2/)

PS: razzleOptions tampaknya menjadi tempat yang aneh untuk meletakkan ini karena Anda tidak memiliki akses ke env.{ target, dev }.

Saya telah melihat kode isLocal dan saya tidak yakin itu melakukan apa yang seharusnya dilakukan. Misalnya, ini membutuhkan:

node_modules/react-dom/server.node.js
  module.exports = require('./cjs/react-dom-server.node.development.js');

referensi node_modules/cjs/react-dom-server.node.development.js. Apakah itu benar-benar file "lokal"?

Tampaknya ada cukup banyak file ini:

> not externalize local .../my-app-canary/node_modules/razzle-dev-utils/prettyNodeErrors.js
> not externalize local .../my-app-canary/node_modules/webpack/hot/poll.js?300
> not externalize local ./log
> not externalize local ./log-apply-result
> not externalize local ./log
> not externalize local ./lib/express
> not externalize local ./server.node
> not externalize local ./cjs/react.development.js
> not externalize local ./cjs/react-router-dom.js
> not externalize local ./application
> not externalize local ./router/route
> not externalize local ./router
> not externalize local ./request
> not externalize local ./response
> not externalize local ./middleware/query
> not externalize local ./cjs/react-dom-server.node.development.js
> not externalize local ./router
> not externalize local ./middleware/init
> not externalize local ./middleware/query
> not externalize local ./view
> not externalize local ./utils
> not externalize local ./layer
> not externalize local ./utils
> not externalize local ../node_modules/css-loader/dist/runtime/cssWithMappingToString.js
> not externalize local ../node_modules/css-loader/dist/runtime/api.js
> not externalize local ../node_modules/css-loader/dist/runtime/cssWithMappingToString.js
> not externalize local ../node_modules/css-loader/dist/runtime/api.js
> not externalize local ./route
> not externalize local ./layer

Ini bekerja dengan baik dalam kedua kasus. Tampaknya aneh bahwa keputusan untuk memasukkan sesuatu ke dalam bundel tergantung pada bagaimana kode ditulis. Saya kira saya tidak jelas apa yang kami coba masukkan ke dalam eksternal. Jika itu semua pustaka node_modules, maka itu tidak cukup berfungsi, karena jumlah yang adil diidentifikasi sebagai 'lokal' dan dikecualikan.

Memutuskan untuk tidak mengekspos ini sebagai opsi razzle, tetapi ditambahkan sebagai webpackOptions

https://github.com/jaredpalmer/razzle/blob/256fc592ab11b68839f0817c863c960ab571a6b4/packages/razzle/config/createConfigAsync.js#L281

https://github.com/jaredpalmer/razzle/blob/canary/packages/razzle/config/createConfigAsync.js#L591

https://github.com/jaredpalmer/razzle/blob/canary/packages/razzle/config/createConfigAsync.js#L330

https://github.com/jaredpalmer/razzle/releases/tag/v4.0.0-canary.10

Terima kasih atas rilisnya! Saya menghargai flag debug baru.

Ada pendapat tentang isLocal? Apakah tujuan untuk membuat bundel sekecil mungkin untuk server? Saat membaca dokumentasi webpack-node-externals, sepertinya itulah tujuannya. Inilah yang saya dapatkan dengan/keluar dari isLocal:

116K build-no-isLocal
860K membangun

Apakah lokal hanya untuk menemukan hal-hal yang baru saja ada di mesin saat ini yang harus dibundel

Tapi mungkin hal-hal yang telah diselesaikan sebelumnya dibundel

Apakah mungkin untuk meneruskan konteks sebagai argumen ke webpackOptions.notNodeExternalResMatch()?
'permintaan' tidak cukup dalam kasus saya karena saya perlu memanggil resolveRequest untuk mendapatkan jalur lengkap:

    webpackOptions.notNodeExternalResMatch = (request, context) => {
      try {
        const res = resolveRequest(request, `${context}/`);
      } catch (err) {
        return false;
      }
      if (res.match(/\/server\/node_modules\//)) {
        return true;
      }
      return false;
    };

    webpackOptions.nodeExternals = [{ 'simple-oauth2': `commonjs ${path.join(paths.appPath, 'server/node_modules/simple-oauth2')}` }];

Untuk isLocal, saya bertanya-tanya apakah seharusnya tidak ada pemeriksaan bahwa file yang dihasilkan tidak ada di dalam direktori node_modules.

https://github.com/jaredpalmer/razzle/releases/tag/v4.0.0-canary.11

Cara melakukannya adalah dengan memperbaiki kebutuhan/penyelesaian di mana hal itu terjadi atau memperbaiki kasus khusus di webpackOptions.nodeExternals

  // should not be absolute should be relative to appPath
    webpackOptions.nodeExternals = [{ 'simple-oauth2': `commonjs ${path.join(paths.appPath, 'server/node_modules/simple-oauth2')}` }];

Apakah maksud Anda relatif terhadap appBuild?

Ini bekerja:

    webpackOptions.nodeExternals = [{ 'simple-oauth2': `commonjs ../server/node_modules/simple-oauth2')}` }];

Um, sekarang aku bertanya-tanya pada diriku sendiri. Sesuatu tampak mencurigakan tentang eksternal. Mereka tampaknya mutlak. Itu tidak boleh terjadi.

Ya, saya memulai kembali dengan create-razzle-app@canary yang baru untuk memeriksa apakah itu yang saya lakukan tetapi saya juga melihatnya.

Ya, saya mengerti mengapa.

https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L703

Saya melewatkan sesuatu

Jika Anda mau, Anda dapat memperbaikinya dan mengirim tarikan. Gunakan pesan komit "fix(razzle): message" jika Anda melakukannya. Mau tidur sekarang..

Saya sedang melihat kode next.js yang terkait dengan baseRes dan melihat komentar berikut:

      // Bundled Node.js code is relocated without its node_modules tree.
      // This means we need to make sure its request resolves to the same
      // package that'll be available at runtime. If it's not identical,
      // we need to bundle the code (even if it _should_ be external).

Saya ingin tahu apakah Anda benar-benar menginginkan perilaku serupa di sini. Apakah ada alasan untuk berharap bahwa direktori node_modules tidak akan ada selama penerapan? Saya pikir jika itu maksudnya, maka komentar serupa harus ditambahkan ke kode razzle. Tanpa itu, kode tidak masuk akal.

Bisa jadi modul diangkat dari beberapa paket lain dalam pengembangan (jadi berfungsi di dev dan rusak di prod, salah konfigurasi) atau merupakan modul yang hanya ada dalam pengembangan dengan sengaja. Tetapi kami mungkin ingin memperingatkan ketika ini terjadi sehingga tidak terjadi secara kebetulan.

https://github.com/jaredpalmer/razzle/releases/tag/v4.0.0-canary.12

Meringkas pengaturan saya jika itu membantu orang lain.

Saya memiliki jsconfig.json sebagai berikut:

{ 
  "compilerOptions": {
    "baseUrl": "node_modules",
    "paths": {
      "AppSrc": ["../app/src"],
      "ServerSrc": ["../server/src"],
      "Config": ["../config"]
    }
  }
}

dan razzle.config.js sebagai berikut:

// razzle.config.js

const path = require('path')

module.exports = {
  options: {
    verbose: true,
    debug: {
      // nodeExternals: true,
    },
  },

  modifyWebpackOptions({
    env: {
      target,
      dev,
      serverless,
    },
    webpackObject,
    options: {
      pluginOptions,
      razzleOptions,
      webpackOptions,
    },
    paths,
  }) {
    // webpack does not understand class fields (yet), so we need to keep this library external
    webpackOptions.nodeExternals = [
      { 'simple-oauth2': `commonjs ../server/node_modules/simple-oauth2` },
    ]

    return webpackOptions
  },

  modifyWebpackConfig({
    env: {
      target,
      dev,
      serverless,
    },
    webpackConfig,
    webpackObject,
    options: {
      razzleOptions,
      webpackOptions,
    },
    paths,
  }) {
    // tell webpack where to search for node_modules
    webpackConfig.resolve.modules = [
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, 'app/node_modules'),
      path.resolve(__dirname, 'server/node_modules'),
      'node_modules',
    ]

    return webpackConfig
  },

  modifyPaths({
    webpackObject,
    options: {
      razzleOptions,
    },
    paths,
  }) {
    // configure paths for our directory structure
    paths.appServerJs = path.join(paths.appPath, 'server/src/expressServer')
    paths.appServerIndexJs = path.join(paths.appPath, 'server/src/index')
    paths.appClientIndexJs = path.join(paths.appPath, 'app/src/index')

    return paths
  },
}

Saya akhirnya tidak membutuhkan webpackOptions.notNodeExternalResMatch tetapi mungkin berguna untuk pengaturan lain. Terima kasih atas semua bantuannya @fivethreeo , sangat dihargai. Sekarang untuk mencari tahu pengaturan proxy saya dan apa yang harus dilakukan dengan 'window.' variabel tidak tersedia di simpul.

Besar! Senang aku dapat membantu. Penutupan sebagai diselesaikan :)