Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: The loaded module contains errors #912

Open
ABCDdouyaer opened this issue Jul 14, 2021 · 10 comments
Open

Error: The loaded module contains errors #912

ABCDdouyaer opened this issue Jul 14, 2021 · 10 comments

Comments

@ABCDdouyaer
Copy link

ABCDdouyaer commented Jul 14, 2021

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
Copy link

[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
Copy link

I am seeing the same issue. Any ideas?

@JLHwung
Copy link
Contributor

JLHwung commented Nov 10, 2021

Can you provide a reproduction repo?

@josudoey
Copy link

josudoey commented May 28, 2022

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
Copy link

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
Copy link
Contributor

JLHwung commented Jun 23, 2022

@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
Copy link
Contributor

JLHwung commented Jun 23, 2022

@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
Copy link

cMing1997 commented Aug 2, 2023

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants