I'm trying to compile TypeScript using Webpack, but for some reasons it fails on imports:
ERROR in ./path/to/MySource.ts Module not found: Error: Cannot resolve 'file' or 'directory' ./path/to/MyIncludedFile in ...
despite MyIncludedFile.ts is actually there and the IDE can recognise the import too, the TypeScript compiler doesn't find the file.
Running Webpack with --display-error-detail I got some extra information:
/path/to/MyIncludedFile doesn't exist
/path/to/MyIncludedFile.webpack.js doesn't exist
/path/to/MyIncludedFile.web.js doesn't exist
/path/to/MyIncludedFile.js doesn't exist
/path/to/MyIncludedFile.json doesn't exist
because of that, I realised that Webpack wasn't looking for the correct extension, which in my case is .ts.
In order to solve that I modified my webpack.config.js adding the following:
resolve: {
extensions: ['.ts']
}
inside my module configuration. So to be more specific, my module webpack conf now look like this:
module.exports = [
{
entry: /* my entry config */
output: {
/* my output config */
},
module: {
loaders: [
{
test: /\.ts/,
loaders: ['ts-loader']
}
]
},
/* ... other stuff ... */
resolve: {
extensions: ['.ts']
}
},
/* ... other modules ... */
]
I ran into this error, too and also tried it with --display-error-details (in newer webpack versions the parameter has a trailing s!).
Turned out I forgot the dots in my extensions array. Adding them resolved the issue.
resolve: {
extensions: ['.ts', '.tsx', '.js']
// ^ ^ ^
// | | |
// don't forget these dots!
}
Sometimes it's the tiny details and a giant error log that leads to the solution, I guess. Hope it helps someone in the future.
