Can't compile projects that import external packages by relative path

[justinfagnani]

TypeScript Version: 2.6.0-dev.20170909

Code

Background: I'm trying to use TypeScript for projects that work with native JS modules that are now supported in Safari and Chrome.

The project layout is like this:

├── package.json
├── src
│   ├── poly-lit-element.ts
│   └── test
│       └── poly-lit-element_test.ts
├── test
└── tsconfig.json

My tsconfig.json is a little unusual, because I'm trying to set up multiple roots that include /node_modules and the advice of @mhegazy, in order to allow importing external packages by relative path (as required by web-compatible modules in the HTML spec):

{
  "compilerOptions": {
    "target": "es2017",
    "module": "es2015",
    "lib": ["es2017", "dom"],
    "declaration": true,
    "sourceMap": true,
    "outDir": "./",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": true,
    "rootDirs": [
      ".",
      "./node_modules",
      "./node_modules/@types"
    ]
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": []
}

In /src/poly-lit-element.ts I import a file from another package via relative path:

import { dedupingMixin } from '../@polymer/polymer/lib/utils/mixin.js';

Expected behavior:

The project compiles

Actual behavior:

Two sets of errors.

One is related to the project setup guessing the wrong source root, and not writing to to the ourDir as I configured it. Instead of writing files from /src/ to /, it's writing them next to their source. I think this is caused by allowJS change the source root detection when I import from other packages. Because of this with allowJS, tsc is trying to write out files from node_modules and complaining when they would overwrite their source:

error TS5055: Cannot write file '/Users/justinfagnani/Projects/Polymer/polymer3/poly-lit/node_modules/@polymer/polymer/lib/mixins/property-accessors.js' because it would overwrite input file.
error TS5055: Cannot write file '/Users/justinfagnani/Projects/Polymer/polymer3/poly-lit/node_modules/@polymer/polymer/lib/utils/async.js' because it would overwrite input file.
error TS5055: Cannot write file '/Users/justinfagnani/Projects/Polymer/polymer3/poly-lit/node_modules/@polymer/polymer/lib/utils/boot.js' because it would overwrite input file.
error TS5055: Cannot write file '/Users/justinfagnani/Projects/Polymer/polymer3/poly-lit/node_modules/@polymer/polymer/lib/utils/case-map.js' because it would overwrite input file.
error TS5055: Cannot write file '/Users/justinfagnani/Projects/Polymer/polymer3/poly-lit/node_modules/@polymer/polymer/lib/utils/mixin.js' because it would overwrite input file.

And another set of errors that I can't use allowJs with declaration:

tsconfig.json(6,5): error TS5053: Option 'allowJs' cannot be specified with option 'declaration'.
tsconfig.json(14,5): error TS5053: Option 'allowJs' cannot be specified with option 'declaration'.

I'd really like to not turn on allowJs, but without it I can't import my dependencies.

[justinfagnani]

I tried changing ./node_modules and ./node_modules/@types to typeRoots and caused a compiler crash. I'll file a separate bug for that.

[j-oliveras]

Allow --declaration with --allowJs already tracked by #7546.

[justinfagnani]

@j-oliveras thanks. Note that in this case I'm only using allowJs because tsc doesn't understand that these paths point to external packages.

[mhegazy]

why do you need --allowJs?

[justinfagnani]

@mhegazy because otherwise tsc won't let me import my dependencies:

import { dedupingMixin } from '../@polymer/polymer/lib/utils/mixin.js';

Produces this error:

src/poly-lit-element.ts(15,31): error TS6143: Module '../@polymer/polymer/lib/utils/mixin.js' was resolved to '/Users/justinfagnani/Projects/Polymer/polymer3/poly-lit/node_modules/@polymer/polymer/lib/utils/mixin.js', but '--allowJs' is not set.

[mhegazy]

The error is not correct. it should be only under --noImplicitAny and it should not include --allowJs as an option.. the whole issue is to tell the user that dedupingMixin is implicitly given the type any.

On a related note, where does the declaration of ../@polymer/polymer/lib/utils/mixin.js live?

[justinfagnani]

There is no declaration of ../@polymer/polymer/lib/utils/mixin.js, it's plain JS coming from an npm package.

[mhegazy]

so you are fine with any?

[justinfagnani]

Yeah, I'll add a declaration then