reactjs - 错误 : Final loader (./node_modules/awesome-typescript-loader/dist/entry.js)没有返回缓冲区或字符串

Question

dockerhub构建dockerfile时出现此错误

错误:最终加载器 (./node_modules/awesome-typescript-loader/dist/entry.js) 没有返回缓冲区或字符串

我在网上搜索了各种解决方案，但没有找到任何有效的解决方案。

“webpack”:“^5.38.1”“awesome-typescript-loader”:“^5.2.1”

这是我的docker文件

# build environment
FROM node:12.22.1-alpine as build
WORKDIR /app
COPY package.json /app/package.json
RUN npm cache clean --force 
RUN npm install
COPY . /app
ENV PORT 80
ENV NODE_ENV=development
RUN npm run dev

# production environment
FROM nginx:stable-alpine
COPY nginx.test.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"] 

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "types": [
      "webpack-env"
    ],
    //"noImplicitThis": true,
    //"strictNullChecks": true
  },
  "awesomeTypescriptLoaderOptions": {
    "useTranspileModule": true,
  },
  "include": [
    "src",
    "src/.d.ts"
  ]
}

webpack.config.dev.js

const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const precss = require('precss');


module.exports = {
    mode: 'development',
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        chunkFilename: '[name].[contenthash].js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.js$|jsx/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    use: ['babel-loader']
                }
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.pdf$/i,
                use: 'file-loader',
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                use: 'url-loader?limit=10000&name=img/[name].[ext]'
            },
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/public/index.html',
            filename: 'index.html',
            inject: 'body',
        }),
        new CopyWebpackPlugin({
            //this is the new change
            patterns: [
              { from: path.join(__dirname, 'static') },
            ],
      
          }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [autoprefixer, precss],
            },
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
};

Answer 1

awesome-typescript-loader 不再维护并且与 Webpack 5(或最新的 TypeScript 版本)不兼容。您需要删除 awesome-typescript-loader，安装 ts-loader，并更改 webpack.config.dev.js 中的相关 block > 到:

            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },