标签: babel-loader

我想Input在我的表单中使用 react-validation 组件。这就是我导入它并在表单中使用的原因：

<Input className="form-control"
       type="text"
       placeholder="name"
       value={props.data.creatingUser.createName}
       name="createName"
       id="createName"
       onChange={props.handleAddChange}
required/>

当我尝试使用 运行应用程序时npm start，我在控制台中收到以下错误：

SyntaxError: E:\Projects\personal\rental-application\node_modules\react-validation\src\components\input\index.js: 目前未启用对实验语法“jsx”的支持 (6:3)：

const Input = ({ error, isChanged, isUsed, ...props }) => (

|   ^        <input {...props} {...( isChanged && isUsed && error ? {        className: `is-invalid-input ${props.className}`
 } : { className: props.className } )} /> 

Run Code Online (Sandbox Code Playgroud)

我没有明确地做任何 babel 配置，我的package.json文件有以下内容：

{
  "name": "rental-application",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "jquery": "^3.5.1", …

我试图使用babel-loader与babel-plugin-transform-runtime.

我按照以下说明操作:https: //github.com/babel/babel-loader#babel-is-injecting-helpers-into-each-file-and-bloating-my-code

相关代码:

rules: [
  // the 'transform-runtime' plugin tells babel to require the runtime
  // instead of inlining it.
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/transform-runtime']
      }
    }
  }
]

我在构建时遇到以下错误:

Module build failed: Error: Cannot find module '@babel/plugin-transform-runtime'

如果我将插件名称更改为:plugins: ['transform-runtime'],则会出现以下错误:

Module build failed: TypeError: this.setDynamic is not a function

问题是什么？

我有一个与 Webpack 4 和 Babel 加载器捆绑在一起的应用程序。在主入口点我正在导出一个类，例如export default Test;现在我正在尝试通过 ESM 感知 Chrome 导入主包

<script type="module">
(async function() {
  const test = await import('./module.main.js');
  window.test = test;
})()
</script>

问题是虽然浏览器正在加载包，但test只会产生这个。

Module {Symbol(Symbol.toStringTag): "Module"}
  Symbol(Symbol.toStringTag): "Module"

如何获取我的默认导出？我没有在这里提供 Webpack 配置，因为它很简单。

更新:由于某种原因,我无法重现问题,但无法解决问题.为其他人留下更新的配置详细信息.

我有2个项目,一个用于React Native,另一个用于React.来自React Web Project(例如rp1.js)的源文件正在使用来自React Native项目的源文件mycommonrn.js(component).
问题是mycommonrn.js文件正在使用NPM模块(react-native-vector-icons).我将这个模块分别安装在两个模块中:

• (a)在React Native项目下的node_modules中

• (b)在React项目下的node_modules中.

当从React Web项目使用mycommonrn.js时,我需要从(b)中的 node_modules中提取该NPM模块.但这并没有发生,而是以某种方式将其从(a)中拉出来.

导致问题的import语句位于mycommonrn.js中

import Ionicons from 'react-native-vector-icons/dist/Ionicons';

我试图指示webpack babel-loader 不要在react-native项目中查看node_modules ..但它不起作用......

我的应用程序使用Create React App设置重新连接,以覆盖CRA强加的目录监狱.

我的配置如下,你可以看到我明确告诉babel-loader"排除"给我带来麻烦的node_modules目录(为了便于阅读,标有**).

由于某些原因,明确排除不起作用.(CRA设置不使用.babelrc - 这就是我不在帖子中发布的原因).

提前感谢任何帮助.

     ?? 1
?        ?? oneOf
?           ?? 0
?           ?  ?? test
?           ?  ?  ?? 0
?           ?  ?  ?? 1
?           ?  ?  ?? 2
?           ?  ?  ?? 3
?           ?  ?? loader: /home/v/devel/mine/ltproject/mob/rnweb/aa1a/csr-cra/node_modules/url-loader/index.js
?           ?  ?? options
?           ?     ?? limit: 10000 …

我在React使用mobXapp 时装饰器有问题.它工作正常使用.babelrc,但我也有babel-loader带webpack.我将babel配置复制到webpack配置,但它不起作用.我检查了我可以在谷歌找到的所有解决方案,但它们都是指bebelrc,而不是webpack配置.我的webpack配置:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    'babel-polyfill',
    path.join(__dirname, '../../src/web/index')
  ],
  output: {
    path: path.join(__dirname, '../public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            ["@babel/preset-env", { "modules": false }],
            "@babel/preset-react",
          ],
          plugins: [ …

我无意中通过使用我的React应用程序中引入了向后兼容性问题 Array.prototype.flat。我很惊讶没有通过编译解决此问题-我认为这将导致与es2015兼容的代码。

我如何获得Babel 7进行翻译？（如果我在Babel 6中正确地阅读了源代码，那么仍然有一个用于此的插件，但是由于它已经开始向浏览器推广，因此已经放弃了对它的支持？）

工具：

• @ babel / core @ 7.0.0
• webpack@4.18.0

我的顶级配置文件如下所示：

webpack.config.js

var path = require('path')

module.exports = {
  entry: "./src/index.js",
  output: {
      path: path.join(__dirname, 'dist', 'assets'),
      filename: "bundle.js",
      sourceMapFilename: "bundle.map"
  },
  devtool: '#source-map',
  module: {
      rules: [
          {
              test: /\.js$/,
              exclude: /(node_modules)/,
              loader: 'babel-loader'
          }
      ]
  }}

.babelrc

{
  "presets": [ "@babel/preset-env", "@babel/react" ],
  "plugins": [["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]]
}

.browserslistrc

chrome 58
ie 11

(Create-React-App)当在子文件夹中运行react-scripts build(c:\Repos\web_app1\api_ui)及其自己的package.json、node_modules文件夹等时，出现以下错误：

 react-scripts build


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.0.4"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

  c:\Repos\web_app1\node_modules\babel-loader (version: 7.1.4)

• 无法将父文件夹的 …

我是 webpack 的新手，我正在使用 webpack 创建一个 React 应用程序。编译时出现此错误TypeError: $ is not a function。

我没有使用 jquery，但我的节点模块包含一些第三方库。

我只能找到一篇与此问题相关的文章，但它与 jquery 相关。 Webpack - $ 不是函数

我的 webpack 和 babel 配置有什么问题吗：

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = (env) => {
	console.log("WEBPACK ENV: ", env);

	const isDevMode = env !== "production";

	let config …

尝试设置通用 UI 库时遇到很多麻烦。

我已经设置了一个如下所示的纱线工作区：

/monorepo
   /common-16.13
   /react-app-16.8.
   /another-app-16.13

然后我导入common-16.13到react-app-16.8和使用这样的组件之一：

 /react-app/home.js
    import {SharedComponent} from "common"

但是，当我运行该应用程序时，出现此错误：

react.development.js?80c6:1465 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of …

我想在我的应用程序中使用 SVG 作为 React 组件。我正在使用：react 17.0.2、Webpack 5.57.1​​、@svgr/webpack 6.2.1。

我按照 svgr 文档svgr-doc中的步骤在 webpack.config 文件中添加 svgr ，但控制台开发工具中出现错误：

react-dom.development.js:67 Warning: <data:image/svg+xml;base64,dmFyIF9wYXRoOwoKZnVuY3Rpb24gX2V4dGVuZHMoKSB7IF9leHRlbmRzID0gT2JqZWN0LmFzc2lnbiB8fCBmdW5jdGlvbiAodGFyZ2V0KSB7IGZvciAodmFyIGkgPSAxOyBpIDwgYXJndW1lbnRzLmxlbmd0aDsgaSsrKSB7IHZhciBzb3VyY2UgPSBhcmd1bWVudHNbaV07IGZvciAodmFyIGtleSBpbiBzb3VyY2UpIHsgaWYgKE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbChzb3VyY2UsIGtleSkpIHsgdGFyZ2V0W2tleV0gPSBzb3VyY2Vba2V5XTsgfSB9IH0gcmV0dXJuIHRhcmdldDsgfTsgcmV0dXJuIF9leHRlbmRzLmFwcGx5KHRoaXMsIGFyZ3VtZW50cyk7IH0KCmltcG9ydCAqIGFzIFJlYWN0IGZyb20gInJlYWN0IjsKCnZhciBTdmdDYWxlbmRhciA9IGZ1bmN0aW9uIFN2Z0NhbGVuZGFyKHByb3BzKSB7CiAgcmV0dXJuIC8qI19fUFVSRV9fKi9SZWFjdC5jcmVhdGVFbGVtZW50KCJzdmciLCBfZXh0ZW5kcyh7CiAgICB4bWxuczogImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiwKICAgIHdpZHRoOiAxNiwKICAgIGhlaWdodDogMTYsCiAgICBmaWxsOiAiY3VycmVudENvbG9yIgogIH0sIHByb3BzKSwgX3BhdGggfHwgKF9wYXRoID0gLyojX19QVVJFX18qL1JlYWN0LmNyZWF0ZUVsZW1lbnQoInBhdGgiLCB7CiAgICBkOiAiTTExLjMzMyAyLjY2N0gxNGEuNjY3LjY2NyAwIDAgMSAuNjY3LjY2NlYxNGEuNjY3LjY2NyAwIDAgMS0uNjY3LjY2N0gyQS42NjcuNjY3IDAgMCAxIDEuMzMzIDE0VjMuMzMzQS42NjcuNjY3IDAgMCAxIDIgMi42NjdoMi42NjdWMS4zMzNINnYxLjMzNGg0VjEuMzMzaDEuMzMzdjEuMzM0ek0xMCA0SDZ2MS4zMzNINC42NjdWNGgtMnYyLjY2N2gxMC42NjZWNGgtMnYxLjMzM0gxMFY0em0zLjMzMyA0SDIuNjY3djUuMzMzaDEwLjY2NlY4eiIKICB9KSkpOwp9OwoKZXhwb3J0IHsgU3ZnQ2FsZW5kYXIgYXMgUmVhY3RDb21wb25lbnQgfTsKZXhwb3J0IGRlZmF1bHQgImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp3b2dJQ0FnSUNBZ0lIaHRiRzV6UFNKb2RIUndPaTh2ZDNkM0xuY3pMbTl5Wnk4eU1EQXdMM04yWnlJS0lDQWdJQ0FnSUNCM2FXUjBhRDBpTVRZaUNpQWdJQ0FnSUNBZ2FHVnBaMmgwUFNJeE5pSUtJQ0FnSUNBZ0lDQm1hV3hzUFNKamRYSnlaVzUwUTI5c2IzSWlDaUFnSUNBZ0lDQWdkbWxsZDBKdmVEMGlNQ0F3SURFMklERTJJZ28rQ2lBZ0lDQThjR0YwYUFvZ0lDQWdJQ0FnSUNBZ0lDQmtQU0pOTVRFdU16TXpJREl1TmpZM1NERTBZUzQyTmpjdU5qWTNJREFnTURFdU5qWTNMalkyTmxZeE5HRXVOalkzTGpZMk55QXdJREF4TFM0Mk5qY3VOalkzU0RKQkxqWTJOeTQyTmpjZ01DQXdNVEV1TXpNeklERTBWak11TXpNelFTNDJOamN1TmpZM0lEQWdNREV5SURJdU5qWTNhREl1TmpZM1ZqRXVNek16U0RaMk1TNHpNelJvTkZZeExqTXpNMmd4TGpNek0zWXhMak16TkhwTk1UQWdORWcyZGpFdU16TXpTRFF1TmpZM1ZqUm9MVEoyTWk0Mk5qZG9NVEF1TmpZMlZqUm9MVEoyTVM0ek16TklNVEJXTkhwdE15NHpNek1nTkVneUxqWTJOM1kxTGpNek0yZ3hNQzQyTmpaV09Ib2lMejRLUEM5emRtYysiOw== /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

并且 SVG 不显示。我无法将其作为 React 组件导入。

我的应用程序：

import React from 'react';
import ReactDOM from 'react-dom';

import CalendarIcon from './Calendar.svg'

const App = () => (
   <div>
       Test
       <CalendarIcon/>
   </div>
);

ReactDOM.render(<App />, document.getElementById('app'));

网页包文件：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

const …