不能将 Next Js + Express Js 与 typescript 和 webpack 一起使用

【问题标题】：Can't use NextJs + ExpressJs with typescript and webpack不能将 Next Js + Express Js 与 typescript 和 webpack 一起使用
【发布时间】：2020-01-14 22:14:07
【问题描述】：

我想使用 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"
    ]
}

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

错误

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

【问题讨论】：

    标签： typescript express webpack next.js


    【解决方案1】：

    您缺少确定如何解析模块。我看到你的库需要 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",
    ]
}

    【讨论】：

    • 在我的情况下没有帮助，我认为这个问题是由于我尝试使用 webpack 来捆绑服务器代码，其中包括由内置 webpack 捆绑的 nextjs 代码。
    • 没有任何变化，我将那些未解析为 tsconfig.json 中的属性“lib”的库传递给了属性“lib”，但它也有错误
    猜你喜欢
    • 2022-01-09
    • 2019-11-07
    • 1970-01-01
    • 2017-11-12
    • 1970-01-01
    • 1970-01-01
    • 2020-11-11
    • 2021-03-01
    • 2017-08-11
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode