Error when import some type from another package

[edelgarat]

I have an issue, when I import some type from package (linked or regular) problem like: can't resolve "path/to/my/node_modules/module" or "my type" is not exported from 'path/to/my/module'.

Error:

[email protected] start /Users/edelgarat/Documents/projects/babel-ts-decorator-error webpack

[webpack-cli] Compilation finished asset bundle.js 59 KiB [emitted] (name: main) runtime modules 1.13 KiB 5 modules cacheable modules 52 KiB ./src/index.ts 1.95 KiB [built] [code generated] ./node_modules/reflect-metadata/Reflect.js 50 KiB [built] [code generated]

ERROR in ./src/index.ts 10:0-73 Module not found: Error: Can't resolve 'test-package/file-with-declaration' in '/Users/edelgarat/Documents/projects/babel-ts-decorator-error/src'

webpack 5.6.0 compiled with 1 error in 631 ms npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: webpack npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/edelgarat/.npm/_logs/2020-11-22T18_10_36_504Z-debug.log

Notes:

1. When i remove 'babel-plugin-transform-typescript-metadata', this problem is missing
2. When i remove "@decorator", this problem is missing

---

Entry point file:

import {SomeTypeDeclaration} from "test-package/file-with-declaration";

const someDecorator: PropertyDecorator = (target, propertyKey) => {}

class Test {
	@someDecorator
	someProperty: SomeTypeDeclaration = 5;
}

Error:

Module not found: Error: Can't resolve 'test-package/file-with-declaration' in '/Users/edelgarat/Documents/projects/babel-ts-decorator-error/src'

Webpack babel rule:

{
	test: /\.ts$/,
	use: {
		loader: "babel-loader",
		options: {
			presets: [
				["@babel/preset-typescript", {}]
			],
			plugins: [
				["@babel/plugin-proposal-decorators", { "legacy": true }],
				["@babel/plugin-proposal-class-properties", { "loose" : true }],
				"babel-plugin-transform-typescript-metadata",
			]
		}
	}
}

---

Demo project: https://github.com/edelgarat/babel-plugin-transform-typescript-metadata-import-error

Test stand:

• Mac OS 10.15.4
• Node v14.2.0

[leonardfactory]

In your tsconfig.json I can see "include": ["src"], which doesn't allow TS to recognize files in test-package as importable files.

[edelgarat]

Removed the "include" field. Nothing has changed, because "test-package" is linked - located in "node_modules -> test_package (symlink)" I updated the repository and you can try again

[KirillStub]

I having some error.

export class UsersStore {
  @observable
  filters: UsersFilters = {
    person_type: 'STAFF',
    is_fired: false,
  };
}

Attempted import error: 'UsersFilters' is not exported from '../models/users'.

[edelgarat]

I updated the repository to see the problem better

new code:

import { IKeyValueMap } from "mobx/lib/types/observablemap";

class myClass {
	@observable
	a: IKeyValueMap = {};
}

new error:

ERROR in ./src/index.ts 11:0-60
Module not found: Error: Can't resolve 'mobx/lib/types/observablemap'

if you compile through typescript, then for the property "a" property this will be:

__decorate([
    mobx_1.observable,
    __metadata("design:type", Object)
], B.prototype, "a", void 0);

but, as I understand it, this plugin (or babel) thinks that "IKeyValueMap" is an entity that can be accessed from js

[PaperPlane01]

Is there any solution for this? I wanted to try tsyringe library in my React project and faced the same issue after adding this plugin.

[leonardfactory]

Using values as types seems an issue linked to #46. Could you try to use import type { ... } in order to give babel a hint? Since we don't have access to TS Checker, type information is not accessible so we cannot distinguish between interfaces and concrete types.