express - Tidak boleh menggunakan NextJs + ExpressJs dengan typescript dan webpack

Saya ingin menyediakan ExpressJs dengan TypeScript untuk menggunakan IOC dengan InversifyJS dan Nextjs dengan es6. Saya juga ingin menggunakan webpack untuk mengikat. Oleh kerana saya mesti mengimport Next dalam server.ts untuk melakukan rendering sisi pelayan, saya menyediakannya TypeScript untuk nextjs juga, tetapi saya ingin fail .js dan .jsx dalam folder klien dapat mempunyai sintaks es6.

Tetapi sesuatu telah berlaku semasa menyusun kod nextjs. (apabila saya tidak menggunakan next dalam server.ts, ia berfungsi dengan betul)

webpack.config.js

const path = require('path');

module.exports = {
  entry: './server/server.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'build')
  }
};

server/tsconfig.json

{
    "files": [
        "server.ts"
    ],
    "compilerOptions": {
        "target": "ES2018",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "./build",
        "rootDir": "../",
        "strict": true,
        "esModuleInterop": true
    }
}

client/next.config.js

const webpack = require('webpack');
const fs = require('fs');
const path = require('path');
const glob = require('glob');
const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');
const withTypescript = require('@zeit/next-typescript')
const optimizedImages = require('next-optimized-images');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = withPlugins([
    withCSS,
    optimizedImages,
    withTypescript,
  ], {
    webpack: (config, options) => {
      const {dev, isServer} = options;

      config.plugins.push(
        new UglifyJsPlugin({
          test: /\.js($|\?)/i
        }),
      );

      config.module.rules.push(
        {
          test: /\.(css|scss)/,
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        {
          test: /\.s(a|c)ss$/,
          exclude: /node_modules/,
          use: ['babel-loader', 'raw-loader', 'postcss-loader',
            { loader: 'sass-loader',
              options: {
                includePaths: ['styles', 'node_modules']
                  .map((d) => path.join(__dirname, d))
                  .map((g) => glob.sync(g))
                  .reduce((a, c) => a.concat(c), [])
              }
            }
          ],
        },
        {
          test: /\.js$/,
          enforce: 'pre',
          exclude: /node_modules/,
          loader: 'eslint-loader',
          options: {
            emitWarning: dev,
          },
        },
      )

      if (dev) {
        config.devtool = 'cheap-module-source-map';
      }

      return config;
    },
  });

client/.babelrc

{
    "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
    ]
}

package.json

"dependencies": {
        "express": "^4.17.1",
        "inversify": "^5.0.1",
        "inversify-binding-decorators": "^4.0.0",
        "inversify-express-utils": "^6.3.2",
        "inversify-logger-middleware": "^3.1.0",
        "mongodb": "^3.3.2",
        "next": "^9.0.5",
        "react": "^16.9.0",
        "react-dom": "^16.9.0"
    },
    "devDependencies": {
        "@zeit/next-typescript": "^1.1.1",
        "@babel/cli": "^7.6.0",
        "@babel/core": "^7.6.0",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/preset-typescript": "^7.6.0",
        "@types/express": "^4.17.1",
        "@types/next": "^8.0.6",
        "babel-loader": "^8.0.6",
        "ts-loader": "^6.1.0",
        "ts-node": "^8.3.0",
        "tslint": "^5.20.0",
        "typescript": "^3.6.3",
        "webpack": "^4.40.0",
        "webpack-cli": "^3.3.8",
        "webpack-dashboard": "^3.2.0",
        "webpack-dev-server": "^3.8.0"
    }

ralat

ERROR in ./node_modules/fork-ts-checker-webpack-plugin/lib/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/fork-ts-checker-webpack-plugin/lib'
 @ ./node_modules/fork-ts-checker-webpack-plugin/lib/index.js 4:21-45
 @ ./node_modules/next/dist/build/output/index.js
 @ ./node_modules/next/dist/server/next-dev-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server/server.ts

ERROR in ./node_modules/launch-editor/guess.js
Module not found: Error: Can't resolve 'child_process' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/launch-editor'
 @ ./node_modules/launch-editor/guess.js 3:21-45
 @ ./node_modules/launch-editor/index.js
 @ ./node_modules/next/dist/server/lib/error-overlay-middleware.js
 @ ./node_modules/next/dist/server/hot-reloader.js
 @ ./node_modules/next/dist/server/next-dev-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server/server.ts

ERROR in ./node_modules/launch-editor/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/launch-editor'
 @ ./node_modules/launch-editor/index.js 15:21-45
 @ ./node_modules/next/dist/server/lib/error-overlay-middleware.js
 @ ./node_modules/next/dist/server/hot-reloader.js
 @ ./node_modules/next/dist/server/next-dev-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server/server.ts

ERROR in ./node_modules/worker-farm/lib/fork.js
Module not found: Error: Can't resolve 'child_process' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/worker-farm/lib'
 @ ./node_modules/worker-farm/lib/fork.js 3:21-45
 @ ./node_modules/worker-farm/lib/farm.js
 @ ./node_modules/worker-farm/lib/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./node_modules/autodll-webpack-plugin/lib/plugin.js
 @ ./node_modules/autodll-webpack-plugin/lib/index.js
 @ ./node_modules/next/dist/build/webpack/plugins/dll-import.js
 @ ./node_modules/next/dist/build/webpack-config.js
 @ ./node_modules/next/dist/server/hot-reloader.js
 @ ./node_modules/next/dist/server/next-dev-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server/server.ts

ERROR in ./node_modules/autodll-webpack-plugin/lib/utils/fs.js
Module not found: Error: Can't resolve 'fs' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/autodll-webpack-plugin/lib/utils'
 @ ./node_modules/autodll-webpack-plugin/lib/utils/fs.js 11:10-23
 @ ./node_modules/autodll-webpack-plugin/lib/createHandleStats.js
 @ ./node_modules/autodll-webpack-plugin/lib/plugin.js
 @ ./node_modules/autodll-webpack-plugin/lib/index.js
 @ ./node_modules/next/dist/build/webpack/plugins/dll-import.js
 @ ./node_modules/next/dist/build/webpack-config.js
 @ ./node_modules/next/dist/server/hot-reloader.js
 @ ./node_modules/next/dist/server/next-dev-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server/server.ts

ERROR in ./node_modules/cacache/get.js
Module not found: Error: Can't resolve 'fs' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/cacache'
 @ ./node_modules/cacache/get.js 6:11-24
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./node_modules/autodll-webpack-plugin/lib/plugin.js
 @ ./node_modules/autodll-webpack-plugin/lib/index.js
 @ ./node_modules/next/dist/build/webpack/plugins/dll-import.js
 @ ./node_modules/next/dist/build/webpack-config.js
 @ ./node_modules/next/dist/server/hot-reloader.js
 @ ./node_modules/next/dist/server/next-dev-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server/server.ts

ERROR in ./node_modules/chokidar/index.js
Module not found: Error: Can't resolve 'fs' in '/home/xxxxxxxxxxxxxx/Desktop/xxxxxxxxxxxxx/node_modules/chokidar'
 @ ./node_modules/chokidar/index.js 3:9-22
 @ ./node_modules/next/node_modules/webpack/node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/next/node_modules/webpack/node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/next/node_modules/webpack/node_modules/watchpack/lib/watchpack.js
 @ ./node_modules/next/node_modules/webpack/lib/node/NodeWatchFileSystem.js
 @ ./node_modules/next/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
 @ ./node_modules/next/node_modules/webpack/lib/webpack.js
 @ ./node_modules/next/dist/server/hot-reloader.js
 @ ./node_modules/next/dist/server/next-dev-server.js
 @ ./node_modules/next/dist/server/next.js
 @ ./server/server.ts

Jawapan #1

Anda terlepas untuk menentukan bagaimana modul diselesaikan. Saya lihat perpustakaan anda memerlukan runtime Nodejs, mari tambahkan moduleResolution ke dalam tsconfig.json anda, dan tambahkan node_modules ke dalam senarai pengecualian, ia akan menjadi seperti berikut:

{
    "files": [
        "server.ts"
    ],
    "compilerOptions": {
        "target": "ES2018",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "./build",
        "rootDir": "../",
        "strict": true,
        "moduleResolution": "node", /* New added line */
        "esModuleInterop": true
    },
    "exclude": [
        "node_modules",
    ]
}