TYPESCRIPT/材料设计/Webpack:找不到模块&#39; @ material/base&#39;和通用类型&#39; MDCComponent< FoundationType&#39;需要1个类型参数 [英] TYPESCRIPT/Material Design/Webpack : Cannot find module &#39;@material/base&#39; and Generic type &#39;MDCComponent&lt;FoundationType&gt;&#39; requires 1 type argument(s)
问题描述
我有一个新问题.我尝试使用Typescript和Webpack的材质设计(materiel.io).首先，我在npm上安装了资料.然后，在我的一个课程中，我导入@ material/base.
I have a new problem. I try to use material design (materiel.io) with Typescript and Webpack. First, I installed material with npm. Then, in one of my classes, I import @material/base.
'use strict';
import {MDCComponent} from '@material/base';
export default class Component {
MDCComponent: MDCComponent;
constructor() {
this.MDCComponent = undefined;
}
}
在我的编辑器中，我已经收到以下消息:
In my editor, I already have the following message:
找不到模块'@ material/base'.ts(2307)
Cannot find module '@material/base'.ts(2307)
有关信息，我将Visual Studio代码编辑器与eslint一起使用.这是我的eslintrc.json配置文件:
For information, I use visual studio code editor, with eslint. Here is my eslintrc.json configuration file:
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module" }, "env": {
"es6": true,
"browser": true,
"amd": true,
"node": true,
"jest": true }, "globals": {}, "extends": ["eslint:recommended"], "rules": {
"array-bracket-spacing": ["error", "never", {}],
"brace-style": "error",
"camelcase": ["error", { "properties": "never" }],
"comma-dangle": [
"error",
{
"arrays": "never",
"objects": "never",
"imports": "never",
"exports": "never",
"functions": "never"
}
],
"comma-spacing": ["error", { "before": false, "after": true }],
"comma-style": ["error", "last"],
"complexity": ["warn", 7],
"computed-property-spacing": ["error", "never"],
"curly": ["error", "all"],
"dot-notation": ["error", { "allowPattern": "^[a-z]+(_[a-z]+)+$" }],
"eol-last": "error",
"eqeqeq": ["error", "always"],
"for-direction": "off",
"func-call-spacing": ["error", "never"],
"indent": [
"error",
2,
{
"ArrayExpression": "first",
"CallExpression": { "arguments": "first" },
"flatTernaryExpressions": false,
"MemberExpression": 1,
"ObjectExpression": "first",
"outerIIFEBody": 0,
"SwitchCase": 1,
"VariableDeclarator": { "var": 2, "let": 2, "const": 3 }
}
],
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
"keyword-spacing": ["error"],
"linebreak-style": ["error", "unix"],
"max-depth": ["error", 3],
"multiline-comment-style": ["error", "starred-block"],
"no-caller": "error",
"no-cond-assign": ["error", "except-parens"],
"no-console": ["error", { "allow": ["warn", "error"] }],
"no-empty": "error",
"no-loop-func": "error",
"no-mixed-spaces-and-tabs": "error",
"no-multiple-empty-lines": ["error", { "max": 1 }],
"no-multi-str": "error",
"no-new": "error",
"no-self-assign": ["error", { "props": false }],
"no-sequences": "error",
"no-trailing-spaces": "error",
"no-undef": "error",
"no-unreachable": "error",
"no-unsafe-negation": "error",
"no-unused-expressions": ["error", { "allowShortCircuit": true }],
//"no-unused-vars": "error",
"no-unused-vars": "warn",
"no-with": "error",
"object-curly-spacing": ["error", "always"],
"one-var": [
"error",
{ "var": "always", "let": "consecutive", "const": "never" }
],
"one-var-declaration-per-line": ["error", "initializations"],
"operator-linebreak": ["error", "after"],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"semi-spacing": ["error", { "before": false, "after": true }],
"semi-style": ["error", "last"],
"space-before-blocks": ["error", "always"],
"space-before-function-paren": ["error", "never"],
"space-in-parens": ["error", "never"],
"space-infix-ops": "error",
"space-unary-ops": ["error", { "words": true, "nonwords": false }],
"wrap-iife": ["error", "inside", { "functionPrototypeMethods": true }] } }
和tsconfig.json:
and tsconfig.json:
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
然后在编译文件时，出现以下错误消息:
Then when compiling my file, I get the following error message:
TS2314:通用类型"MDCComponent"需要1种类型参数.
TS2314: Generic type 'MDCComponent' requires 1 type argument(s).
我的package.json:
My package.json :
{
"name": "project",
"version": "1.0.0",
"description": "My project",
"main": "index.js",
"scripts": {
"dev": "./node_modules/.bin/cross-env NODE_ENV=dev ./node_modules/.bin/webpack",
"prod": "./node_modules/.bin/webpack",
"hotdev": "./node_modules/.bin/cross-env NODE_ENV=dev ./node_modules/.bin/webpack-dev-server -d --hot --config webpack.config.js --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/runtime": "^7.9.2",
"autoprefixer": "^9.7.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"extract-loader": "^5.0.1",
"file-loader": "^6.0.0",
"handlebars": "^4.7.3",
"handlebars-loader": "^1.7.1",
"html-loader": "^1.0.0",
"material-components-web": "^5.1.0",
"material-design-icons": "^3.0.1",
"node-sass": "^4.13.1",
"npm-check-updates": "^4.0.5",
"postcss-loader": "^3.0.0",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"svg-inline-loader": "^0.8.2",
"ts-loader": "^6.2.2",
"typescript": "^3.8.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
我该怎么办?
非常感谢您.
推荐答案
我发现了我的问题.在我的tsconfig.json文件中，我必须在editorOptions中添加具有 node 值的 moduleResolution 标志:
I found my problem. In my tsconfig.json file, I must add moduleResolution flag with node value, in compilerOptions : https://www.typescriptlang.org/docs/handbook/module-resolution.html
这篇关于TYPESCRIPT/材料设计/Webpack:找不到模块&#39; @ material/base&#39;和通用类型&#39; MDCComponent< FoundationType&#39;需要1个类型参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
