Error: The loaded module contains errors

[ABCDdouyaer]

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"
  },

[JiangBei007]

[webpack-dev-middleware] Error: The loaded module contains errors
at E:\git-code\fine-ui\node_modules\webpack\lib\dependencies\LoaderPlugin.js:110:11
at E:\git-code\fine-ui\node_modules\webpack\lib\Compilation.js:1676:8
at E:\git-code\fine-ui\node_modules\webpack\lib\util\AsyncQueue.js:352:5
at Hook.eval [as callAsync] (eval at create (E:\git-code\fine-ui\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)
at AsyncQueue._handleResult (E:\git-code\fine-ui\node_modules\webpack\lib\util\AsyncQueue.js:322:21)
at E:\git-code\fine-ui\node_modules\webpack\lib\util\AsyncQueue.js:305:11
at E:\git-code\fine-ui\node_modules\webpack\lib\Compilation.js:1347:15
at E:\git-code\fine-ui\node_modules\webpack\lib\HookWebpackError.js:68:3
at Hook.eval [as callAsync] (eval at create (E:\git-code\fine-ui\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1)
at Cache.store (E:\git-code\fine-ui\node_modules\webpack\lib\Cache.js:107:20)

{
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'] },
},
],
},

[gardengeek99]

I am seeing the same issue. Any ideas?

[JLHwung]

Can you provide a reproduction repo?

[josudoey]

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: {}
  }],
}

[haoyinag]

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)

[JLHwung]

@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 }]]
    }
  }]
}

[JLHwung]

@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.

[cMing1997]

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

[zhangyue-mars]

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
                }
            }
        ]
    }
}

})

[zhangyue-mars]

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，如上述代码所示。