Definitelytyped: Não é possível encontrar o módulo 'csstype'

Criado em 7 abr. 2018  ·  21Comentários  ·  Fonte: DefinitelyTyped/DefinitelyTyped

Olá, estou tentando usar o react with typescript, instalei ( react , react-dom ), ( @types/react , @types/react-dom ), na tentativa de lançar o projeto Recebo o erro ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:55:22 Cannot find module 'csstype' . Tentei npm i csstype em @types/react e na raiz do projeto. Também apesar do erro, no módulo @types/react existe a pasta node_modules / csstype, então eu nem sei porque esse erro acontece.

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./build/", // path to output directory
        "strictNullChecks": true, // enable strict null checks as a best practice
        "module": "es6", // specify module code generation
        "jsx": "react", // use typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true, // allow a partial TypeScript and JavaScript codebase

        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
    },
    "exclude": [
        "node_modules"
    ],
    "include": [
        "./source/**/*.tsx",
        "./source/**/*.ts"
    ]
}

package.json

{
  "name": "suggestion-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "webpack:server": "babel-node node_modules/.bin/webpack-dev-server --mode=development"
  },
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1"
  },
  "devDependencies": {
    "@types/react": "^16.3.5",
    "@types/react-dom": "^16.0.4",
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "caniuse-lite": "^1.0.30000697",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "file-loader": "^1.1.11",
    "glob": "^7.1.2",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^2.1.3",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "script-ext-html-webpack-plugin": "^2.0.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.1"
  }
}

source / index.ts

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles/main.css';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

SO: Ubuntu 17.10

Comentários muito úteis

Experimente compilerOptions.moduleResolution: "node"


(Editar por Orta: se você está vendo isso dentro do DefinitelyTyped, precisa executar npm install na dependência onde está vendo esse erro. Por exemplo, cd types/react; npm install e a listagem deve ser melhor - consulte https: //github.com/microsoft/dtslint/issues/226)

Todos 21 comentários

Experimente compilerOptions.moduleResolution: "node"


(Editar por Orta: se você está vendo isso dentro do DefinitelyTyped, precisa executar npm install na dependência onde está vendo esse erro. Por exemplo, cd types/react; npm install e a listagem deve ser melhor - consulte https: //github.com/microsoft/dtslint/issues/226)

Eu também tive esse erro.

moduleResolution: true me dá erros - e não está listado nos documentos como um valor válido - mas definir moduleResolution: "node" parece que fez o trabalho 👍 Obrigado!

Desculpe, eu quis dizer "node" 😆 Alterei meu comentário. Ainda bem que ajudou.

Definir "moduleResolution": "node" é útil para mim.

Obrigado Frenic. Funciona para mim também.

Alguém pode fornecer cores sobre o porquê? Existe uma atualização que tornaria essa configuração desnecessária?

Se compilerOptions.module === "AMD" or "System" or "ES6" o padrão para compilerOptions.moduleResolution seria "Classic" , caso contrário é "Node" . Portanto, se você usar uma dessas estratégias de módulo, mas tiver todos os seus pacotes sob node_modules . O compilerOptions.moduleResolution deve ser definido como "Node" .

Por Classic :

Para importações de módulos não relativos, no entanto, o compilador sobe na árvore de diretórios começando com o diretório que contém o arquivo de importação, tentando localizar um arquivo de definição correspondente.

Por Node :

O Node irá procurar seus módulos em pastas especiais denominadas node_modules. Uma pasta node_modules pode estar no mesmo nível do arquivo atual ou acima na cadeia de diretórios. O Node percorrerá a cadeia de diretórios, examinando cada node_modules até encontrar o módulo que você tentou carregar.

( fonte )

"module": "commonjs" corrigiu este problema para mim, experimente.

Para aqueles que usam a resolução de módulo classic que _não_ querem mudar para a resolução de módulo node , consegui contornar esse problema adicionando uma entrada paths para csstype em meu tsconfig.json , já que meu projeto está usando a opção de configuração baseUrl . Consulte a documentação do baseUrl para obter mais detalhes.

Obviamente, esta não é uma abordagem escalonável se você tiver muitos conflitos como este, mas este foi o nosso primeiro e pelo menos nos deu algum tempo se quisermos considerar a mudança para a resolução de módulo node .

Eu estava correndo para isso também.

Via WebPack + TypeScript

Module not found: Error: Can't resolve 'csstype' 

O que consertou para mim, que provavelmente é muito hackey, mas a partir do TS 2.9 você pode import() types (https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript -2-9 / # import-types), então fiz isso e agora ele compila sem reclamar:

type VisibilityProperty = import('csstype').VisibilityProperty;
type AnimationProperty = import('csstype').AnimationProperty;

Oi. Obrigado pela sugestão aqui de definir compilerOptions.moduleResolution: "node" .
No entanto, infelizmente, o moduleResolution já está definido como "nó" quando criei o projeto usando create-react-app-typescript, mas ainda estou vendo o problema.

Vou continuar verificando, mas seria ótimo se alguém já soubesse a resposta e pudesse me dizer como corrigi-lo :-)

ATUALIZAÇÃO: desculpe, é minha configuração incorreta - há um tsconfig.test.json que tem o módulo definido como commonjs e adicionar "moduleResolution": "node" parece ter corrigido.

Estou verificando types/react-tag-autocomplete e executando npm run lint react-tag-autocomplete . Obtendo o mesmo erro, error TS2307: Cannot find module 'csstype' .

Após adicionar "moduleResolution": "node", em compilerOptions de react-tag-complete 's tsconfig.json , dá o erro: Error: Unexpected compiler option moduleResolution .

Qualquer ajuda?

Isso me deixou louco tentando criar uma definição de tipo que dependesse de reação. Acontece que a biblioteca csstype tem suas próprias definições de TS, que, portanto, não estão presentes no diretório /types deste repo. Eu criei um problema no dtslint para resolver isso:

https://github.com/Microsoft/dtslint/issues/226

Para mim, definir o parâmetro moduleResolution não funcionou, então executei manualmente a solução que @mike-marcacci já havia sugerido no PR que ele levantou no repo dtslint :

cd types/react
npm i

@ Rahul-Sagore Estou recebendo o mesmo erro que você. Você já descobriu como resolver isso?

@mcmar Não.

@ Rahul-Sagore Estou recebendo o mesmo erro que você. Você já descobriu como resolver isso?

Você deve instalar dependências de types/react e isso funcionará :)

conforme indicado nesta resposta https://github.com/DefinitelyTyped/DefinitelyTyped/issues/24788#issuecomment -495861835

Eu também tenho esse problema.

  1. Configurando "moduleResolution": "node", me dê o erro Error: Unexpected compiler option moduleResolution
  2. Eu tentei
    cd types\react
    npm i

Em seguida, executar npm run lint <my-package> me mostra uma grande quantidade de erros com csstype como

../react/node_modules/csstype/index.d.ts(2071,31): error TS1005: '(' expected.
../react/node_modules/csstype/index.d.ts(2083,19): error TS2693: 'LetterSpacingProperty' only refers to a type, but is being used as a value here.
../react/node_modules/csstype/index.d.ts(2083,49): error TS1005: '(' expected.
../react/node_modules/csstype/index.d.ts(2096,15): error TS2693: 'LineBreakProperty' only refers to a type, but is being used as a value here.

E várias centenas de linhas semelhantes

Mesmo erro que @ fyodore82 após realizar as etapas 1/2

Resolva escrevendo "nó" com "N" maiúsculo:

"moduleResolution": "Node"

Funciona do nosso lado.

https://www.typescriptlang.org/docs/handbook/compiler-options.html

A solução "moduleResolution": "Node" não corrigiu para mim, mas ir para o diretório /types/react e executar npm install resolveu o problema.

Esta página foi útil?
0 / 5 - 0 avaliações