web-dev-qa-db-fra.com

Ligne 0: Erreur d'analyse: impossible de lire la propriété 'carte' de non définie

Commencez actuellement le serveur sur mon côté client, l'erreur ci-dessus est ce que j'ai obtenu. J'utilise documentscript, réagit, Eslint. Je n'arrive pas à aller de l'avant puisque cette erreur me hantait. La page GitHub pour Eslint n'a pas été beaucoup d'aide non plus.

Cette erreur est montée après avoir créé le composant d'usisation d'usage et l'exporté dans l'index.ts, je ne sais pas comment se débarrasser de cette erreur.

Below is my package.json

    {
    "name": "tinyhouse_client",
    "version": "0.1.0",
    "private": true,
      "dependencies": {
      "@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/node": "^12.0.0",
      "@types/react": "^16.9.35",
      "@types/react-dom": "^16.9.0",
      "@TypeScript-eslint/parser": "^3.0.2",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-scripts": "3.4.1",
      "TypeScript": "~2.23.0"
      },
      "resolutions": {
     "@TypeScript-eslint/eslint-plugin": "^2.23.0",
     "@TypeScript-eslint/parser": "^2.23.0",
     "@TypeScript-eslint/TypeScript-estree": "^2.23.0"
     },
     "scripts": {
     "start": "react-scripts start",
     " build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
     },
     "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"
     ]
     },
     **strong text** "proxy": "http://localhost:9000"
      }

Below is my index.ts

    export * from './server';
    export * from './useQuery';
    export * from './useMutation';

And my useMutation.ts

    import { useState } from 'react';
    import { server } from './server';

    interface State<TData> {
    data: TData | null;
    loading: boolean; 
    error: boolean;
    }

    type MutationTuple<TData, TVariables> = [
    (variables?: TVariables | undefined) => Promise<void>,
    State<TData>
    ];

    export const useMutation = <TData = any, TVariables = any>(
    query: string
    ): MutationTuple<TData, TVariables> => { 
    const [state, setState] = useState<State<TData>>({
    data: null,
    loading: false,
    error: false,
    })

    const fetch = async (variables?: TVariables) => {
    try {
      setState({ data: null, loading: true, error: false });

      const { data, errors } = await server.fetch<TData, TVariables>({ query, variables });
      if (errors && errors.length) {
        throw new Error(errors[0].message);
      }

      setState({ data, loading: false, error: false });
    } catch (err) {
      setState({ data: null, loading: false, error: true });
      throw console.error(err);
    }
   }

   return [fetch, state];
};
reactjstypescriptreact-hookseslint
52
Jon Hernandez

Est-ce que cela vient de ESLint-Docscript? Si tel est le cas, vérifiez que votre version de TypeScript n'est pas une construction Dev/Nightly.

0
hanh

A dû ajouter les dépendances manuellement, même lorsqu'il a donné un avertissement d'incompatibilité, car le npm-force-resolutions la solution n'a pas fonctionné pour moi.

  1. Premièrement, je devais ajouter les dépendances suivantes à package.json (dependencies parce que j'utilise Create-React-App, que je n'ai jamais vu à utiliser devDependencies):
"dependencies": {
  "@TypeScript-eslint/eslint-plugin": "^4.1.1",
  "@TypeScript-eslint/parser": "^4.1.1",
}

  1. Ensuite, je fais rm -rf node_modules/ Donc, je peux avoir une installation propre de substances NPM.

  2. Ensuite, installez tout: npm install.

  3. Vérifiez que vous avez la version correcte: npm ls @TypeScript-eslint/eslint-plugin. Ça disait UNMET PEER DEPENDENCY Mais je devais l'ignorer parce que sinon je ne pouvais pas obtenir ce travail.

  4. npm start Pour vous assurer que l'application Create-React fonctionne maintenant.

Je conseillerais d'abord pour la solution de résolution de la force NPM-Force-Resolutions, mais si elle échoue, essayez celui-ci.

Oh, et une note supplémentaire:

Toute cette catastrophe était parce que j'ai fait quelque chose comme ça:

interface SomeInterface {
  someBoolean: boolean,
  someList: number[],
  someTuple: [string, string]  // <-- THIS is the problem
}

Si j'ai supprimé cette ligne commentée, le code compilerait sans problèmes. Je l'ai gardé de cette façon parce que j'avais déjà fait que mon code travailler comme ça, mais si vous évitez simplement d'avoir un tuple à l'intérieur de l'interface (peu importe si elle avait étiquettes ou non), vous pouvez Évitez potentiellement tout ce tracas.

0
Diego M.F.