CODEWITHSUNDEEP
typescriptwebpackimportmodulealias
bmatei
bmatei

Reputation: 13

Issue with alias in TypeScript and Webpack 3

UPDATE: Solved! Thanks to @JulesRandolph for pointing out the circular dependency issue.

I got a quite stupid-ish situation in the project I am developing at the moment. The project is built around latest version of TypeScript, webpack and awesome-typescript-loader.

The tsconfig contains the following aliases:

"paths": {
  "~actions" : [
    "app/actions/index.ts"
  ],
  "~components" : [
    "app/components/index.ts"
  ],
  "~helpers" : [
    "app/helpers/index.ts"
  ],
  "~middlewares" : [
    "app/middlewares/index.ts"
  ],
  "~redux" : [
    "app/redux/index.ts"
  ],
  "~styles/*" : [
    "app/styles/*"
  ],
  "~types" : [
    "app/types/index.ts"
  ]

The Webpack aliases config shows like this (please note that i also tried without $ and adapting tsconfig for that usage (with/*)):

{
  '~actions$': '/Users/user/Workspace/prj-name/app/actions/index.ts',
  '~components$': '/Users/user/Workspace/prj-name/app/components/index.ts',
  '~helpers$': '/Users/user/Workspace/prj-name/app/helpers/index.ts',
  '~middlewares$': '/Users/user/Workspace/prj-name/app/middlewares/index.ts',
  '~redux$': '/Users/user/Workspace/prj-name/app/redux/index.ts',
  '~styles': '/Users/user/Workspace/prj-name/app/styles',
  '~types$': '/Users/user/Workspace/prj-name/app/types/index.ts'
}

My problem is that, specifically and only for the "app/redux/app.ts" file, I cannot import using the following syntax:

import {
  imp1,
  imp2
} from '~redux';

The imports are coming as undefined. I can, however do this:

import {
  imp1
} from './[comp-name]';

In the other folders I can call using the same syntax (and same folder name). Also, from other folders I can call imports from ~redux.

I tried almost everything I knew and nothing changed.

If anyone is interested, here is the (almost) entire Webpack config: https://pastebin.com/gBabDjH9

Upvotes: 1

Views: 1196

Answers (1)

Jules Sam. Randolph
Jules Sam. Randolph

Reputation: 4220

The fact an export is resolved as undefined at runtime might well be orthogonal to your webpack config, and instead be caused by circular dependencies.

To inspect this issue, you could

  1. confirm the same bug occurs with importing from ./index. If it does, there is a good chance it's a circular dependency bug.
  2. run madge on your project to identify this circular dep. Something like madge <myTranspiledFolder> --circular. Make sure the files madge run onto are modularized (madge supports AMD, CommonJS, and ES6 modules) and not yet bundled.

Upvotes: 1

Related Questions