English 中文(简体)
改写是指一个全球目标,但现有文件是一个单元。
原标题: React refers to a UMD global, but the current file is a module

我更新了我的项目,以建立反应器4.0,我慢慢慢慢地把我的文件转至字典。 我知道这一新版本,你不必重复从反应中进口反应堆。 然而,在我所有的TS档案中,I m不进口React I接收了这一错误:

React refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)`

我知道我可以通过进口再处理方法加以确定,但我认为这已不再需要。 还有,有人是否可以解释这一错误的含义?

我的基本X文件

const Users = () => {
    return <>Teachers aka Users</>;
};

export default Users;
最佳回答

这一错误信息来自原型编辑。 第17次新的jsx变化目前没有得到第4版的支持,并将得到4.1的支持。

类型:

问题回答

Adding

import React from  react 

解决这个问题

Dan写道,你可以修改<代码>sconfig.json:

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

或者在档案中发现错误的部件内进行进口处理:

import React from  react 

我这里的问题是与文字有关的类似,但并非完全一样。

What was wrong

我在我的<密码>上添加了没有include的原始目录。

The solution

在此,我如何确定,只是增加<代码>。

// tsconfig.json
{
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/**/*.ts",
    "**/**/*.tsx"
    "<path-to-your-source>.ts",
    "<path-to-your-source>.tsx",
  ],
}

My particular project is a Next.js project. Here s my full tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": [
      "esnext"
    ],
    "esModuleInterop": true,
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/**/*.ts",
    "**/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

以上<代码>sconfig.json 的绝大部分是通过下一代生成的。

对VSCode用户来说,在MacOS,简单地关闭和重新开放该项目为我确定了问题。

I fixed it using this:

{
  ...
  "compilerOptions": {
     ...
    "jsx": "react",
    "allowUmdGlobalAccess": true,
  }
}

Check your file tsconfig.json

"compilerOptions": {
    ...
    "baseUrl": "src",
    ...
    "jsx": "react-jsx",
    ...
 },

重载VS法典的打字机:

Press Ctrl+Shift+P (Cmd+Shift+P on macOS) to open the Command Palette and type restart, then select the command "TypeScript: Restart TS server".

就我而言,这与其中的任何内容无关。

我正在使用《视觉演播室法》,我打开了双手,不是在混淆了json档案的根基上,而是在弧夹中一层。

I was getting the error: Parsing error: Cannot read file :CMyProject sconfig.json.eslint

间接造成<代码> 反应指全球紫外线,但现有文档为模块

在项目一级重开双倍处理该问题:

《联邦法典》 我不得不重新启用打字机。 我在 g子公司之间换了很多东西,这一错误在没有变化的档案中意外发生。 没有任何其他变化会引发这一错误。 在重载错误后,该错误就消失了。

重载VS法典的打字机:

Press Ctrl+

我谈到这个问题,最后认识到,变化不定。 如果你设立了帐篷,则会打工。 确保:

module.exports = {
  ...
  globals: {
    ...
    "ts-jest": {
      ...
      tsconfig: {
        ...
        jsx: "react-jsx", // *** HERE ***
        ...
      },
    },
  },
  ...
};

虽然这是目前一个令人难以置信的旧员额,但我注意到了多份意见,建议使用<代码>从反应进口回复,包括最近张贴的海报——这些海报令人难以置信,无助于解决问题。 这里的指示是,使联合计算机X转换成在STS、网络包、Babel环境中工作,并删除这些浮星-UMD全球错误信息。

  1. Add @babel/core, @babel/preset-react and babel-loader to the project
  2. Add a babel.config.ts with the following code
{
    "presets": [
      ["@babel/preset-react", {
        "runtime": "automatic" // This bit does the transformation
      }]
    ]
  }
  1. Add babel loader rule to webpack module.rules, under ts-loader to load that babel config
{
   test: /.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
     loader: "babel-loader",
   },
},
  1. Add the following rule to TSConfig.ts "jsx": "react-jsx",
  2. Add this (or variation of pointing to src folder) to TSConfig includes. Make sure you have excludes node_modules too
"include": [
   "./src/**/*.ts",
   "./src/**/*.tsx",
   "./src/**/*.jsx",
   "./src/**/*.js",
],
  1. VERY IMPORTANT STEP FOR VSC-ers. Do ctrl+p in visual studio, type > TypeScript. Somewhere will be an option called TypeScript: Select TypeScript Version . Pick the TS version in node_modules, not the shitty out of date inbuilt VSC TS which should be condemned.
  2. Restart VSC. You should be able to test JSX transformation is working with the following in a .tsx file.
import { FC } from "react";

const Component: FC = () => {
  return <></>;
};

export default Component;  

如果您使用另一种反应方法,即预言,你还需要在您的《服贸总协定》中添加以下规则,以备这项工作<编码>“jsxImportSource”:“preact”,。

而且,如果采用像下等框架,你就不需要作为自己固有的工具来加以利用。

*Just set jsx : "react-native" *

{
   "compilerOptions": {
    "jsx": "react-native",
    ...
}

如果你使用VS代码,而不是重新启动整个项目,那么你通常可以简单地重新启用打字机(在MacOS或Windows ⌃+⇧+P)和打字“重新启动服务器”+进入服务器。

Restart Typescript Server in the Command Palette

对那些使用白:的人:

说明

"jsx": "react-jsx"

tsconfig.node.json

参看。 为什么万物会造出两种类型的文字文件

视项目所用的版本而定,这可能是所需格式:

import * as React from "react"

我错过了index.ts,该构成部分的名称。

└── components/
    └── Dialog/
        ├── Dialog.tsx
        └── Dialog.ts // This needs to be index.ts

将姓名改为index.ts解决了这一问题。

正如ppak10 Unter Dan Barclay的答复在评论中指出的,首先尝试重新启动《视觉行为守则》。

在VSCode,我的问题涉及Docker Dev Organics

我这样做了:

  1. 以<代码>F1开放指挥厅

  2. 然后看:Type : 选择性版本...

  3. And then select the Workspace version: enter image description here

I was having the same thing but somehow I noticed that
tsconfig.json has jsx as a react, after I removed it than it worked.

{
  ...
  "compilerOptions": {
    "jsx": "react", // this line should be removed
     ...
   }
 }

请知道,我的项目使用零件。

当档案处于该项目的根基时,我就这样做了,而不是使用制造反应堆的碎块。

改写是指一个全球目标,但现有文件是一个单元。 考虑增加进口而不是进口(2686)

简单答案是进口再处理。

<编码>进口 取自“反应”;

我的“反应指的是全球的千年发展目标,但目前的档案是一个单元。 考虑在我的代码基础上增加进口量。 我试过一切,就此问题抽出这么多随机博客。 添加一个空洞的jsconfig.json是一种临时装置。 在我多小时后,我只想承认通过环境/会议进行诽谤/玩弄,在某个时候,我没有思考就把这种情况变成了。 搜查环境,关闭或增加环境。 json。

"js/ts.implicitProjectConfig.checkJs": false

If you re new to typescript like me and you re using a props remember to import react I had this code but forgot to import react and this error was generated

const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
 return <div  className="bg-red-400 h-screen w-full" >
{/* <Navbar /> */}
{children}
</div>;

iii

To anyone updating an Old app in 2024 to React v17+ with TS:

查询target,载于tsconfig.json 文档,可能将其编为es 5, 因而不正确。

As per TypeScript own docs, when supporting the new Reactor v17 JSX, your target should be "es2015". This is the basic boilerplate for it:

{
    "compilerOptions": {
        "module": "esnext",
        "target": "es2015",
        "jsx": "react-jsx",
        "strict": true
    },
    "include": [
        "./**/*"
    ]
}

我用<代码>storybook将这一错误带上项目。 <代码>components的目录下的文件看来是细致的,<编码>下的文件<>storybook的目录,例如preview.tsx仅涉及这一问题。

Simply Add.code>.storybook/* paths to include, similar Solutions toson.

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
  "include": [..., ".storybook/*"], // *** HERE ***
}

Dontabe 增加jsx”:“react-jsx”compilerOptions

我如何解决这个问题:将具体目标改为近期目标。 今天得到大多数浏览器和服务器的支持,例如ES2021

- 修改目标,从ES5改为ES2021,确定目标!

{
  "compilerOptions": {
    "target": "es2021",
  },
}

既然我们今天正在使用一个更新的合成子,那将具有意义。

供参考:这里是我的笔记本在座前是如何看待的:。

    {
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

关于我已经拥有<代码>jsx”的通知:我的档案中包含的“反应-jsx”选项,Dan(确切地说)提出,但还不足以确定。





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.