“找不到模块 './style' 或其相应的类型声明”错误,打字稿 linter
Posted
技术标签:
【中文标题】“找不到模块 \'./style\' 或其相应的类型声明”错误,打字稿 linter【英文标题】:"Cannot find module './style' or its corresponding type declarations" error, typescript linter“找不到模块 './style' 或其相应的类型声明”错误,打字稿 linter 【发布时间】:2021-05-03 21:31:43 【问题描述】:我正在使用 css-modules
和 gatsby-config.js
构建一个 Gatsby 项目,我在其中解决了一个 .scss
扩展。
它可以构建并且效果很好,但是我的 linter 不同意这一点,当我尝试导入这样的样式:
如果我从 js/ts/jsx/tsx 文件导入,则不会出现错误,但是当我尝试导入样式(或图像)之类的模块时,如果没有适当的扩展名,则会触发此错误。
我已经尝试将扩展声明为项目根目录中“typings”文件夹中的模块,例如“声明模块“*.scss””,但没有成功。
我的gatsby-config.js
const path = require('path');
const isDev = process.env.NODE_ENV === 'development';
module.exports =
siteMetadata:
title: 'Title from siteMetadata',
,
plugins: [
resolve: `gatsby-plugin-sass`,
options:
cssLoaderOptions:
sourceMap: isDev,
modules:
mode: 'local',
localIdentName: '[local]--[hash:base64:5]',
,
,
,
,
resolve: 'gatsby-plugin-alias-imports',
options:
alias:
'@containers': path.resolve(__dirname, 'src/containers'),
'@components': path.resolve(__dirname, 'src/components'),
'@pages': path.resolve(__dirname, 'src/pages'),
,
extensions: ['.js', '.jsx', '.ts', '.tsx', '.css', '.scss'],
,
,
],
;
我的tsconfig.json
"compilerOptions":
"strict": true,
"outDir": "./build/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths":
"@containers/*": ["src/containers/*"],
"@components/*": ["src/components/*"],
"@pages/*": ["src/pages/*"]
我的.eslintrc.js
module.exports =
env:
browser: true,
es2020: true,
,
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'airbnb',
'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions:
ecmaFeatures:
jsx: true,
,
ecmaVersion: 11,
sourceType: 'module',
,
plugins: ['react', '@typescript-eslint', 'prettier'],
rules:
'prettier/prettier': ['error'],
indent: ['error', 2],
'no-unused-vars': 'warn',
'import/no-unresolved': 'off',
'import/extensions': 'off',
'react/prop-types': 'off',
'react/jsx-props-no-spreading': 'off',
'react/jsx-filename-extension': [
'error',
extensions: ['.js', '.jsx', '.ts', '.tsx'],
,
],
,
;
感谢您的帮助。至少,也许有一些方法可以关闭这个 ts-rule?
【问题讨论】:
【参考方案1】:在根目录下创建一个文件 next-env.d.ts 并将以下语句添加到该文件中
declare module '*.css'
在添加上述语句之前
添加语句后
【讨论】:
那么奇怪的是,如果我关闭 next.env.d.ts 文件,我会再次收到错误消息。这有什么意义? @loekTheDreamer 你找到解决方案了吗? @Christian 还没有,我正在使用 require,很烦人。 @loekTheDreamer 制作一个 jsconfig.json。 code.visualstudio.com/docs/languages/jsconfig 确保 include 属性指向包含 next-env.d.ts 的目录(所以 root,“*/”)【参考方案2】:如果你的目录结构是src/style/**/*.scss
在tsconfig.json
文件中将"baseUrl": "."
更改为"baseUrl": "src"
。
或更新tsconfig.json
“.scss”类型在哪里定义。
"include": [
"./typings/type.d.ts",
],
【讨论】:
不幸的是,这没有帮助。我的目录结构就像src/components/some-component/style.scss
@tjnk24 尝试将import style from './style'
更改为import style from './style.scss'
。
这就是问题的重点。我配置了 gatsby,就像我不需要显式编写扩展一样,在 gatsby-plugin-alias-imports
选项中使用“resolve-extensions”数组。而且效果很好。我想要的是摆脱那个虚假的错误。
@tjnk24 更新答案,你可以试试。
仍然不起作用,我已经有一个带有 extensions.d.ts 的文件夹“typings”,我在其中声明扩展名如下:declare module '*.scss' const value: Record<string, string>; export default value;
当我使用显式编写的扩展,例如 import style from './style.scss';
,但不是没有它。以上是关于“找不到模块 './style' 或其相应的类型声明”错误,打字稿 linter的主要内容,如果未能解决你的问题,请参考以下文章