时间戳

首页 > 解决方案 > 不能将 NextJs + ExpressJs 与 typescript 和 webpack 一起使用

typescript - 不能将 NextJs + ExpressJs 与 typescript 和 webpack 一起使用

问题描述

我想用 TypeScript 设置 ExpressJs 以将 IOC 与 InversifyJS 和 Nextjs 与 es6 一起使用。我也想用 webpack 来打包。因为我必须在 server.ts 中导入 Next 才能进行服务器端渲染，所以我也为 nextjs 设置了打字稿，但我希望客户端文件夹中的 .js 和 .jsx 文件可以具有 es6 语法。

但是在编译 nextjs 代码时出了点问题。（当我不在 server.ts 中使用 next 时，它可以正常工作）

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

服务器/tsconfig.json

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

客户端/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;
    },
  });

客户端/.babelrc

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

包.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"
    }

错误

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

标签： typescriptexpresswebpacknext.js

解决方案

您缺少确定如何解决模块的问题。我看到你的库需要 Nodejs 运行时，让我们添加moduleResolution到你tsconfig.json，并添加node_modules到排除列表，它将变成如下：

{
    "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",
    ]
}

推荐阅读