Reactjs ./components/Avatar.tsx错误：找不到模块'@巴别塔/preset-stage-0'；
经过几个小时的研究，我仍然没有解决我一直与Babel和Webpack有关的问题。）：我相信解决办法很简单 我的.法律改革委员会：Reactjs ./components/Avatar.tsx错误：找不到模块'@巴别塔/preset-stage-0'；,reactjs,typescript,webpack,babeljs,next.js,Reactjs,Typescript,Webpack,Babeljs,Next.js,经过几个小时的研究，我仍然没有解决我一直与Babel和Webpack有关的问题。）：我相信解决办法很简单 我的.法律改革委员会： { "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-stage-0"] } mypackage.json { "name": "sabrinasbase&q
{
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-stage-0"]
}
{
"name": "sabrinasbase",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"chokidar": "^3.5.1",
"css-modules-typescript-loader": "^4.0.1",
"next": "10.0.5",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-particles-js": "^3.4.1",
"react-tsparticles": "^1.18.11",
"sass": "^1.32.5",
"three": "^0.124.0"
},
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-stage-0": "^7.8.3",
"@babel/register": "^7.12.10",
"@types/node": "^14.14.22",
"@types/react": "^17.0.0",
"babel-loader": "^8.2.2",
"typescript": "^4.1.3",
"url-loader": "^4.1.1",
"webpack": "^5.16.0",
"webpack-cli": "^4.4.0",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"
},
"resolutions": {
"@babel/core": "^7.12.10"
}
}
{
"name": "Sample",
"version": "1.0.0",
"description": "React app",
"scripts": {
"clean": "rimraf dist",
"deploy": "node deploy",
"build:prod:deploy": "npm run clean && webpack --mode production --config webpack.config.prod.js && node deploy",
"build:prod": "npm run clean && webpack --mode production --config webpack.config.prod.js",
"build:dev": "webpack-dev-server --mode development --config webpack.config.dev.js --open --hot",
"start": "npm run build && npm run deploy",
"build": "npm run clean && webpack --mode production --config webpack.config.prod.js && npm run deploy"
},
"engines": {
"node": "14.x",
"npm": "6.x"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.2.2",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"@gfx/zopfli": "^1.0.15",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.0.4",
"brotli-webpack-plugin": "^1.1.0",
"compression-webpack-plugin": "^2.0.0",
"copy-webpack-plugin": "6.2.1",
"css-loader": "^2.1.0",
"eslint": "^7.18.0",
"eslint-webpack-plugin": "^2.4.1",
"file-loader": "^3.0.1",
"ftp-deploy": "^2.4.0",
"glob": "^7.1.6",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-minimizer-webpack-plugin": "^1.0.0",
"image-webpack-loader": "^7.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"rimraf": "^2.6.3",
"sass-loader": "^7.1.0",
"serviceworker-webpack-plugin": "^1.0.1",
"terser-webpack-plugin": "4.2.3",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.40.0",
"webpack-cli": "^3.1.2",
"webpack-dev-middleware": "^3.5.2",
"webpack-dev-server": "^3.11.0",
"webpack-ftp-upload-plugin": "^1.0.3",
"webpack-hot-middleware": "^2.24.3",
"webpack-manifest-plugin": "^3.0.0",
"webpack-merge": "^4.2.1",
"workbox-cacheable-response": "^6.0.2",
"workbox-expiration": "^6.0.2",
"workbox-routing": "^6.0.2",
"workbox-strategies": "^6.0.2",
"workbox-webpack-plugin": "^6.0.2",
"zlib": "^1.0.5"
},
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.5.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-lazy-load-image-component": "^1.5.1",
"react-paginate": "^6.5.0",
"react-redux": "^7.2.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"redux": "^4.0.5",
"redux-immutable-state-invariant": "^2.1.0",
"redux-thunk": "^2.3.0"
}
}
var path = require("path");
module.exports = {
//mode: "production",
mode: "development",
devtool: "inline-source-map",
context: path.join(__dirname, "pages"),
entry: ["/_app.js" /*main*/],
output: {
filename: "./bundle.js", // in /dist
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js", ".css", ".scss"],
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" },
{
test: /\.scss$/,
use: [
{ loader: "style-loader" }, // to inject the result into the DOM as a style block
{ loader: "css-modules-typescript-loader" }, // to generate a .d.ts module next to the .scss file (also requires a declaration.d.ts with "declare modules '*.scss';" in it to tell TypeScript that "import styles from './styles.scss';" means to load the module "./styles.scss.d.td")
{ loader: "css-loader", options: { modules: true } }, // to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class)
{ loader: "sass-loader" }, // to convert SASS to CSS
// NOTE: The first build after adding/removing/renaming CSS classes fails, since the newly generated .d.ts typescript module is picked up only later
],
},
{
test: /\.png|jpg|gif$/i,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
},
},
],
},
{ test: /\.js|tsx|ts$/, loader: "babel-loader", exclude: /node_modules/ },
],
},
};
插件/预设文件不允许导出对象，只允许导出函数错误，但现在我得到的是模组工作不正常的模糊错误。有几次，该网页包会成功编译，但我想使用的文件不会。我有什么遗漏吗？我保证我正在安装preset-stage-0软件包
Error: Cannot find module '@babel/preset-stage-0'
Require stack:
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\compiled\babel\bundle.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\compiled\babel\code-frame.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\lib\typescript\diagnosticFormatter.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\lib\typescript\runTypeCheck.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\lib\verifyTypeScriptSetup.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\server\next-dev-server.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\server\next.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\server\lib\start-server.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\cli\next-dev.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\bin\next
at Array.map (<anonymous>)
at Generator.next (<anonymous>)
at loadFileChain.next (<anonymous>)
错误：找不到模块'@babel/preset-stage-0'
需要堆栈：
-C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node\u modules\next\dist\compiled\babel\bundle.js
-C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node\u modules\next\dist\compiled\babel\code-frame.js
-C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node\u modules\next\dist\lib\typescript\diagnosticFormatter.js
-C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node\u modules\next\dist\lib\typescript\runTypeCheck.js
-C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node\u modules\next\dist\lib\verifyTypeScriptSetup.js
-C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node\u modules\next\dist\server\next-dev-server.js
-C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node\u modules\next\dist\server\next.js
-C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node\u modules\next\dist\server\lib\start-server.js
-C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node\u modules\next\dist\cli\next-dev.js
-C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node\u modules\next\dist\bin\next
在Array.map（）处
在Generator.next（）处
在loadFileChain.next（）处
不确定为什么会出现此错误
这是我的网页，它可以正常工作
另外，我已经做了大量的优化以减少捆绑包的大小，请提前道歉
Webpack.config.base.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const CopyPlugin = require("copy-webpack-plugin");
const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const PurifyCssPlugin = require('purifycss-webpack');
const glob = require("glob");
module.exports = {
target: 'web',
stats: 'verbose',
output: {
path: __dirname + '/dist',
filename: '[name].[hash].bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: './'
}
}, 'css-loader']
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: './'
}
}, 'css-loader', 'sass-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack@1.x
disable: true, // webpack@2.x and newer
mozjpeg: {
progressive: true,
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
},
}
]
}
]
},
plugins: [
new CopyPlugin({
patterns: [
{from: "icons", to: "icons"},
{from: "./manifest.webmanifest", to: ""},
{from: "./.htaccess", to: ""},
{from: "./robots.txt", to: ""}
],
}),
new MiniCssExtractPlugin({
filename: "[name].[hash].css"
}),
new HtmlWebpackPlugin({
template: "./src/app/index.html",
favicon: "./src/assets/image/favicon.png",
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
}),
new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, './src/app/serviceWorker/serviceWorkerInit.js'),
}),
new WebpackManifestPlugin({
fileName: 'asset-manifest.json', // Not to confuse with manifest.json
}),
new ESLintPlugin({files: './src/app/app.js'}),
new PurifyCssPlugin({
paths: [
...(glob.sync(`./src/app/*.html`)),
...(glob.sync(`./src/app/**/*.jsx`)),
...(glob.sync(`./dist/*.html`))
],
styleExtensions: ['.css','.scss'],
moduleExtensions: [".html"],
verbose: true,
purifyOptions: {
info: true,
minify: true,
whitelist: ["*purify*"]
},
})
]
};
Webpack.config.prod.js
const merge = require('webpack-merge');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const webpackBaseConfiguration = require('./webpack.config.base.js');
const TerserPlugin = require('terser-webpack-plugin')
const webpack = require('webpack');
const GLOBALS = {
'process.env.NODE_ENV': JSON.stringify('production'),
__DEV__: false
};
module.exports = merge(webpackBaseConfiguration,{
mode: 'production',
entry: [
'@babel/polyfill',
'./src/app/app.jsx'
],
devServer: {
contentBase: './dist'
},
optimization: {
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 0,
minChunks: 2,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
usedExports: true,
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6,
},
}),
new OptimizeCSSAssetsPlugin()
]
},
plugins: [
new webpack.DefinePlugin(GLOBALS),
new CompressionPlugin({
algorithm: 'gzip',
minRatio: Number.MAX_SAFE_INTEGER
}),
new CompressionPlugin({
filename: "[path].br",
algorithm: "brotliCompress",
test: /\.(js|css|html|svg|png|svg|jpg|gif)$/,
deleteOriginalAssets: false,
minRatio: Number.MAX_SAFE_INTEGER
})
]
});
Webpack.config.dev.js
const merge = require('webpack-merge');
const webpackBaseConfiguration = require('./webpack.config.base');
const webpack = require('webpack');
module.exports = merge(webpackBaseConfiguration,{
mode: 'development',
output: {
publicPath: '/'
},
devServer: {
contentBase: './src',
historyApiFallback: true
},
devtool: 'cheap-module-eval-source-map',
entry: [
'@babel/polyfill',
'webpack-hot-middleware/client?reload=true',
'./src/app/app.jsx'
],
plugins: [
/*For hot deployment*/
new webpack.HotModuleReplacementPlugin()
]
});
package.json
{
"name": "sabrinasbase",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"chokidar": "^3.5.1",
"css-modules-typescript-loader": "^4.0.1",
"next": "10.0.5",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-particles-js": "^3.4.1",
"react-tsparticles": "^1.18.11",
"sass": "^1.32.5",
"three": "^0.124.0"
},
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-stage-0": "^7.8.3",
"@babel/register": "^7.12.10",
"@types/node": "^14.14.22",
"@types/react": "^17.0.0",
"babel-loader": "^8.2.2",
"typescript": "^4.1.3",
"url-loader": "^4.1.1",
"webpack": "^5.16.0",
"webpack-cli": "^4.4.0",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"
},
"resolutions": {
"@babel/core": "^7.12.10"
}
}
{
"name": "Sample",
"version": "1.0.0",
"description": "React app",
"scripts": {
"clean": "rimraf dist",
"deploy": "node deploy",
"build:prod:deploy": "npm run clean && webpack --mode production --config webpack.config.prod.js && node deploy",
"build:prod": "npm run clean && webpack --mode production --config webpack.config.prod.js",
"build:dev": "webpack-dev-server --mode development --config webpack.config.dev.js --open --hot",
"start": "npm run build && npm run deploy",
"build": "npm run clean && webpack --mode production --config webpack.config.prod.js && npm run deploy"
},
"engines": {
"node": "14.x",
"npm": "6.x"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.2.2",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"@gfx/zopfli": "^1.0.15",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.0.4",
"brotli-webpack-plugin": "^1.1.0",
"compression-webpack-plugin": "^2.0.0",
"copy-webpack-plugin": "6.2.1",
"css-loader": "^2.1.0",
"eslint": "^7.18.0",
"eslint-webpack-plugin": "^2.4.1",
"file-loader": "^3.0.1",
"ftp-deploy": "^2.4.0",
"glob": "^7.1.6",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-minimizer-webpack-plugin": "^1.0.0",
"image-webpack-loader": "^7.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"rimraf": "^2.6.3",
"sass-loader": "^7.1.0",
"serviceworker-webpack-plugin": "^1.0.1",
"terser-webpack-plugin": "4.2.3",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.40.0",
"webpack-cli": "^3.1.2",
"webpack-dev-middleware": "^3.5.2",
"webpack-dev-server": "^3.11.0",
"webpack-ftp-upload-plugin": "^1.0.3",
"webpack-hot-middleware": "^2.24.3",
"webpack-manifest-plugin": "^3.0.0",
"webpack-merge": "^4.2.1",
"workbox-cacheable-response": "^6.0.2",
"workbox-expiration": "^6.0.2",
"workbox-routing": "^6.0.2",
"workbox-strategies": "^6.0.2",
"workbox-webpack-plugin": "^6.0.2",
"zlib": "^1.0.5"
},
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.5.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-lazy-load-image-component": "^1.5.1",
"react-paginate": "^6.5.0",
"react-redux": "^7.2.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"redux": "^4.0.5",
"redux-immutable-state-invariant": "^2.1.0",
"redux-thunk": "^2.3.0"
}
}
大家好，请分享当前的错误，所以我刚刚发现“从v7.0.0-beta.55开始，我们已经删除了Babel的舞台预设。”上面添加了错误。我也注意到了这一点，但我不确定替代方案是什么……这可能有帮助吗？可能是react与babel的版本不匹配，我在babel 7发布时也遇到了类似的问题，但不是很确定，我在下面发布了我的优化网页，除了标准优化之外，还做了压缩和css缩减。再次向我方道歉，因为优化插件太多，网页可能看起来很凌乱，这个应用程序集成了PWA，所以需要减少应用程序的大小。所以我看到你在条目中没有给出“@babel/polyfill”，试试看，可能会有帮助。好的，我决定暂时放弃babel，因为我不需要它来达到我想用它的目的。我最终遇到了更多关于Webpack的错误，所以这一定是一个其他方式的深层次问题。不过，我很感激你试图帮助我。祝你今天愉快@维卡萨尼