标签: babel-loader

我收到此错误，您能帮帮我吗？以下是我的 webpack.config 和 package.JSON 文件。我的服务器工作正常，但 webpack 不行。我全局安装了 Webpack，但这并没有解决这个问题。

===webpack.config文件===

var path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
watch: true,
module: {
  loaders: [
    {
      test:/\.js$/,
      exclude:/node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }

  ]
}

===Package.JSON文件===

{
  "name": "reduxApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": …

我创建了一个webpack.config.js导出两个不同 WebPack 配置对象的文件。我需要为这些中的预设设置不同的 babel 选项。经过一些研究，我尝试创建两个不同的加载程序配置，每个配置都targets向预设传递不同的选项，如下所示：

// default JS loader config for browsers that support <script type='module'
{
    loader:'babel-loader',
    options:{
        presets: ['@babel/preset-env', {
            targets: {
                esmodules: true
            }
        }]
    }
}
...


// fallback for browsers that load the <script nomodule 
{
    loader:'babel-loader',
    options:{
        presets: ['@babel/preset-env', {
            targets: "> 0.5% in UK, last 2 versions, not dead, ie 11"
        }]
    }
}

但是我显然是犯了这个错误，因为我在 WebPack 构建中遇到了这个错误

ERROR in ./some-path/WorkflowStage.class.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    ReferenceError: [BABEL] e:\some-path\WorkflowStage.class.js: Unknown …

我正在尝试修复一个插件，但似乎无法开箱即用的 webpack。它最初使用的是 webpack v2 和 babel 6，所以我决定将它升级到 wepack 4 和 babel 7。即便如此，它似乎也不是 webpack。我得到的错误是

ERROR in ./src/index.js 42:8
Module parse failed: Unexpected token (42:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     if (this.props.image && this.props.imageClass){
|       return(
>         <img
|           src={this.props.image}
|           className={this.props.imageClass}
 @ multi @babel/polyfill ./src/index.js main[1]

我的 webpack 文件是

    var path = require('path');
module.exports = {
    mode: 'development',
  entry: ['@babel/polyfill','./src/index.js'],
  output: {
    path: …

我有一个项目，@mdx-js/runtime它在 IE 11 或 Edge ( Edge 44.18362.449.0)上使用并完全中断：

SCRIPT1028: SCRIPT1028: Expected identifier, string or number

由于这里的传播语法，它实际上中断了：

const allNodes = sortedNodes.map(({ start: _, ...node }, i) => { 

这行代码来自remark-mdx，它是 的依赖@mdx-js/runtime，特别是这个文件和行：https : //github.com/mdx-js/mdx/blob/master/packages/remark-mdx/extract-imports-and-exports .js#L66

我一直在尝试让 Webpack 和 Babel 转换该文件，以便不再存在传播：

浏览器列表：

如果我运行，npx browserslist我可以看到 IE 11 在那里。

"browserslist": [
    "> 0.5%",
    "last 2 version",
    "Firefox ESR",
    "not dead",
    "iOS >= 9"
]

.babelrc：

我试过禁用loose模式并添加@babel/plugin-transform-spread和@babel/plugin-proposal-object-rest-spread，但没有解决问题。

  {
    "presets": [[
        "@babel/preset-env", …

尝试让 Babel 和 Webpack 5 很好地协同工作，但我收到以下错误：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'fs/promises'

我看到的大多数链接都引用旧版本的 Node（最常提到 v12），但运行时node -v我可以看到安装了以下版本：

v18.12.1

Package.json 看起来像这样

{
  "name": "foobar",
  "version": "1.0.0",
  "description": "Trying out webpack 5 and babel.",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.0",
    "terser-webpack-plugin": "5.3.0",
    "typescript": "^4.9.3",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.1.1" …

我有这个Webpack配置:

const path = require('path');

module.exports = {
  entry: ['babel-polyfill', './lib/index.js'],
  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'suman.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['latest'],
          plugins: ['transform-runtime']
        }
      }
    ]
  },

  node: {
    assert: 'empty',
    buffer: 'mock',
    child_process: 'empty',
    cluster: 'empty',
    console: 'mock',
    constants: 'empty',
    crypto: 'empty',
    dgram: 'empty',
    dns: 'mock',
    domain: 'empty',
    events: 'empty',
    fs: 'empty',
    http: 'empty',
    https: 'empty',
    module: 'empty',
    net: 'mock',
    os: 'empty',
    path: 'empty',
    process: 'mock',
    punycode: …

在我的Deis应用中收到错误；在前端中间件中引入了头盔（Helmet）。该应用程序最初基于React Boilerplate和我运行过的大多数建议，我已经在源代码中实现/探索过，并且仍然会产生此“幻像”错误。

这仅在Deis应用实例上发生；在本地重现步骤时，完成（生产）构建过程的零问题。

当然，我可以helmet从中间件中删除，但是，我宁愿不...

错误输出：

> pkg-name@0.0.1 start /app
> npm run start:production

> pkg-name@0.0.1 start:production /app
> npm run build && npm run start:prod

> pkg-name@0.0.1 build /app
> cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress

/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
        throw e;
        ^
2017-10-27T15:50:48+00:00 deis-app-name[]:
Error: Couldn't find preset "latest" relative to directory "/app"
    at /app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init …

这：

babel ./src/MyTypescript.ts  --out-dir ./wwwroot/js/

不起作用（没有错误，只是“0 已编译”）。

.babelrc包含 Babel 7 使用 webpack babel loader 编译 typescript 所需的一切：预设“@babel/typescript”和插件“babel-plugin-transform-class-properties”（对我来说适用于当前的 babel 7 rc01）。

我的项目的一个依赖项是使用箭头函数，我似乎无法让 babel-loader 转译外部依赖项。

我的模块部分看起来像

module: {
        rules: [
            {test: /\.(js|jsx)$/, loader: 'babel-loader'}
        ]
    }

我最初在规则对象中有 exclude: /node_modules/(?!superagent)/ ，但删除了它以确保它不是正则表达式问题。

.babelrc

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ]
}

索引.js

import superagent from 'superagent'

superagent.get('http://www.google.com')
    .then(result=>console.log('done'))
    .catch(e=>console.error(e));

在这种情况下，有问题的依赖是 superagent

我用显示问题的配置创建了一个最小的 repo https://github.com/ksmith97/WebpackIssue

我不确定这里还有什么可以尝试的

编辑：要清楚这是为了 IE 11 支持。

Uncaught ReferenceError: regeneratorRuntime is not defined我在使用 React 与 webpack 和 Babel 时遇到错误。

我按照这个答案将我的定义.babel.rc为：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"] ,
  "plugins": [
      ["@babel/plugin-transform-runtime"]
  ]
}

并运行：

npm i --save-dev @babel/plugin-transform-runtime

但是，之后我得到了完全相同的错误。我也遵循了另一个答案和这个答案，但仍然得到完全相同的错误。

我的babel具体安装package.json如下：

  "dependencies": {
    "@babel/runtime": "^7.14.6"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5"
  }

有任何想法吗？

有babel-loader或者我的webpack配置有问题.如果我使用我当前的实现工作正常,但我知道测试模式是错误的(我认为).目前是一个glob,而不是一个正则表达式.如果我根据doc更改它,请收到以下错误.我已经吹走了node_modules并安装了npm.

错误:无法解析/ path/to/app中的'bable-loader'

//no error
rules: [{
      test: /\*.js$/,
      use: ['ng-annotate-loader', 'bable-loader'],
      exclude: /node_modules/
    },


//throws error
rules: [{
    test: /\.js$/,
    use: ['ng-annotate-loader', 'bable-loader'],
    exclude: /node_modules/
  },


//file : .babelrc 

{
  "env": {
    "testing": {
      "presets": [
        "es2015"
      ]
    }
  },
  "presets": [
    ["es2015", "stage-2", {
      "modules": false
    }]
  ]
}

我一直在尝试升级我的软件包，但事情开始崩溃，我现在无法构建，也似乎无法找出问题所在。我怀疑问题与.babelrc文件有关，因为它是抛出的babel-loader错误。

.babelrc

{
  "presets": [
  ],
  "plugins": [
    [
      "react-hot-loader/babel",
      "transform-object-rest-spread"
    ],
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"
  ],
  "env": {
    "start": {
      "presets": [
      ]
    }
  }
}

在执行npm run build时出现堆栈错误跟踪：

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: .plugins[0][1] must be an object, false, or undefined
    at assertPluginItem (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/validation/option-assertions.js:244:15)
    at arr.forEach (/var/www/FlaskApp/people-app-prod/static/node_modules/@babel/core/lib/config/validation/option-assertions.js:222:30) …