J'essaie de convertir une application ReactJS fonctionnelle en TypeScript, et j'ai eu des problèmes pour que quelque chose fonctionne correctement.

import React from "react";
import * as ReactDOM from "react-dom";
import Application from "./Application";

console.log(React); // undefined

ReactDOM.render(
    <Application/>, window.document.getElementById("application-wrapper")
);

La console renvoie une erreur à <Application />

Quand j'importe, réagissez comme ça, réagissez aux charges:

import * as React from "react";

Cependant, je souhaite utiliser l'instruction d'importation en utilisant l'exportation par défaut, car j'importe React en utilisant cette syntaxe d'importation dans tous les composants existants:

import React, {Component} from "react";

export default class Whatever extends Component<Props, State> {
...
}

Mon fichier tsconfig.json contient cette ligne permettant des valeurs synthétiques par défaut:

"allowSyntheticDefaultImports": true

Mon fichier webpack.config.js:

let path = require("path");
let config = {
    entry: "./src/main.tsx",
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"]
    },
    module: {
        loaders: [
            {
            test: /\.tsx?$/,
            loader: "ts-loader",
            exclude: /node_modules/
            }
        ]       
    }
};

module.exports = config;

Je ne sais pas ce qui me manque ici ...

2
mwieczorek 26 nov. 2017 à 10:31

3 réponses

Meilleure réponse

La résolution de module est un peu compliquée car Typescript le fait différemment de Babel et Webpack. Si vous voulez en savoir plus, vous pouvez consulter ce commentaire: https: // github. com / Microsoft / TypeScript / issues / 5565 # issuecomment-155216760

Revenant à votre problème, allowSyntheticDefaultImports dit à Typescript d'autoriser les importations par défaut à partir de modules sans exportation par défaut, mais le code émis ne change pas. Pour cette raison, vous devez transférer la responsabilité de la résolution des modules vers Webpack ou Babel.

Pour atteindre cet objectif, définissez moduleResolution sur ES6 dans le fichier de configuration Typescript. Le pipeline ressemblera à ceci:

Code TS => (TypescriptCompiler) => Code JS avec modules ES6 => (Résolveur de modules Webpack) => Code JS

0
niba 28 nov. 2017 à 10:16

Dans votre configuration dactylographiée, c'est-à-dire tsconfig.json "esModuleInterop": true et "allowSyntheticDefaultImports": true. cela vous permettra d'importer des modules CommonJS conformément aux spécifications des modules es6.

4
el-Joft 21 août 2019 à 10:16

Définissez "esModuleInterop": true à la place.

4
Uwe Keim 30 juin 2019 à 09:30
47493958