Sp-dev-docs: 🐞 tslint-microsoft-contrib missing in dependency chain causing tsline build error when using PNPM (extra work req. for PNPM usage)

[andrewconnell]

Category

• [ ] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Running pnpm install should get all dependencies so when building the project, it builds with no errors.

Observed Behavior

When you run pnpm install, you don't get the tslint-microsoft-contrib package. To get it, you must run pnpm install --shamefully-flatten. This causes a linting error when building:

> gulp build
...
[12:18:50] Error - [tslint] Failed to load /../tslint.json: Could not find custom rule directory: tslint-microsoft-contrib

Ref: https://pnpm.js.org/docs/en/faq.html#pnpm-does-not-work-with-your-project-here

Steps to Reproduce

• create a new project with the SPFx Yeoman generator: yo @microsoft/genereator --skip-install
• run pnpm install
• run gulp build
• observe linting error listed above

• use solution 2 from the PNPM FAQ: run pnpm install --shamefully-flatten

  add --force to rebuild the node_modules folder without having to delete it

• run gulp build

• observe no tslinting errors

Confirmed in SPFx v1.7.0

[patmill]

I noticed this yesterday. It looks like an issue with PNPM itself, as the tslint-microsoft-contrib package is listed as a dependency of the @microsoft/sp-tslint-rules package, but it isn't getting pulled down. We'll reach out to Zoltan and see what's going on. He's normally extremely helpful and responsive.

[andrewconnell]

I noticed that too... but couldn't track down the cause. Wonder if it's an issue between a scoped package referencing an unscoped package?

[patmill]

What version of pnpm are you using? I'm on the latest, but I'm going to downgrade to 2.15.1 and see if it still happens. :( still happens. We're digging in further.

[patmill]

OK, we sorted this out. It sounds like (according to @iclanton ) an issue with tslint, where they don't correctly resolve node dependencies. We're looking at submitting a PR to tslint, but in the meantime if you add "tslint-microsoft-contrib": "5.2.1", as a dev dependency, it should work. We'll look at patching the generator to do that manually if the fix to tslint takes a while to prop.

[andrewconnell]

Great find... thanks @patmill !

[wobba]

If I run

yo @microsoft/sharepoint --skip-install
pnpm install
pnpm install [email protected] --save-dev
gulp

I now get

[13:53:11] Error - [tslint] { Error: Cannot find module 'tslint'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\repos\Demo1\node_modules\.registry.npmjs.org\tslint-microsoft-contrib\5.2.1\node_modules\tslint-m
crosoft-contrib\noFunctionExpressionRule.js:13:12)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3) code: 'MODULE_NOT_FOUND' }

@patmill Do I still need to use flatten, or is what would the proper order of commands be?

[patmill]

@wobba - yeah, looks like that suggestion doesn't work. We'll keep digging into this.

[nickpape]

I filed an issue with pnpm. It does seem to be a pnpm issue. I'll see if I can come up with a workaround.

[nickpape]

~I'm opening a bug with tslint right now, but for now you can work around this using pnpm's --shamefully-flatten feature.~

~I.e. run pnpm install --shamefully-flatten.~

~Until the following issue is fixed: https://github.com/palantir/tslint/issues/4294~

~You can read more about this flag here: https://pnpm.js.org/docs/en/pnpm-install.html#shamefully-flatten~

We found 2 separate issues. The first issue is that tslint is not resolving symlinks correctly. @iclanton has a fix for that he is trying to merge. The second is an unmet peer dependency for tslint-microsoft-contrib on typescript. We plan to fix this issue by updating the dependencies of @microsoft/sp-tslint-rules. Both of those fixes will be included in the next drop of SPFx.

[AJIXuMuK]

With SPFx 1.8.2 I'm getting

Error - [tslint] { Error: Cannot find module 'typescript'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:/Projects/Tests/pnpm/node_modules/.registry.npmjs.org/tslint/5.9.1/node_modules/tslint/lib/language/walker/blockScopeAwareRuleWalker.js:20:10)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3) code: 'MODULE_NOT_FOUND' }

[wobba]

--shamefully-flatten still work as a workaround

[deanbot]

--shamefully-flatten isn't an option with rush however. Adding the packages to each project works with rush.