reactjs - 错误:最终加载程序(./node_modules/awesome-typescript-loader/dist/entry.js)没有返回缓冲区或字符串
问题描述
dockerhub build dockerfile 时出现此错误
错误:最终加载程序(./node_modules/awesome-typescript-loader/dist/entry.js)没有返回缓冲区或字符串
我在网上搜索了各种解决方案,但没有找到任何可行的方法。
“webpack”:“^5.38.1”“真棒打字稿加载器”:“^5.2.1”
这是我的码头文件
# 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()
],
};
解决方案
awesome-typescript-loader 不再维护,并且与 Webpack 5(或最新的 TypeScript 版本)不兼容。您需要删除awesome-typescript-loader
、安装ts-loader
并将相关块更改webpack.config.dev.js
为:
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
推荐阅读
- reactjs - 阻止用户添加名称
- alloy - 是否可以在合金中声明别名字段?
- vue.js - Nuxt - 无法访问方法内的数据
- python - Python Pandas - 将每个键和值映射到唯一列
- mxgraph - mxcell 中缺少属性
- python - 如何对值进行排序并按降序将其放入数组中?
- firebase - 如何模拟 Firebase 扩展?
- php - PHP - 有什么方法可以区分 unset 和 null 吗?
- javascript - suiteCRM 错误 40 中的 JOIN 子查询,("name":"Access Denied","number":40,"description":"You do not have access")
- docker - Nginx 无法访问 SSL 证书