Sp-dev-docs: TypeError in plugin 'gulp-cache' - Cannot read property 'toLowerCase' of undefined

[OlivierCC]

Category

• [ ] Question
• [ ] Typo
• [X ] Bug
• [ ] Enhancement / Suggestion
• [ ] Additional article idea

Expected or Desired Behavior

Project must compile after upgrading

Observed Behavior

I upgrade a project from Drop 5 to Drop 6. After the project update, the solution can not compile with the following error:

[07:07:22] Using gulpfile C:\Oliv\AkinCode\sp-client-custom-fields\gulpfile.js
[07:07:22] Starting gulp
[07:07:22] Starting 'serve'...
[07:07:22] Starting subtask 'pre-copy'...
[07:07:22] Finished subtask 'pre-copy' after 548 ms
[07:07:22] Starting subtask 'copyStaticAssets'...
[07:07:22] Starting subtask 'sass'...
[07:07:33] Finished subtask 'sass' after 11 s
[07:07:33] Starting subtask 'tslint'...
[07:07:33] Starting subtask 'typescript'...
[07:07:33] [typescript] Using custom version: 2.0.10
[07:07:33] Finished subtask 'copyStaticAssets' after 11 s
[07:07:37] Error - 'tslint' sub task errored after 3.43 s
 TypeError in plugin 'gulp-cache'
Message:
    Cannot read property 'toLowerCase' of undefined
[07:07:37] 'serve' errored after 15 s
[07:07:37]
[07:07:45] ==================[ Finished ]==================
Error - 'tslint' sub task errored after 3.43 s
 TypeError in plugin 'gulp-cache'
Message:
    Cannot read property 'toLowerCase' of undefined
[07:07:46] Project sp-client-custom-fields version: 1.0.5
[07:07:46] Build tools version: 0.11.1
[07:07:46] Node version: v4.5.0
[07:07:46] Total duration: 59 s
[07:07:46] Task errors: 1

Steps to Reproduce

I am not able to reproduce it with a new project, only the updated one. I also tried to replace the content of the tslint.json file with a new one extracted from a blank project, but it didn't work.

I'm developping with Visual Studio Code on Windows 10.

[andrewconnell]

That error looks like a dependency changed within the build toolchain.

Did you try deleting node_modules and rerunning npm install ? That will refresh all your dependencies.

If that doesn't work, compare the version numbers within the dependencies and devDependencies within the package.json file.

[OlivierCC]

Thanks a lot Andrew for your answer.

Yes I deleted the node_modules and rerunned npm install.

This is the content of my package.json file:

{
  "name": "sp-client-custom-fields",
  "version": "1.0.5",
  "private": false,
  "engines": {
    "node": ">=0.10.0"
  },
  "dependencies": {
    "@microsoft/sp-client-base": "~0.5.1",
    "@microsoft/sp-client-preview": "~0.7.1",
    "@microsoft/sp-module-loader": "^0.5.1",
    "@microsoft/sp-webpart-base": "^0.2.1",
    "office-ui-fabric-react": "0.52.2",
    "react": "0.14.8",
    "react-cartographer": "^0.4.2",
    "react-dom": "0.14.8"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~0.8.1",
    "@microsoft/sp-module-interfaces": "~0.5.1",
    "@microsoft/sp-webpart-workbench": "~0.6.1",
    "gulp": "~3.9.1"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp nuke",
    "test": "gulp test"
  }
}

Do you identify something wrong ? Thanks again for your help

[waldekmastykarz]

If I scaffold a new project using drop 6 I'm getting office-ui-fabric-react version 0.36.0 rather than 0.52.2 that you're using

[andrewconnell]

Try removing this line, blow away the node_modules folder and rerun.

"@microsoft/sp-module-loader": "^0.5.1"

If you do a new yo @microsoft/sharepoint, you don't see this listed.

Also verify the version of office-ui-fabric-react... your version looks much higher than what's you get when creating a new project.

[waldekmastykarz]

Btw. you might also want to do gulp nuke to remove intermediate files generated during builds on the older drop.

[OlivierCC]

Thanks Andrew & Waldek.

Unfortunately, I tried the 2 options (change the version of office-ui-fabric and remove sp-module-loader) and I still have the same error. Every time I deleted the node_modules directory, restart npm install and gulp nuke.

My package.json:

{
  "name": "sp-client-custom-fields",
  "version": "1.0.5",
  "private": false,
  "engines": {
    "node": ">=0.10.0"
  },
  "dependencies": {
    "@microsoft/sp-client-base": "~0.5.1",
    "@microsoft/sp-client-preview": "~0.7.1",
    "@microsoft/sp-webpart-base": "^0.2.1",
    "office-ui-fabric-react": "0.36.0",
    "react": "0.14.8",
    "react-cartographer": "^0.4.2",
    "react-dom": "0.14.8"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~0.8.1",
    "@microsoft/sp-module-interfaces": "~0.5.1",
    "@microsoft/sp-webpart-workbench": "~0.6.1",
    "gulp": "~3.9.1"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp nuke",
    "test": "gulp test"
  }
}

and the compilation output:

Build target: DEBUG
[16:23:46] Using gulpfile C:\Oliv\AkinCode\sp-client-custom-fields\gulpfile.js
[16:23:46] Starting gulp
[16:23:46] Starting 'serve'...
[16:23:46] Starting subtask 'pre-copy'...
[16:23:46] Finished subtask 'pre-copy' after 436 ms
[16:23:46] Starting subtask 'copyStaticAssets'...
[16:23:46] Starting subtask 'sass'...
[16:23:55] Finished subtask 'sass' after 8.72 s
[16:23:55] Starting subtask 'tslint'...
[16:23:55] Starting subtask 'typescript'...
[16:23:55] [typescript] Using custom version: 2.0.10
[16:23:55] Finished subtask 'copyStaticAssets' after 8.91 s
[16:23:58] Error - 'tslint' sub task errored after 3.13 s
 TypeError in plugin 'gulp-cache'
Message:
    Cannot read property 'toLowerCase' of undefined
[16:23:58] 'serve' errored after 12 s
[16:23:58]
[16:24:05] Error - typescript - src\PropertyFieldRichTextBox.ts(17,26): error TS2307: Cannot find module '@microsoft/sp-module-loader'.
[16:24:05] Error - typescript - src\PropertyFieldSliderRange.ts(17,26): error TS2307: Cannot find module '@microsoft/sp-module-loader'.
[16:24:06] ==================[ Finished ]==================
Error - 'tslint' sub task errored after 3.13 s
 TypeError in plugin 'gulp-cache'
Message:
    Cannot read property 'toLowerCase' of undefined
Error - typescript - src\PropertyFieldRichTextBox.ts(17,26): error TS2307: Cannot find module '@microsoft/sp-module-loader'.
Error - typescript - src\PropertyFieldSliderRange.ts(17,26): error TS2307: Cannot find module '@microsoft/sp-module-loader'.
[16:24:06] Project sp-client-custom-fields version: 1.0.5
[16:24:06] Build tools version: 0.11.1
[16:24:06] Node version: v4.5.0
[16:24:06] Total duration: 55 s
[16:24:06] Task errors: 3

[waldekmastykarz]

Have you tried running gulp bundle --verbose to see if you can get any more info about the error? And apparently you indeed need the reference to @microsoft/sp-module-loader so you can add it back.

[frankchen76]

Normally, when you reference a external JavaScript lib which requires a css. you need to call ModuleLoader.loadCss() to load it. "@microsoft/sp-module-loader" is the module for that purpose. if you found out you need to reference external JavaScript for this scenario, you probably need to add "@microsoft/sp-module-loader": "node_modules/@microsoft/sp-module-loader/dist/sp-module-loader.js", in your config.json to be able to use that. I see you add that in your package.json, tried to add above into your config.json to see if it works.

[chakkaradeep]

May be @iclanton can help :)

[OlivierCC]

Here my output with gulp bundle --verbose:

Build target: DEBUG
Found config file: config.json
Found config file: tslint.json
Found config file: serve.json
Found config file: deploy-azure-storage.json
Found config file: package-solution.json
Found config file: prepare-deploy.json
Found config file: write-manifests.json
[07:28:47] Using gulpfile C:\Oliv\AkinCode\sp-client-custom-fields\gulpfile.js
[07:28:47] Starting gulp
[07:28:47] Starting 'bundle'...
[07:28:47] Starting subtask 'pre-copy'...
[07:28:47] Finished subtask 'pre-copy' after 60 ms
[07:28:47] Starting subtask 'copyStaticAssets'...
[07:28:47] Starting subtask 'sass'...
[07:28:49] Finished subtask 'sass' after 1.37 s
[07:28:49] Starting subtask 'tslint'...
[07:28:49] Starting subtask 'typescript'...
[07:28:49] [typescript] Using custom version: 2.0.10
[07:28:49] Finished subtask 'copyStaticAssets' after 1.52 s
[07:28:49] [tslint] C:\Oliv\AkinCode\sp-client-custom-fields\src\PropertyFieldMaskedInputHost.tsx
[07:28:49] Error - 'tslint' sub task errored after 871 ms
 TypeError in plugin 'gulp-cache'
Message:
    Cannot read property 'toLowerCase' of undefined
TypeError: Cannot read property 'toLowerCase' of undefined
    at ReactA11yImageButtonHasAltWalker.validateOpeningElement (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint-microsoft-contrib\reactA11yImageButtonHasAltRule.js:58:77)
    at ReactA11yImageButtonHasAltWalker.visitJsxSelfClosingElement (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint-microsoft-contrib\reactA11yImageButtonHasAltRule.js:48:14)
    at ReactA11yImageButtonHasAltWalker.SyntaxWalker.visitNode (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:354:22)
    at C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:459:63
    at visitEachNode (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\typescript\lib\typescript.js:7255:30)
    at Object.forEachChild (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\typescript\lib\typescript.js:7559:21)
    at ReactA11yImageButtonHasAltWalker.SyntaxWalker.walkChildren (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:459:12)
    at ReactA11yImageButtonHasAltWalker.SyntaxWalker.visitJsxElement (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:127:14)
    at ReactA11yImageButtonHasAltWalker.visitJsxElement (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint-microsoft-contrib\reactA11yImageButtonHasAltRule.js:45:42)
    at ReactA11yImageButtonHasAltWalker.SyntaxWalker.visitNode (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:348:22)
    at C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:459:63
    at visitNode (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\typescript\lib\typescript.js:7243:20)
    at Object.forEachChild (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\typescript\lib\typescript.js:7377:24)
    at ReactA11yImageButtonHasAltWalker.SyntaxWalker.walkChildren (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:459:12)
    at ReactA11yImageButtonHasAltWalker.SyntaxWalker.visitNode (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:453:22)
    at C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:459:63
    at visitNode (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\typescript\lib\typescript.js:7243:20)
    at Object.forEachChild (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\typescript\lib\typescript.js:7449:24)
    at ReactA11yImageButtonHasAltWalker.SyntaxWalker.walkChildren (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:459:12)
    at ReactA11yImageButtonHasAltWalker.SyntaxWalker.visitReturnStatement (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:184:14)
    at ReactA11yImageButtonHasAltWalker.SyntaxWalker.visitNode (C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:408:22)
    at C:\Oliv\AkinCode\sp-client-custom-fields\node_modules\@microsoft\sp-build-web\node_modules\@microsoft\gulp-core-build-typescript\node_modules\tslint\lib\language\walker\syntaxWalker.js:459:63

[OlivierCC]

For information, the content of the PropertyFieldMaskedInputHost.tsx is available here: https://github.com/OlivierCC/sp-client-custom-fields/blob/master/src/PropertyFieldMaskedInputHost.tsx

[OlivierCC]

OK, I fixed it: In one of my TSX files, a type="tel" attribute on input control was the reason. When I removed it, the compilation is OK.

May be a bug to fix because the tel value is correct with HTML5 (http://www.w3schools.com/html/html_form_input_types.asp) ?

Thanks again for your help Waldek & Andrew and others, I appreciate a lot.

[waldekmastykarz]

The question is what's causing that bug exactly: is it React, TypeScript or SPFx? Have you tried building a vanilla React/TypeScript project and see if the same TSX would work there?

[OlivierCC]

I think that the bug come from a missing literal or label in the tslint-microsoft-contrib. In the reactA11yImageButtonHasAltRule.js file, the code failed on this line:

if (!typeAttribute || JsxAttribute_1.getStringLiteral(typeAttribute).toLowerCase() !== 'image')

The typeAttribute is the value of "type" on the HTML control. So I think that the "tel" value is missing is the string literal collection used by JsxAttribute_1.getStringLiteral

[chakkaradeep]

@OlivierCC glad to see you are unblocked now. If so, can you close this issue? If you feel this is a bug in the tools/framework, please let us know!

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues