web-dev-qa-db-fra.com

Webpack ne peut pas résoudre les modules TypeScript

Je construis un petit relais Webpack et une démo TypeScript pour jouer avec . Si je lance Webpack avec le fichier webpack.config.js, j’obtiens cette erreur:

ERROR in ./js/app.ts
Module not found: Error: Can't resolve './MyModule' in '/Users/timo/Documents/Dev/Web/02_Tests/webpack_test/js'
 @ ./js/app.ts 3:17-38

Je n'ai aucune idée de ce que le problème pourrait être. L'exportation du module devrait être correcte.

Structure des dossiers

webpack.config.js 

const path = require('path');

module.exports = {
    entry: './js/app.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {test: /\.ts$/, use: 'ts-loader'}
        ]
    }
};

tsconfig.json 

{
  "compilerOptions": {
        "target": "es5",
        "suppressImplicitAnyIndexErrors": true,
        "strictNullChecks": false,
        "lib": [
            "es5", "es2015.core", "dom"
        ],
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "dist"
    },
    "include": [
        "js/**/*"
    ]
}

src/app.js 

import { MyModule } from './MyModule';

let mym = new MyModule();
console.log('Demo');

mym.createTool();
console.log(mym.demoTool(3,4));

src/MyModule.ts

export class MyModule {
   createTool() {
    console.log("Test 123");
  }

   demoTool(x:number ,y:number) {
    return x+y;
  }
};

src/index.html

<html>
    <head>
        <title>Demo</title>
        <base href="/">
    </head>
    <body>
        
        <script src="dist/bundle.js"></script>
    </body>
</html>

javascripttypescriptwebpackts-loader
15
Timo Paul

Webpack ne recherche pas les fichiers .ts par défaut. Vous pouvez configurer resolve.extensions pour rechercher .ts. N'oubliez pas non plus d'ajouter les valeurs par défaut, sinon la plupart des modules se cassent parce qu'ils reposent sur le fait que l'extension .js est automatiquement utilisée.

resolve: {
    extensions: ['.ts', '.js', '.json']
}
46
Michael Jungo

Laissant ceci ici pour la postérité, mais j'avais exactement le même problème et mon problème était que mon chemin d'entrée n'était pas relatif mais absolu. J'ai changé l'entrée de:

entry: 'entry.ts'

à

entry: './entry.ts'
5
Dana Woodman

J'ai essayé toutes les suggestions ci-dessus et cela n'a toujours pas fonctionné.

En fin de compte être le moindre détail:

Dans webpack.js, au lieu de:

resolve: {
  extensions: ['.tsx', '.ts', '.js']
},

La commande devrait être:

resolve: {
  extensions: ['.ts', '.tsx', '.js']
},

Je ne sais pas pourquoi c'est nécessaire, et pour être tout à fait honnête, je ne m'en soucie pas pour l'instant ...

3
Jonathan

Vous utilisez dans tsconfig.js - "module": "commonjs", mais dans votre code, vous utilisez le module es6. Je pense que vous devriez changer le "module": "ES6".

0
Slawa Eremkin