TypeScript relative path import not working in Webpack

Question

I imported a module in TypeScript using a relative path.

// index.ts
import {Widget} from './components/Widget';

Webpack gives me the following error:

ERROR in ./src/index.ts
Module not found: Error: Can't resolve './components/Widget' in 
C:\project\src' @ ./src/index.ts 4:19-51

My webpack config file is pretty basic, with the ts-loader in the rules and pointing to index.ts as the entry file.

What am I doing wrong here?

Additional information:

Project folder structure:

c:\project
├─ src
│  ├─ index.ts
│  └─ components
│     └─ Widget.ts
├─ webpack.config.js
└─ tsconfig.json

Webpack config:

const path = require('path');

const config = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader' }
    ]
  }
};

module.exports = config;

tsconfig.json

{
    "compilerOptions": {
        "outDir": "dist",
        "module": "commonjs",
        "target": "es6"
    },
    "include": [ "src/**/*" ],
    "exclude": [
        "node_modules"
    ]
}

Versions:

webpack 3.1.0
typescript 2.4.1
ts-loader 2.2.2

@Saravana I've added the info to the project structure in the answer. — fafaro
– fafaro, Commented Jul 31, 2017 at 4:43
Can you post your tsconfig.json? This should work as long as you don't have any path mapping in your tsconfig.json. — Saravana
– Saravana, Commented Jul 31, 2017 at 7:27
@Saravana Add tsconfig. The project builds perfectly find with the TypeScript compiler (tsc). — fafaro
– fafaro, Commented Aug 1, 2017 at 3:28
did you export Widget class in Widget.ts?also i which file are you trying to import your class ? — Faizal Shap
– Faizal Shap, Commented Aug 1, 2017 at 3:41

fafaro · Accepted Answer · 2017-08-01 14:50:39Z

13

Add resolve.extensions to your webpack.config.js.

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

Module resolution in webpack defaults to searching only for .js and .json files when you write an extension-less import in one of your modules (ref).

So when you write:

import {Widget} from './components/Widget';

Webpack only searches for these files by default:

./components/Widget.js
./components/Widget.json

and thus ends up giving the Module not found error.

answered Aug 1, 2017 at 14:50

fafaro

1,0691 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript relative path import not working in Webpack

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related