Reactjs “网页包错误”；未找到模块：can'；t在tsx文件中解析“；

我正在尝试将react项目部署到dev服务器

它在我本地的Mac book中运行良好。 但是在dev服务器中将react项目部署到PM2时出错

下面是我的一些错误消息

2021-01-20 14:39 +09:00: [../node_modules/webpack-hot-middleware/client.js] (webpack)-hot-middleware/client.js 7.68 KiB {vendor} [built]
2021-01-20 14:39 +09:00: [./index.tsx] ./src/index.tsx 4.83 KiB {www} [built]
2021-01-20 14:39 +09:00:     + 2297 hidden modules
2021-01-20 14:39 +09:00: 
2021-01-20 14:39 +09:00: ERROR in ./src/pages/mobile/SignUp/index.tsx
2021-01-20 14:39 +09:00: Module not found: Error: Can't resolve './Signup' in '/home/nkok/workspace/ut-user-web/src/pages/mobile/SignUp'
2021-01-20 14:39 +09:00:  @ ./src/pages/mobile/SignUp/index.tsx 24:37-56
2021-01-20 14:39 +09:00:  @ ./src/pages/routes.tsx
2021-01-20 14:39 +09:00:  @ ./src/components/App/App.tsx
2021-01-20 14:39 +09:00:  @ ./src/components/App/index.tsx
2021-01-20 14:39 +09:00:  @ ./src/index.tsx
2021-01-20 14:39 +09:00:  @ multi react-hot-loader/patch webpack-hot-middleware/client location-origin ./index.tsx
2021-01-20 14:39 +09:00: 
2021-01-20 14:39 +09:00: ERROR in ./src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/components/ConfirmVerfiyBank/ConfirmVerifyBank.tsx
2021-01-20 14:39 +09:00: Module not found: Error: Can't resolve './confirmVerifyBank.scss' in '/home/nkok/workspace/ut-user-web/src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/components/ConfirmVerfiyBank'
2021-01-20 14:39 +09:00:  @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/components/ConfirmVerfiyBank/ConfirmVerifyBank.tsx 14:0-35
2021-01-20 14:39 +09:00:  @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/components/ConfirmVerfiyBank/index.tsx
2021-01-20 14:39 +09:00:  @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/UtransferBankVerify.tsx
2021-01-20 14:39 +09:00:  @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/index.tsx
2021-01-20 14:39 +09:00:  @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/Verification.tsx
2021-01-20 14:39 +09:00:  @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/index.tsx
2021-01-20 14:39 +09:00:  @ ./src/pages/mobile/UMyPage/AccountManagement/AccountManagement.tsx
2021-01-20 14:39 +09:00:  @ ./src/pages/mobile/UMyPage/AccountManagement/index.tsx
2021-01-20 14:39 +09:00:  @ ./src/pages/routes.tsx
2021-01-20 14:39 +09:00:  @ ./src/components/App/App.tsx
2021-01-20 14:39 +09:00:  @ ./src/components/App/index.tsx
2021-01-20 14:39 +09:00:  @ ./src/index.tsx
2021-01-20 14:39 +09:00:  @ multi react-hot-loader/patch webpack-hot-middleware/client location-origin ./index.tsx
2021-01-20 14:39 +09:00: 
2021-01-20 14:39 +09:00: ERROR in ./src/pages/mobile/Policy/index.tsx
2021-01-20 14:39 +09:00: Module not found: Error: Can't resolve './policy' in '/home/nkok/workspace/ut-user-web/src/pages/mobile/Policy'
2021-01-20 14:39 +09:00:  @ ./src/pages/mobile/Policy/index.tsx 28:37-56
2021-01-20 14:39 +09:00:  @ ./src/pages/routes.tsx
2021-01-20 14:39 +09:00:  @ ./src/components/App/App.tsx
2021-01-20 14:39 +09:00:  @ ./src/components/App/index.tsx
2021-01-20 14:39 +09:00:  @ ./src/index.tsx
2021-01-20 14:39 +09:00:  @ multi react-hot-loader/patch webpack-hot-middleware/client location-origin ./index.tsx
2021-01-20 14:39 +09:00: Child html-webpack-plugin for "index.html":
2021-01-20 14:39 +09:00:          Asset     Size  Chunks  Chunk Names
2021-01-20 14:39 +09:00:     index.html  540 KiB       0  
2021-01-20 14:39 +09:00:     Entrypoint undefined = index.html
2021-01-20 14:39 +09:00:     [../node_modules/html-webpack-plugin/lib/loader.js!./assets/index.html] ./node_modules/html-webpack-plugin/lib/loader.js!./src/assets/index.html 4.28 KiB {0} [built]

似乎我必须修改网页来解决上面的错误

但我不熟悉网页包。 请给我一些善意的建议来解决这个错误

这是我的tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": true,
    "noImplicitAny": false,
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "src"
  ]
}

webpack.config.base.js

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const DotEnv = require('dotenv-webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const isProduction = process.env.NODE_ENV !== 'development';
const env = new DotEnv({
  path: '.env',
  systemvars: true,
});

const config = {
  context: `${__dirname}/src`,
  entry: {
    www: ['location-origin', './index.tsx'],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        type: 'javascript/auto',
        test: /\.json$/,
        use: 'json-loader',
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: !isProduction,
            },
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: !isProduction,
              modules: {
                mode: 'local',
                localIdentName: '[local]',
                context: path.resolve(__dirname, 'src'),
                hashPrefix: 'ut',
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: !isProduction,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              modules: true,
              sourceMap: !isProduction,
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: !isProduction,
            },
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: !isProduction,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: !isProduction,
            },
          },
        ],
      },
      {
        test: /\.(base64|txt)(\?\S*)?$/,
        use: 'raw-loader',
      },
      {
        test: /\.(ico|png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'url-loader',
        options: {
          name: '[name]_[hash:base64:5].[ext]',
          limit: 5000,
        },
      },
      {
        test: /\.(woff|woff2|otf|ttf|eot)(\?\S*)?$/,
        loader: 'url-loader',
        options: {
          name: '[name]_[hash:base64:5].[ext]',
          limit: 5000,
        },
      },
      {
        test: /\.worker\.js$/,
        use: {
          loader: 'worker-loader',
        },
      },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        zlib: {
          test: /node_modules\/react-zlib-js/,
          chunks: 'initial',
          name: 'zlib',
          priority: 11,
          enforce: true,
        },
        vendor: {
          test: /node_modules/,
          chunks: 'initial',
          name: 'vendor',
          priority: 10,
          enforce: true,
        },
        // Merge all the CSS into one file
        styles: {
          name: 'common',
          test: /src\/components\/.+\.s?css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    // eslint-disable-next-line no-useless-escape
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ko/),
    new webpack.DefinePlugin(env.definitions),
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['dist'],
    }),
    new CopyPlugin([{ from: `${__dirname}/src/assets`, to: `${__dirname}/dist/assets` }]),
    new HtmlWebpackPlugin(
      Object.assign(
        {},
        {
          inject: true,
          template: `${__dirname}/src/assets/index.html`,
        },
        isProduction
          ? {
              minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
              },
            }
          : undefined
      )
    ),
  ],
  resolve: {
    extensions: [
      '.ts',
      '.tsx',
      '.js',
      '.jsx',
      '.json',
      '.sass',
      '.scss',
      '.css',
      '.wasm',
      '.mjs',
      '.js',
      '.json',
      '.jsx',
      '.svg',
      '.png',
      '.jpg',
      '.jpeg',
    ],
    alias: {
      '~': path.resolve(__dirname, 'src/'),
      assets: path.resolve(__dirname, 'src/assets/'),
      'proxy-polyfill': path.resolve(__dirname, 'node_modules/proxy-polyfill/proxy.min.js'),
    },
  },
  stats: {
    children: false,
  },
};

module.exports = config;

最后是webpack.config.dev.js

const chalk=require（'chalk'）；
//console.log（`\n\n这是语法错误。我刚刚修复了文件名，它工作了
尝试删除并重新安装typescript:npm安装--保存typescript@types/node@types/react@types/react-dom@types/jestun幸运的是，它仍然打印相同的错误消息…更新：删除提到的scss文件后它工作得很好（ex-confirmVerifyBank）还有文件夹。有人知道为什么以及如何修复它吗？它工作得很好，这意味着你看到了不同的错误或根本没有错误？你对.tsx？文件使用Babel loader不是很奇怪吗？我希望看到“很棒的typescript loader”/“typescript-loader”