Reactjs ESLint出现问题,尝试使用export*语法时作出反应/TS
是否可以在react/typescript中使用带有绝对导入路径和eslint的Reactjs ESLint出现问题,尝试使用export*语法时作出反应/TS,reactjs,typescript,eslint,Reactjs,Typescript,Eslint,是否可以在react/typescript中使用带有绝对导入路径和eslint的export*from./X'?我希望在components文件夹中有一个index.ts文件,可以导出其他所有内容,但当我尝试这样做时,eslint给了我一个奇怪的错误 我当前的结构如下所示: src/components/Example1/Example1.tsx src/components/index.ts 两个索引文件都给出了错误信息: 0:0错误分析错误:无法读取未定义的属性“name” 另外,当我尝试使
export*from./X'
?我希望在components文件夹中有一个index.ts文件,可以导出其他所有内容,但当我尝试这样做时,eslint给了我一个奇怪的错误
我当前的结构如下所示:
src/components/Example1/Example1.tsx
src/components/index.ts
两个索引
文件都给出了错误信息:
0:0错误分析错误:无法读取未定义的属性“name”
另外,当我尝试使用绝对路径从“组件”导入{Example1}从components/index
文件导入任何内容时代码>我有一个错误:
1:43 error Parse errors in imported module 'components': Cannot read property 'name' of undefined (undefined:undefined) import/namespace
1:43 error Parse errors in imported module 'components': Cannot read property 'name' of undefined (undefined:undefined) import/named
这是我的.eslintrc.json
文件
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"root": true,
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:import/warnings",
"plugin:import/errors",
"plugin:import/typescript",
"prettier/@typescript-eslint",
"prettier",
"prettier/react"
],
"plugins": [
"react",
"react-hooks",
"jsx-a11y",
"@typescript-eslint",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
},
"rules": {
"prettier/prettier": "error",
"import/newline-after-import": "error",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"warn",
{ "args": "after-used", "argsIgnorePattern": "^_" }
]
}
}
这是我的tsconfig.json
:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"baseUrl": "./src"
},
"include": ["src"]
}
{
"name": "frontend",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"@material-ui/core": "^4.9.5",
"@material-ui/icons": "^4.9.1",
"@material-ui/styles": "^4.9.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/material-ui": "^0.21.7",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-router-dom": "^5.1.3",
"@types/styled-components": "^5.0.1",
"@types/yup": "^0.26.32",
"apollo-boost": "^0.4.7",
"env-cmd": "^10.1.0",
"formik": "^2.1.4",
"graphql": "^14.6.0",
"i18next": "^19.3.3",
"i18next-browser-languagedetector": "^4.0.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-i18next": "^11.3.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"styled-components": "^5.0.1",
"typescript": "~3.7.2",
"yup": "^0.28.3"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.23.0",
"@typescript-eslint/parser": "^2.23.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"prettier": "^1.19.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:staging": "env-cmd -f .env.staging yarn build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "tsc --noEmit && eslint . --ext .js,.tsx,.ts --max-warnings=0",
"lint:fix": "eslint . --ext .js,.tsx,.ts --fix",
"watch": "react-scripts start",
"deploy": "yarn build && firebase deploy",
"deploy:staging": "yarn build:staging && firebase use staging && firebase deploy"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我当前的package.json
:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"baseUrl": "./src"
},
"include": ["src"]
}
{
"name": "frontend",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"@material-ui/core": "^4.9.5",
"@material-ui/icons": "^4.9.1",
"@material-ui/styles": "^4.9.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/material-ui": "^0.21.7",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-router-dom": "^5.1.3",
"@types/styled-components": "^5.0.1",
"@types/yup": "^0.26.32",
"apollo-boost": "^0.4.7",
"env-cmd": "^10.1.0",
"formik": "^2.1.4",
"graphql": "^14.6.0",
"i18next": "^19.3.3",
"i18next-browser-languagedetector": "^4.0.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-i18next": "^11.3.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"styled-components": "^5.0.1",
"typescript": "~3.7.2",
"yup": "^0.28.3"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.23.0",
"@typescript-eslint/parser": "^2.23.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"prettier": "^1.19.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:staging": "env-cmd -f .env.staging yarn build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "tsc --noEmit && eslint . --ext .js,.tsx,.ts --max-warnings=0",
"lint:fix": "eslint . --ext .js,.tsx,.ts --fix",
"watch": "react-scripts start",
"deploy": "yarn build && firebase deploy",
"deploy:staging": "yarn build:staging && firebase use staging && firebase deploy"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我还使用lerna和Thread工作区来轻松处理MERN应用程序
删除eslint包/configs,节点_模块对我没有帮助,我仍然有
无法读取未定义的属性“name”的错误。这是非常奇怪的,因为在干净的CRA中,一切都正常。我花了4个小时试图解决这个问题,最后使用了一种变通方法,将类型导入到根索引文件中,并将它们重新导出为新类型,但这绝对是一个痛苦的解决方案。我需要保持隔离模块。可能有人有类似的问题?问题是@typescript eslint包,请查看问题以了解更多信息:
快速修复方法是将软件包降级到2.22.0版:
@typescript-eslint/eslint插件
@typescript eslint/parser
@编辑此文件有助于消除lint错误,但我的CRA构建仍在崩溃,我想我将不得不等待包修复您是否尝试过将作为导出*等关键字作为“/Example1”中的示例是的,它给了我:“解析错误:'from'expected.eslint”,超级古怪这与您的问题有关吗?我没有使用默认的导出,所以我想这条规则不可能有帮助,哈,有趣的是,我们都在使用GraphQL/apollo。因此,我修复它的方法是更改导入样式。除了``从`导入{Blah}./Blah'导出{Blah}之外,我没有更好的解决方法````
{
"name": "frontend",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"@material-ui/core": "^4.9.5",
"@material-ui/icons": "^4.9.1",
"@material-ui/styles": "^4.9.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/material-ui": "^0.21.7",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-router-dom": "^5.1.3",
"@types/styled-components": "^5.0.1",
"@types/yup": "^0.26.32",
"apollo-boost": "^0.4.7",
"env-cmd": "^10.1.0",
"formik": "^2.1.4",
"graphql": "^14.6.0",
"i18next": "^19.3.3",
"i18next-browser-languagedetector": "^4.0.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-i18next": "^11.3.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"styled-components": "^5.0.1",
"typescript": "~3.7.2",
"yup": "^0.28.3"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.23.0",
"@typescript-eslint/parser": "^2.23.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"prettier": "^1.19.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:staging": "env-cmd -f .env.staging yarn build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "tsc --noEmit && eslint . --ext .js,.tsx,.ts --max-warnings=0",
"lint:fix": "eslint . --ext .js,.tsx,.ts --fix",
"watch": "react-scripts start",
"deploy": "yarn build && firebase deploy",
"deploy:staging": "yarn build:staging && firebase use staging && firebase deploy"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}