VS代码中的React错误:分析错误：“import”和“export”只能与“sourceType:module”一起出现
在VS代码中，当出现React错误：“分析错误：“import”和“export”只能与“sourceType:module”一起出现”时，这是因为在使用ES6模块化语法时，需要设置sourceType为module。
ES6模块化语法中使用了import和export关键字来导入和导出模块，而sourceType是指定代码解析器使用的模块系统类型的选项。如果sourceType未设置为module，解析器将无法正确识别import和export关键字，从而导致该错误。
要解决这个错误，可以按照以下步骤进行操作：
- 打开VS代码，并打开出现错误的React项目。
- 在项目根目录下找到名为.babelrc的文件（如果没有则创建一个），并在文件中添加以下内容：
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": []
}- 在VS代码的终端中运行以下命令，安装相关的Babel依赖：
npm install --save-dev @babel/preset-env @babel/preset-react- 在项目根目录下找到名为.eslintrc的文件（如果没有则创建一个），并在文件中添加以下内容：
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
}
}- 在VS代码的终端中运行以下命令，安装相关的ESLint依赖：
npm install --save-dev eslint babel-eslint eslint-plugin-react- 重新启动VS代码，并重新编译React项目，错误应该已经解决。
以上步骤中，我们通过配置Babel和ESLint来确保代码解析器正确识别import和export关键字，并设置sourceType为module。这样就能解决React错误：“分析错误：“import”和“export”只能与“sourceType:module”一起出现”的问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数计算（SCF）：https://cloud.tencent.com/product/scf
- 腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云CDN加速（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（MPS）：https://cloud.tencent.com/product/mps
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
- 腾讯云视频处理（VOD）：https://cloud.tencent.com/product/vod
- 腾讯云音视频通信（TRTC）：https://cloud.tencent.com/product/trtc
- 腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
以上是腾讯云提供的一些与云计算相关的产品，可以根据具体需求选择相应的产品进行开发和部署。
相关·内容
1回答
系统配置
Mac塞拉利昂10.13.1
vs代码1.18.0
节点6.11.4
babel 6.26.0
我想在一个纯js文件(没有es6文件夹)中输入node_modules功能导出关键字。
创建2个文件，如下所示
utility.js
export const generateRandom = () => {
console.log('inside generate Random');
return Math.random();
};
check.js
import { generateRandom } from './
浏览 0提问于2017-11-15得票数 0
我正在逐步重写一个应用程序，并将ReScript转换为ReScript。我已经在ReScript中实现了几个组件，但这是第一个组件，我使用ReactDOM.Style.t作为组件的属性。
下面是我最小化的组件代码：
@genType
@react.component
let make = (~sx: option<ReactDOM.Style.t>=?) => {
<div></div>
}
ReScript编译得很好(除了警告没有使用sx，但我们可以忽略它)。
我生成了以下bs.js，这似乎很好：
// Generated by ReScript
浏览 14提问于2021-12-20得票数 4
回答已采纳
2回答
我正在尝试开发一个npm库，但当我在另一个应用程序中使用它时，例如：
import React from 'react';
import SmallGrid from 'react-smallgrid';
export default class Library extends React.Component{
我得到以下错误：
$ grunt browserify
Running "browserify:jsx" (browserify) task
>> /Users/me/code/myapp/node_modules/rea
浏览 3提问于2016-01-19得票数 0
回答已采纳
我把Cypress从3.0.3更新到了3.1.3。我正在使用ES6导入/导出模块，这必须与文档相关的工作。但是我在终端中得到了一行undefined，并且在图形用户界面中出现了以下错误：
<root_dir>/node_modules/@babel/runtime/helpers/esm/defineProperty.js:1
export default function _defineProperty(obj, key, value) {
^
ParseError: 'import' and 'export' may appear only wi
浏览 22提问于2018-12-06得票数 16
React native是抽屉给我的错误，我不认为我的代码是错误的，因为我遵循了react native官方网站的指导方针
这是我的包json
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/drawer": "^5.12.4",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^
浏览 14提问于2021-03-11得票数 0
3回答
const Index = () => (
<div>
<p>Hello World</p>
<Link href="/posts">
<a>Posts</a>
</Link>
</div>
)
ESLint正在返回关闭的</p>标记的解析错误(意外令牌)。我遗漏了什么？在JSX中不允许使用普通HTML属性吗？( div似乎运转良好)
确切的错误是：
[eslint]
浏览 0提问于2018-10-30得票数 10
回答已采纳
1回答
我已经用create-react-app创建了一个基本的React应用程序，它在弹出后具有以下结构。效果很好。
intended-app-home
|- the-app
|- config
|- node_modules
|- public
|- scripts
|- src
|- package.json
|- .eslintignore
|- .eslintrc
|- .gitignore
现在，我想将the-app的内容向上移到intended-app-home文件夹中。当我这样做时，在运行npm s
浏览 1提问于2017-08-08得票数 0
回答已采纳
1回答
无法将反应性模块作为节点模块加载
、、、、
我在路径src/components/test中有一个react组件
import React from 'react';
import ReactDom from 'react-dom';
class TestComp extends React.Component {}
export default TestComp;
我正在从路径index.js公开src/index.js中的组件
import TestComp from './components/test';
export {
TestComp
};
我在main中添加了pack
浏览 0提问于2017-03-01得票数 7
回答已采纳
在一个全新安装了ionic2的项目上工作时，在安装了angular2-jwt之后，我得到了这个错误：
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
D:\desenv\arquivos\workspace_inbit\medipop-parent\medipop-app\node_modules\angular2-jwt\angular2-jwt.ts:1
import {Injectable, Injector} from 'an
浏览 3提问于2016-04-06得票数 8
考虑以下两个文件：
app.js
import Game from './game/game';
import React from 'react';
import ReactDOM from 'react-dom';
export default (absPath) => {
let gameElement = document.getElementById("container");
if (gameElement !== null) {
ReactDOM.render(
浏览 5提问于2016-10-13得票数 81
回答已采纳
我有一个项目与React，，Typescript(输出为es5)。
当我使用或运行cypress时，它会出现以下问题：
TypeScript error: cypress/integration/Google/google.ts(5,3): Error TS2304: Cannot find name 'cy'.
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
如果我删除React父文件夹中的tsconfig.json，它修
浏览 3提问于2020-01-16得票数 1
我在index.js文件中得到了这个重复错误：
'default‘被限制为导出名称，不受限制-导出。
页面/ index.js
export { default } from './test';
页面/ test.jsx
import React from 'react';
const Test = () => {
return <div>Test</div>;
};
export default Test;
routes.js
import React from 'react';
import {
浏览 6提问于2022-03-30得票数 0
我试图在我的VS-Code中更改一些不需要的自动格式，但似乎破坏了我的应用程序。我正在删除/重新安装eslint和更漂亮的。当我尝试运行我的启动脚本时，我得到以下错误： ./src/index.js
Line 1:1: Parsing error: 'import' and 'export' may appear only with 'sourceType: module' 我的index.js文件如下所示： ? 我不认为我以前有过这个错误。 我运行了npx eslint --init并设置了我的eslintrc.json文件，如
浏览 99提问于2021-04-06得票数 0
我刚刚使用create-react应用程序创建了一个新的应用程序，eslint给我这个解析错误：‘导入’和‘导出’可能只与'sourceType:模块‘一起出现。
我是新的反应，不知道我做错了什么，尽管应用程序运行良好，我正在使用VS代码编辑器。如何解决这个问题？
浏览 13提问于2018-07-21得票数 6
回答已采纳
我需要帮助处理这个错误，我没有太多的经验，巴贝尔，当我试图运行的JS应用程序，它抛出这个错误。我经历过各种各样的解决办法，但我无法解决。当我从webpack中删除"./src/index.js"时，配置错误就消失了，但是应用程序没有功能。有人知道解决办法吗？
ERROR in ./node_modules/@babel/runtime/regenerator/index.js 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType:
浏览 86提问于2022-11-01得票数 0
每当我在<Form />的输入栏中输入内容时，我都会得到以下错误：warning.js:36 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Form component.。Ref不能很好地工作--每当我提交一个空字段时，控制台就会说这些字段是未定义的。这似乎
浏览 0提问于2017-07-15得票数 0
我使用的是“React路由器-dom”："6.0.2“在React 17中，我使用的是类型记录。我被试着增加路线。但犯了错误
未明错误: ProxyFacade不是组件。的所有组件子组件必须是一个或<React.Fragment>。
我不知道issue.Is是什么，我错过了什么。
App.tsx
import * as React from "react";
import "./index.less";
import { BrowserRouter, Route, Routes } from "react-router-dom"
浏览 3提问于2021-11-19得票数 7
1回答
我在试着弄明白为什么TypeScript没有拿起react的"default export"。例如，在我使用的JavScript文件中：
import React from 'react';
import ReactDOM from 'react-dom';
但在typescript中，我必须使用(在谷歌搜索之后)：
import * as React from "react"
import * as ReactDOM from "react-dom"
在无法导入现有项目并使用VS2k15对其进行编译后，我刚刚开始
浏览 0提问于2016-04-22得票数 0
用于从props中提取主题数据的插值函数会产生一个“在函数上缺少返回类型”。eslint错误。我使用声明合并来输入主题数据，如typescript documentation中所述。合并似乎工作正常，因为props.theme是根据我的声明进行类型化的。 可以通过为插值函数指定返回类型来修复此问题 ${(props): string => props.theme.colors.secondary} 但我不认为这是必要的，因为我已经在类型声明文件中指定了props.theme.colors.secondary的类型。此外，在vs代码错误弹出窗口中，返回类型似乎是已知的(function(
浏览 35提问于2019-09-09得票数 5
回答已采纳
我使用的是TFS 2013和VS 2013。在CI版本中，我希望启用测试影响分析。但是，我使用的是NUnit。可以将NUnit与测试影响分析一起使用吗？
浏览 1提问于2014-01-29得票数 3
我收到下面指定的错误。我不知道我要去哪里wrong.please帮帮我。我也改变了我的webpack配置，我也更新了react-hot-webpack加载器，但我仍然收到这些错误。
提前谢谢。
这些是我得到的错误。
ERROR in ./~/redux-form/lib/reduxForm.js
Module not found: Error: Cannot resolve module 'react-redux' in /home/priyanka/Finalproject/node_modules/redux-form/lib
@ ./~/redux-form/lib/r
浏览 1提问于2017-02-06得票数 6
这是我在.eslintrc.json文件中对eslint的配置：
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion&
浏览 0提问于2017-04-24得票数 5
回答已采纳
1回答
我正在尝试使用Passportjs和NestJS(Fastify作为底层oauth2框架)来设置谷歌HTTP。我无法初始化google auth屏幕，每次尝试时都会出现错误。我已经尝试了几种不同的方法来实现这一点，但是AuthGuard似乎出现了问题，并且每次执行这一步时代码都会中断。我在这里分享了控制器的一个片段，它处理初始化身份验证屏幕的路由。 下面是控制器： import { Controller, Get, Post, Body, UseGuards, Req, Res } from '@nestjs/common';
import { AuthGuard } fro
浏览 26提问于2020-05-02得票数 0
1回答
原子包-已安装
atom-typescriptlanguage-typescript-grammars-onlylinterlinter-eslintlinter-stylelintlinter-ui-defaultprettier-atom
更漂亮-设置：
checkedStylelint集成= checkedEditotConfig集成=未检查的
.eslintrc
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion"
浏览 2提问于2020-07-27得票数 6
回答已采纳
@typescript-eslint/no-unused-vars.有一个问题所以，我们有类型
type SomeType = (name: string) => void;
我们在字符串中有@typescript-eslint/no-unused-vars错误和类型声明，表示“名称”是定义的，但从未使用过。
类型使用示例：
export const LogSomeInfo: SomeType = (name: string) => {
const a = name;
console.log(a);
};
或者：
interface CheckboxPropsTyp
浏览 5提问于2020-09-06得票数 51
回答已采纳
3回答
如何安装Qt
、、、、
我必须在windows上安装Qt才能使用C++创建应用程序。我面临的问题是，在安装qt-win-opensource-4.8.3-vs2008.exe和qt creator之后，很多东西都是突然出现的。在打开qt-creator时，它没有找到任何示例："Examples not found“。同样，Qt creator的菜单栏中也没有分析选项。谁能帮我解决如何在windows上安装Qt SDK和creator。
浏览 0提问于2012-12-04得票数 0
回答已采纳
1回答
我正试图在我的打字稿create-react-app应用程序中添加eslint。我正在使用代码。
我做了：
下载Eslint包在视觉代码下载Eslint包i安装了3个eslint插件
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended"
在应用程序的根文件夹中创建一个类似于此的.eslintrc文件
{
"plugins": [
"react"
],
浏览 1提问于2019-11-12得票数 3
1回答
我刚刚将React项目从javascript转换为类型记录，我有很多实例，在目录中有一个索引文件，并从相应的目录导出所有函数/组件。例如，目录可能如下所示：
components
|--index.js
|--ComponentA
|--ComponentB
|--ComponentC
|...
index.js将包含：
export ComponentA from './ComponentA'
export ComponentB from './ComponentB'
export ComponentC from './ComponentC'
浏览 2提问于2019-12-20得票数 0
我正在使用airbnb-eslint和babel-plugin-module-resolver。在我使用别名导入的每个js文件中都会出现这个错误。 {
"extends": ["plugin:import/errors", "plugin:import/warnings", "airbnb", "airbnb/hooks", "prettier", "plugin:prettier/recommended", "prettier/react", "pl
浏览 82提问于2020-08-16得票数 2
回答已采纳
我对配置更漂亮和eslint有问题。示例函数： const foo = () => {
[1, 2, 3].forEach((element) => {
console.log(element);
});
}; 当我保存时，从元素中删除了圆括号，并收到一个错误：“箭头函数参数周围有一个带大括号的主体。(eslintarrow-parens)。”此问题仅在TypeScript文件中出现。在JavaScript中，括号不会被删除。隐式箭头换行和操作符换行规则也会出现同样的问题。怎样才能让它在TypeScript中工作？ vscode settings.json：
浏览 52提问于2021-04-20得票数 0
1回答
无法查看页面，因为出现错误消息： ? 可以忽略不计的漂亮错误阻塞了页面本身，如何禁用此功能？当前设置： .prettierrc {
"printWidth": 120,
"trailingComma": "all",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"endOfLine": "auto"
} .eslintrc.json {
"parserOptions&#
浏览 10提问于2020-11-28得票数 0
1回答
我正在尝试将样式组件添加到一些react样板代码中。当我加载主页时，我在控制台中得到以下错误： Uncaught TypeError: __webpack_require__.i(...) is not a function
at Object.eval (styled-components.browser.esm.js?60a8:1670)
at eval (313:2534)
at Object.<anonymous> (bundle.js:3837)
at __webpack_require__ (bundle.js:20)
at e
浏览 18提问于2019-02-05得票数 0
回答已采纳
1回答
这段代码工作得很好，看到这个错误总是很烦人。
所以这在很大程度上是巴别塔的一个错误，还有一个问题还没有解决，但目前还没有答案。链接到发布：。
问题是，当您在ReactJs中创建一个类，然后在这个类中创建两个函数时，第一个函数将被着色为一个错误，说明如下：
意外令牌= (null)
第二个函数没有错误，总是第一个。注意，这是箭头函数。
此代码将在安装了babel-崇高包的崇高文本3中完成：
import React, { Component } from 'react';
class MyComponent extends Component {
浏览 0提问于2018-10-16得票数 4
我们必须更新一些依赖项才能切换到Webpack 4，并且在试图将import和require混合在同一个项目中时，webpack会收到警告，浏览器中也会出现错误。
我们有一个非常大的项目(300+文件)，其中一些文件使用var Pkg = require('./fileName');和module.exports = MyComponent，而其他文件使用import Pkg from './fileName'和export default MyComponent，并且不希望每个文件都使用require/module.exports并进行更新。
webpack警
浏览 0提问于2019-05-09得票数 8
回答已采纳
我设置了eslint & eslint-plugin-react。
当我运行ESLint时，linter会返回每个React组件的no-unused-vars错误。
我假设它没有认识到我使用的是JSX或React语法。有什么想法吗？
示例：
app.js
import React, { Component } from 'react';
import Header from './header.js';
export default class App extends Component {
render() {
return (
浏览 24提问于2017-03-01得票数 130
回答已采纳
我的项目中有以下typescript接口： ` export default interface User {
avatar: string;
email: string;
name: string;
} ` 在使用Prettier进行格式化后，ESLint一直告诉我代码末尾缺少分号，现在的格式如下： ` export default interface User {
avatar: string;
cpf: string;
email: string;
name: string;
};;;;;;;;;;; ` 我可以永远保持格式化和保
浏览 40提问于2020-01-17得票数 1
谢谢你花时间阅读这篇文章。
我正在尝试学习使用eslint和AirBnB配置一起使用react的类型记录。像映射对象数组和使用每个对象创建自定义函数组件这样简单的事情给了我下一个错误：
Argument of type '(product: ProductType) => JSX.Element' is not assignable to parameter of type '(value: object, index: number, array: object[]) => Element'.
下面是父组件ProductGrid：
const Pr
浏览 4提问于2021-04-15得票数 0
回答已采纳
使用react-scripts启动react/typescript项目，添加一个具有以下内容的.eslintrc.json文件：
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-es
浏览 3提问于2021-07-08得票数 1
回答已采纳
我用Webpack来捆绑我的ReactJS应用程序。
helloworld.js
import React from 'react';
export default class HelloWorld extends React.Component {
render() {
return <h2>Hello {this.props.name}!</h2>;
}
}
index.js
import ReactDOM from 'react-dom';
import HelloWorld from '.
浏览 3提问于2016-07-06得票数 1
回答已采纳
我正试图为类中从未使用过的方法设置一个简洁的规则。与下面的react组件一样，我有一个从未使用过的方法unUsedMethod，但是eslint没有显示它的错误。
class Sample extends Component {
unUsedMethod() {
console.log('I am never used');
}
render() {
return 'Hello!';
}
}
我的eslint文件看起来像这样
{
"parser": "babel-es
浏览 4提问于2017-10-05得票数 5
回答已采纳
我有一个带有索引器签名的简单类：
class Test {
[key: string]: any
}
它可以由tsc汇编，但在这方面会出现错误：
'key' is not defined. eslint no-undef
(parameter) key: string
下面是.eslintrc.json中的配置。
{
"env": {
"browser": true,
"node": true,
"es2021": true
},
"
浏览 7提问于2021-07-13得票数 0
回答已采纳
我对埃林特有意见。它不适用于VS代码中的app.js (React项目)，但它适用于其他项目文件，..all配置文件是正确的，ESLint库是正确从项目文件夹加载的。，请在这个问题上给我安静的建议，。提前谢谢。
信息- 11:58:44 AM ESLint服务器正在启动信息- 11:58:44 AM ESLint服务器运行在节点v14.16.0信息- 11:58:44 AM ESLint服务器正在运行。信息- 11:58:45 AM ESLint库从:ESLint加载
我的.eslintrc.js
module.exports = {
env: {
browser:
浏览 2提问于2021-08-15得票数 0
1回答
我正在处理一个新的react项目，并在更改另一个文件中的代码之前设置了运行良好的ESlint，现在它给了我一个错误：
Error: Unexpected token 'export'
我刚接触到eslint，所以我使用了所有推荐的默认设置，但是我不太愿意发布它，因为我觉得这可能是我的格式化错误。任何帮助都将不胜感激。
这是我的ESlint文件：
export default{
"env": {
"browser": true,
"es2021": true
},
"e
浏览 0提问于2021-05-08得票数 5
我试图通过定义非常基本的规则，将ESLint集成到我们的反应本机项目中。我从定义semi规则开始。到目前为止，除了有类声明的.js文件之外，一切看起来都很好。如果导入语句不使用分号，semi规则不会抛出警告或错误。
.eslintrc.json
{
"plugins":["react", "react-native"],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures":
浏览 1提问于2019-01-14得票数 2
回答已采纳
我有一个问题，配置Webpack的打字稿和反应。运行NPM脚本后：webpack服务./webpack/webpac.config.ts-打开，控制台中出现以下错误
以下是配置文件：
webpack.config.ts
import path from "path";
import { Configuration, ProvidePlugin } from "webpack";
import * as webPackDevServer from 'webpack-dev-server'
import MiniCssExtractPlu
浏览 3提问于2022-05-24得票数 1
回答已采纳
1回答
当我在我的样式化组件中使用属性时，我总是得到错误，不匹配的属性错误。我使用WebStorm检查器代码工具和ESLint。
这是我的.eslint.json
{
"env": {
"node": true,
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended&
浏览 0提问于2020-09-20得票数 0
我已经创建了一个axios配置文件，它应该支持输入： import axios, { AxiosRequestConfig, AxiosInstance } from 'axios';
const api = axios.create({
baseURL: '/api',
responseType: 'json',
});
export const apiConfig = ({ baseURL, headers }: AxiosRequestConfig): AxiosInstance => axios.create({
浏览 76提问于2020-03-24得票数 0
回答已采纳
我是新来的React Native。我正在开发一个简单的应用程序，但我无法获得Tabs组件来显示。
index.ios.js：
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Index from './app/Index';
export default class App1 extends Component {
render() {
return (
<Index />
浏览 0提问于2017-04-04得票数 0
我有一个项目建立在Node.js，DynamoDB和其他亚马逊网络服务上，部署在无服务器架构上。我还安装了ESLint包。
我收到以下错误：
ESLint: Import and export declarations are not supported yet on Node 8.0.0. (node/no-unsupported-features)
以下是我的项目的详细信息：
Node version: 12.13.0
NPM version: 6.12.0
Serverless version: 1.40.0
ESLint: 6.8.0
我已经通过我的项目节点版本和我的本地版本进行了双重
浏览 72提问于2019-11-21得票数 3
1回答
我已经在我的eslint配置中安装了airbnb样式指南。因此，对于airbnb，建议对字符串使用单引号。但通过添加插件:更漂亮/推荐在扩展，它禁用单引号。那么，我如何确保规则得到遵守。
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"eslint:recommended",
"airbnb-base",
浏览 2提问于2021-10-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
