babel
Error: The loaded module contains errors
error
[webpack-cli] Error: The loaded module contains errors at /Users/wangwei/Desktop/diagnose/node_modules/webpack/lib/dependencies/LoaderPlugin.js:110:11 at /Users/wangwei/Desktop/diagnose/node_modules/webpack/lib/Compilation.js:1671:8 at /Users/wangwei/Desktop/diagnose/node_modules/webpack/lib/util/AsyncQueue.js:352:5 at Hook.eval [as callAsync] (eval at create (/Users/wangwei/Desktop/diagnose/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1) at AsyncQueue._handleResult (/Users/wangwei/Desktop/diagnose/node_modules/webpack/lib/util/AsyncQueue.js:322:21) at /Users/wangwei/Desktop/diagnose/node_modules/webpack/lib/util/AsyncQueue.js:305:11 at /Users/wangwei/Desktop/diagnose/node_modules/webpack/lib/Compilation.js:1343:15 at /Users/wangwei/Desktop/diagnose/node_modules/webpack/lib/HookWebpackError.js:68:3 at Hook.eval [as callAsync] (eval at create (/Users/wangwei/Desktop/diagnose/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1) at Cache.store (/Users/wangwei/Desktop/diagnose/node_modules/webpack/lib/Cache.js:107:20)
webpack.config
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-react'],
['@babel/preset-env', { targets: "defaults" }]
],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
package.json
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.14.5",
"@types/chrome": "0.0.146",
"@types/react": "^17.0.14",
"@types/react-dom": "^17.0.9",
"@types/ua-parser-js": "^0.7.36",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.1.0",
"ts-loader": "^9.2.3",
"typescript": "^4.3.5",
"url-loader": "^4.1.1",
"webpack": "^5.42.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
[webpack-dev-middleware] Error: The loaded module contains errors
{ test: /.tsx$/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-typescript'], plugins: ['@vue/babel-plugin-jsx'], }, }, { loader: 'ts-loader', options: { appendTsxSuffixTo: ['\.vue'] }, }, ], },
may be error is by
error: ModuleBuildError: Module build failed (from ./node_modules/.pnpm/[email protected]_8400c5f16911ce7dfc777f00e248d10e/node_modules/babel-loader/lib/index.js):
SyntaxError: <....>/module.d.ts: Missing semicolon. (1:7)
you can try
create <projectRoot>/tsconfig.webpack.json like
{
"extends": "./tsconfig",
"compilerOptions": {
"sourceMap": true
},
"exclude": [
"**/*.test.ts",
"**/*.d.ts",
"node_modules"
]
}
and modify webpack module rules to
{
test: /\.tsx?$/,
use: [{
loader: require.resolve('ts-loader'),
options: {
configFile: "tsconfig.webpack.json"
}
}, {
loader: require.resolve('babel-loader'),
options: {}
}],
}
I get this problem also and like :
Compiled with problems:X
ERROR in ./package.json
Module build failed (from ./node_modules/.pnpm/[email protected]_te6ollfzjcco6mbxjl755ucqke/node_modules/babel-loader/lib/index.js):
SyntaxError: F:\work\Saas\micro-template2\package.json: Missing semicolon. (2:8)
1 | {
> 2 | "name": "micro-template",
| ^
3 | "version": "1.0.0",
4 | "main": "src/index.js",
5 | "repository": "[email protected]/frontend/saas-platform/micro-template.git",
at instantiate (F:\work\Saas\micro-template2\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:72:32)
@josudoey It seems that you are compiling d.ts. Please enable the dts typescript parser option:
// babel.config.js
{
overrides: [{
test: /\.d\.ts$/,
parserOpts: {
plugins: [["typescript", { "dts": true }]]
}
}]
}
@haoyinag It seems that you are passing babel-loader a package.json. Please check the test clause alongside use: "babel-loader" in your webpack config.
~~I ran into the same problem and found that it was the eslint-loader that didn't support webpack5, but I wasn't sure why it would only report an error if it was a hot update, and it was fine when I first ran it~~
I ran into the same problem, which turned out to have nothing to do with Babel, but with the eslint-loader checking the code and finding ESLINT errors. But I can not understand why the error message is so
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({ transpileDependencies: true,
lintOnSave: false,
configureWebpack: {
resolve: { extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx", ".json"] },
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly:true
}
}
]
}
}
})
const { DefineConfig } = require('@vue/cli-service')
module.exports = DefineConfig({ transpileDependency: true,
lintOnSave: false, configureWebpack: { resolve: { extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx", ".json"] }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], transpileOnly:true } } ] } }})
vue.config.js中配置transpileOnly:true，如上述代码所示。