node.js - 尝试运行开发服务器时出错 | 反应，SSR

Question

尝试运行服务器时出现此错误：

E:...\node_modules\ts-loader\dist\watch-run.js:29 for (const [filePath, date] of times) { ^

TypeError: times is not iterable at E:...\node_modules\ts-loader\dist\watch-run.js:29:44 at Hook.eval [as callAsync] (eval at create (E:...\node_modules \tapable\lib\HookCodeFactory .js:33:10), :7:1) 在 Hook.CALL_ASYNC_DELEGATE [as _callAsync] (E:...\node_modules\tapable\lib\Hook.js:18:14) 在运行(E:...\node_modules\webpack\lib\Watching.js:138:33) 在 E:...\node_modules\webpack\lib\Watching.js:120:6 在 Compiler.readRecords (E:.. .\node_modules\webpack\lib\Compiler.js:908:11) 在运行 (E:...\node_modules\webpack\lib\Watching.js:116:26) 在 E:...\node_modules\webpack\ lib\Watching.js:112:6 at E:...\node_modules\webpack\lib\HookWebpackError.js:69:3 at E:...Hook.eval [as callAsync] (eval at create (\node_modules\ tapable\lib\HookCodeFactory .js:33:10), :6:1)

-- 包.json --

 {
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^17.0.7",
    "@types/react-dom": "^17.0.5",
    "ts-loader": "^9.2.2",
    "typescript": "^4.2.4",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-node-externals": "^3.0.0"
  },
  "dependencies": {
    "express": "^4.17.1",
    "nodemon": "^2.0.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

-- 开发者.js --

const webpack = require('webpack');
const webpackConfig = require('../webpack.config');
const nodemon = require('nodemon');
const path = require('path');

const compiler = webpack(webpackConfig);

compiler.run((err) => {
  if(err) {
    console.log('Compilation failed: ', err)
  }

  compiler.watch({}, (err) => {
    if(err) {
      console.log('Compilation failed: ', err);
    }
    console.log('Compilation was successfully');
  });

  nodemon({
    script: path.resolve(__dirname, '../dist/server/server.js'),
    watch: [
      path.resolve(__dirname, '../dist/server'),
      path.resolve(__dirname, '../dist/client')
    ]
  })

});

-- webpack.server.config.js --

const path = require('path');

const nodeExternals = require('webpack-node-externals');

const NODE_ENV = process.env.NODE_ENV;

module.exports = {
  
  target: 'node',
  mode: NODE_ENV ? NODE_ENV : 'production',
  entry: path.resolve(__dirname, '../src/server/server.js'),
  output: {
    path: path.resolve(__dirname, '../dist/server'),
    filename: 'server.js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  externals: [nodeExternals()],
  module: {
    rules: [{
      test: /\.[jt]sx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  optimization: {
    minimize: false
  }
};

-- webpack.client.config.js --

const path = require('path');

const NODE_ENV = process.env.NODE_ENV;
    
module.exports = {

  mode: NODE_ENV ? NODE_ENV : 'production',

  entry: path.resolve(__dirname, '../src/client/index.tsx'),

  output: {
    path:  path.resolve(__dirname, '../dist/client'),
    filename: 'client.js'
  },

  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },

  module: {
    rules: [{
      test: /\.[jt]sx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/
    }]
  }

}; // module.exports

-- webpack.config.js --

const clientConfig = require('./configs/webpack.client.config');
const serverConfig = require('./configs/webpack.server.config');

module.exports = [
  clientConfig,
  serverConfig
];

-- server.js --

import express from 'express';
import ReactDOM from 'react-dom/server';
import { Header } from "../shared/Header";

const app = express();

app.get('/', (req, res) => {
  res.send(
    ReactDOM.renderToString(Header())
  );
});

app.listen(4000, () => {
  console.log('Server started on port http://localhost:4000');
});

-- 文件夹结构 --

标签： node.jsreactjsnpmwebpackserver-side-rendering

Answer 1

这个麻烦来自ts-loader。您可以在此处查看拉取请求。

你应该使用 babel，而不是使用 ts-loader。您需要在 webpack 配置中更改处理程序 .ts 和 .js。

{
            test: /\.[tj]sx?$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', '@babel/preset-react']
                }
            }
        }

同时添加 .babelrc ：

{"presets": ["@babel/react", "@babel/typescript", ["@babel/env", { "modules": false }]]}