webentwicklung-frage-antwort-db.com.de

Webpack kann TypeScript-Module nicht auflösen

Ich baue ein Relay-Small-Webpack und eine TypeScript-Demo, um mit ..__ zu spielen. Wenn ich Webpack mit der Datei webpack.config.js starte, erhalte ich diesen Fehler:

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

Ich habe keine Ahnung, was das Problem sein könnte. Der Modulexport sollte korrekt sein.

Ordnerstruktur

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 sucht standardmäßig nicht nach .ts-Dateien. Sie können resolve.extensions konfigurieren, um nach .ts zu suchen. Vergessen Sie nicht, auch die Standardwerte hinzuzufügen. Andernfalls werden die meisten Module beschädigt, da sie darauf angewiesen sind, dass die Erweiterung .js automatisch verwendet wird.

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

Das hier für die Nachwelt zu lassen, aber ich hatte genau das gleiche Problem und mein Problem war, dass mein Eintrittspfad nicht relativ, sondern absolut war. Ich habe den Eintrag geändert von:

entry: 'entry.ts'

zu

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

Ich habe alle oben genannten Vorschläge ausprobiert und es hat immer noch nicht funktioniert.

Am Ende war das kleinste Detail:

In webpack.js anstelle von:

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

Die Bestellung sollte sein:

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

Ich weiß nicht, warum das so wichtig ist, und um ganz ehrlich zu sein, kümmere ich mich an diesem Punkt ...

3
Jonathan

Sie verwenden in tsconfig.js - "module": "commonjs", aber in Ihrem Code verwenden Sie das es6-Modul. Ich denke, Sie sollten "Modul" ändern: "ES6".

0
Slawa Eremkin