reactjs - Fejl: Endelig loader (./node_modules/awesome-typescript-loader/dist/entry.js) returnerede ikke en Buffer eller String

denne fejl opstår, når dockerhub bygger dockerfile

Fejl: Den endelige loader (./node_modules/awesome-typescript-loader/dist/entry.js) returnerede ikke en Buffer eller String

Jeg har søgt på nettet efter forskellige løsninger, men har ikke fundet nogen, der virker.

"webpack": "^5.38.1" "awesome-typescript-loader": "^5.2.1"

dette er min docker-fil

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()
    ],
};

Svar #1

awesome-typescript-loader vedligeholdes ikke længere og er ikke kompatibel med Webpack 5 (eller med nyere versioner af TypeScript). Du skal fjerne awesome-typescript-loader, installere ts-loader og ændre den relevante blok i webpack.config.dev.js til:

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