Typescript throws a "Cannot read property 'length' of undefined" when run through gulp

See also questions close to this topic

• How to fetch data from oracle db in excel using office scripts in 'Script Lab'?

  We want to automate reporting in excel which includes

  1. Taking input from user about table name from oracle db
  2. Fetch the table in different worksheet of the same excel using Script Lab.

  I'm writing code in script lab but getting error when referencing 'require' library in script tab on line

  const oracledb = require("oracledb");
  

  in Libraries I have added as below

  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  
  @types/office-js
  
  @types/requirejs
  
  @types/oracledb
  
  office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
  
  office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css
  
  @types/node
  
  core-js@2.4.1/client/core.min.js
  
  @types/core-js
  
  jquery@3.1.1
  
  @types/jquery@3.3.1
  

  Getting the error as require is not defined
• How can i reset text in contentEditable use by useRef?

  I have a very simple app.

  I want change empty string, if it has some char.

  Check up a comment line.

  const TagInput: React.FC<Props> = (props) => {
    const domInputRef = useRef<HTMLDivElement>(null);
  
    const onInput = useCallback((e: React.FormEvent<HTMLDivElement>) => {
      const value = domInputRef.current?.innerText ?? '';
      
      // if last char is space, I will change empty.
      if (value.charCodeAt(value.length - 1) === 160) {
        domInputRef.current?.innerText = "";  // <- here, error! 
        // TS said "Invalid left-hand side in assignment expressio"
      }
    }, []);
  
    return (
        <div
          contentEditable={true}
          onInput={onInput}
          ref={domInputRef} />
    );
  };
  
• graphql-codegen dynamic fields with interpolation

  I'm using graphql-codegen to generate typescript types from graphql schema. I'm trying to create a fragment with dynamic fields.

  schema.ts

  This is the type generated by graphql-codegen.

  /** User Type */
  export type UserType = {
    __typename?: 'UserType';
    id: Scalars['ID'];
    avatar: Scalars['String'];
    email: Scalars['String'];
    name: Scalars['String'];
    showPostsInFeed: Scalars['Boolean'];
    username: Scalars['String'];
  };
  

  user.model.ts

  I'm using these interfaces throughout the entire application for validations and consistency.

  export interface IUserBase {
    id: string;
    avatar: string;
    name: string;
    username: string;
  }
  
  export interface IUserPost extends IUserBase {
    showPostsInFeed: boolean;
  }
  
  export interface IUserProfile extends IUserBase, IUserPost {
    email: string;
  }
  
  

  show.ts

  This is the file used for generation. Here I want to make a fragment with dynamic fields using my existent IUserPost and IUserProfile interfaces, in order to reuse those fields and avoid duplication if I repeat them inside the fragment one by one.

  import gql from 'graphql-tag';
  import { keys } from 'ts-transformer-keys';
  
  import { IUserProfile, IUserPost } from '../../user.model';
  
  const keysUserPofile = keys<IUserProfile>();  //Get all interface keys
  const keysUserPost = keys<IUserPost>();  //Get all interface keys
  
  //Fragments
  export const fragments = {
    userProfile: gql`
      fragment UserProfile on UserType {
        ${keysUserPofile.join('\n')}    //Interpolation
      }
    `,
    userPost: gql`
      fragment UserPost on UserType {
        ${keysUserPost.join('\n')}    //Interpolation
      }
    `
  };
  
  //Queries
  export const userProfileQuery = gql`
      query UserProfileQuey($id: String!) {
        showUser(id: $id) {
          ...UserProfile
        }
      }
  `;
  
  export const userPostQuery = gql`
      query UserPostQuey($id: String!) {
        showUser(id: $id) {
          ...UserPost
        }
      }
  `;
  

  When I try to pass these fields using interpolation, I get this error.

  $ npm run generate
  
  > gogofans-ui@0.0.0 generate C:\Development\GogoFans\gogofans-ui
  > graphql-codegen --config codegen.yml
  
    √ Parse configuration
    > Generate outputs
      > Generate src/app/core/graphql/schema.ts
        √ Load GraphQL schemas
        × Load GraphQL documents
          → Syntax Error: Expected Name, found "}".
          Generate
  
  
   Found 1 error
  
    × C:/Development/GogoFans/gogofans-ui/src/app/users/graphql/fragments/show.ts
      GraphQLError: Syntax Error: Expected Name, found "}".
          at syntaxError (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\error\syntaxError.js:15:10)
          at Parser.expectToken (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:1423:40)     
          at Parser.parseName (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:92:22)
          at Parser.parseField (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:289:28)       
          at Parser.parseSelection (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:278:81)   
          at Parser.many (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:1537:26)
          at Parser.parseSelectionSet (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:265:24)
          at Parser.parseFragmentDefinition (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:410:26)
          at Parser.parseDefinition (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:134:23)     
          at Parser.many (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:1537:26)
          at Parser.parseDocument (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:109:25)       
          at Object.parse (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:36:17)
          at Object.parseGraphQLSDL (C:\Development\GogoFans\gogofans-ui\node_modules\@graphql-tools\utils\index.cjs.js:601:28)
          at parseSDL (C:\Development\GogoFans\gogofans-ui\node_modules\@graphql-tools\code-file-loader\index.cjs.js:239:18) 
          at CodeFileLoader.load (C:\Development\GogoFans\gogofans-ui\node_modules\@graphql-tools\code-file-loader\index.cjs.js:173:28)
          at async loadFile (C:\Development\GogoFans\gogofans-ui\node_modules\@graphql-tools\load\index.cjs.js:48:24)        
      GraphQLError: Syntax Error: Expected Name, found "}".
          at syntaxError (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\error\syntaxError.js:15:10)
          at Parser.expectToken (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:1423:40)        
          at Parser.parseName (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:92:22)
          at Parser.parseField (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:289:28)
          at Parser.parseSelection (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:278:81)      
          at Parser.many (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:1537:26)
          at Parser.parseSelectionSet (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:265:24)   
          at Parser.parseFragmentDefinition (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:410:26)
          at Parser.parseDefinition (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:134:23)     
          at Parser.many (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:1537:26)
          at Parser.parseDocument (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:109:25)       
          at Object.parse (C:\Development\GogoFans\gogofans-ui\node_modules\graphql\language\parser.js:36:17)
          at Object.parseGraphQLSDL (C:\Development\GogoFans\gogofans-ui\node_modules\@graphql-tools\utils\index.cjs.js:601:28)
          at parseSDL (C:\Development\GogoFans\gogofans-ui\node_modules\@graphql-tools\code-file-loader\index.cjs.js:239:18) 
          at CodeFileLoader.load (C:\Development\GogoFans\gogofans-ui\node_modules\@graphql-tools\code-file-loader\index.cjs.js:173:28)
          at async loadFile (C:\Development\GogoFans\gogofans-ui\node_modules\@graphql-tools\load\index.cjs.js:48:24)        
  
  
  Something went wrong
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! gogofans-ui@0.0.0 generate: `graphql-codegen --config codegen.yml`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the gogofans-ui@0.0.0 generate 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!     C:\Users\Fidel\AppData\Roaming\npm-cache\_logs\2020-07-06T07_01_25_424Z-debug.log
  
  
• How can I mention two private npm registries in the docker and .npmrc package?

  How can I mention two private npm registries in the docker and .npmrc package?

     //registry.npmjs.org/:_authToken=2113wer@@#$@#$!@#!@#!@#!
  
     registry = https://companiesprivateregistry (and another one is)
  

  When I run RUN npm install it taking the precedence of registry.npmjs.org. I do have one package.json. I tried multiple things

   RUN npm config set @:privatepackage1 registry https://companiesprivateregistry 
   RUN npm config set @privatepackage2 registry  https://registry.npmjs.org/:_authToken=... > ~/.npmrc
  

  but none of this things works.either it just takes one registry not the other one and throws error 404. I tried mentioning .npmrc but no luck same errror.
• How to run a npm script only if a directory exists?

  I have a post install npm script in my package.json:

  "postinstall": "cd public/animation && npm i && npm run gulp"
  

  I want it to only run if the animation directory exists, if it doesn't exist I don't want it to proceed with the commands. So something like:

  "postinstall": "<IF animation dir exists> && cd public/animation && npm i && npm run gulp"
  

  What is the right syntax to do this?
• Can Cypress run test files imported outside of Cypress folder?

  I'm working on an E2E test framework using Cypress, and wanted to import spec files which are outside the Cypress directory (containing dir for: fixtures, integration, plugins, support). When I started some initial tests to verify if it would work as expected, I get these error messages stating that the error originate from my test code, not Cypress. The cause of the error is a TypeError stating: Cannot read property 'includes' of undefined.

  Internet searches on this issue weren't really helpful, since no else seemed to have trouble with this behavior, (at least from my perspective). Even when I moved the spec file I selected as an import into cypress/integration/, the same issue repros.

  At this point I'm stumped at what's the cause of this problem and how to resolve it. Is there something I'm missing?

  Here is what I got in package.json (devDependencies, and field for main):

  "main":"index.js",
  "devDependencies": {
  "@cypress/webpack-preprocessor": "^5.4.1",
  "cypress": "^4.9.0",
  "selenium-webdriver": "^4.0.0-alpha.7",
  "webpack": "^4.43.0"
  }
  

  My spec which imports spec file outside of Cypress directory (cypress/integration/RunE2ETest.spec.js):

  import '../../Cypress_E2E_Example/SteamHeader.spec';
  

  The spec file outside of Cypress folder (SteamHeader.spec) just showing how I have it set with imports, exports:

  import '../Cypress-E2E/BaseTest';
  
  export default describe('Test Suite for ....' () => {
       it('test example'), () => {
       }
  }
  

  The file for my BaseTest:

  import default before('BaseSetup', () => {
       cy.visit('/');
  }
  

  Details on error: Line causing the error (node_modules/global-dirs/index.js:28:1):

  26 | 
    27 |  // Homebrew special case: `$(brew --prefix)/lib/node_modules/npm/npmrc`
  > 28 |  if (process.execPath.includes('/Cellar/node')) {
       | ^
    29 |      const homebrewPrefix = process.execPath.slice(0, process.execPath.indexOf('/Cellar/node'));
    30 |      return path.join(homebrewPrefix, '/lib/node_modules/npm/npmrc');
    31 |  }
  

  Stacktrace:

  We dynamically generated a new test to display this failure.
        at getGlobalNpmrc (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86028:23)
        at getNpmPrefix (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86064:30)
        at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86072:32)
        at Object.512._process (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:86120:4)
        at o (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:265)
        at eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:316)
        at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:89116:20)
        at Object.551.fs (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:89130:4)
        at o (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:265)
        at eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:316)
        at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:70417:28)
        at Object.425../fs (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:70842:4)
        at o (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:265)
        at eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:1:316)
        at Object.eval (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:67474:12)
        at Object.411../lib/cypress (https://store.steampowered.com/__cypress/tests?p=cypress\integration\RunE2ETest.spec.js:67503:4)
  
• After upgrade to Gulp 4 default task is not detecting default changes for JS & Scss

  I upgraded the gulp to 4.0.2 from Gulp version 3. it will not detect changes when the tracked JSa and SCSS file is changed.

  Gulp version I am using :- CLI version: 2.3.0 Local version: 4.0.2

  gulpfile.js

     'use strict';
  
  var gulp = require('gulp'),
      sass = require('gulp-sass'),
      del = require('del'),
      jshint = require('gulp-jshint'),
      concat = require('gulp-concat'),
      rename = require('gulp-rename'),
      uglify = require('gulp-uglify'),
      strip = require('gulp-strip-comments'),
      livereload = require('gulp-livereload'),
      http = require('http'),
      st = require('st'),
      sourcemaps = require('gulp-sourcemaps'),
      ngAnnotate = require('gulp-ng-annotate'),
      babel = require('gulp-babel'),
      uglifycss = require('gulp-uglifycss'),
      browserSync  = require('browser-sync').create();
  
  //Rerun the task when a file changes
  var watch_hintJs = ['./global/util/*.js', './global/util/**/*.js', './modules/**/*Service.js', './modules/**/*Directive.js', './modules/**/*Controller.js', './modules/**/*Constant.js'];
  var watch_hintscss = ['./global/scss/*.scss', './modules/**/*.scss'];
  
  
  // This method is used to delete the files
  gulp.task('clean',  ()=> {
       return del(['./assets/css']);
  });
  var globalCSS = ['./assets/libs/css/**','./assets/libs/css/*.css'];
  gulp.task('css',  ()=> {
     return gulp.src(globalCSS)
          .pipe(concat('myapp-main-libs.css'))
          .pipe(uglifycss({
              "uglyComments": true
          }))
          .pipe(gulp.dest('./assets/css/'));
  });
  
  
  /* SASS TO CSS CONVERSION*/
  gulp.task('sass',  ()=> {
      return gulp.src(['./global/scss/*.scss', './global/scss/lib/*.scss', './modules/**/*.scss'])
          .pipe(sass().on('error', sass.logError))
          .pipe(sass())
          .pipe(concat('myapp-main.css'))
          //.pipe(strip())
          .pipe(uglifycss({
              "uglyComments": true
          }))
          .pipe(gulp.dest('./assets/css/'));
  });
  
  //This method is converting all JS files to Single file//
  var jsFiles = ['./global/util/*.js', './global/util/lib/*.js', './global/util/components/*.js',
      './modules/**/*Service.js', './modules/**/*Directive.js', './modules/**/*Controller.js', './modules/**/*Constant.js'],
      jsDest = './assets/js/',
      jsLibs = [
          'assets/libs/js/tether.min.js',
          'assets/libs/js/jquery.min.js',
          'assets/libs/js/jquery-ui-min.js',
          'assets/libs/js/bootstrap.min.js',
          'assets/libs/js/angular.min.js',
          'assets/libs/js/angular-ui-router.min.js',
          'assets/libs/js/ui-grid-min.js',
          'assets/libs/js/html2canvas.js',
          'assets/libs/js/ui-bootstrap-tpls-2.5.0.min.js',
          'assets/libs/js/accordian.js',
          'assets/libs/js/angularResizable.js',
          'assets/libs/js/angular-animate.min.js',
          'assets/libs/js/ngToast.js',
          'assets/libs/js/angular-sanitize.js',
          'assets/libs/js/pubsub.js',
          'assets/libs/js/angular-environment.js',
          'assets/libs/js/deferred-with-update.js',
          'assets/libs/js/multiselect.js',
          'assets/libs/js/angular-chart.min.js',
          'assets/libs/js/common.js',
          'assets/libs/js/bootstrap-colorpicker-module.min.js',
          'assets/libs/js/dom-to-image.js',
          'assets/libs/js/alasql.min.js',
          'assets/libs/js/xlsx.core.min.js',
          'node_modules/babel-polyfill/dist/polyfill.min.js',
          'assets/libs/js/jquery.csv.js',
          'assets/libs/js/z-worker.js',
          'assets/libs/js/zip.js'
      ];
  gulp.task('libs',  ()=> {
      return gulp.src(jsLibs)
          .pipe(strip())
          .pipe(concat('myapp-lib-scripts.js'))
          .pipe(gulp.dest(jsDest));
  });
  var minify = require('gulp-minify');
  gulp.task('scripts',  ()=> {
      return gulp.src(jsFiles)
          .pipe(jshint())
          .pipe(sourcemaps.init())
          .pipe(babel({
              presets: ['es2015', 'stage-3'],
              "plugins": ["transform-async-to-generator"]
          }))
          .pipe(concat('myapp-scripts.js'))
          .pipe(uglify({
              mangle: false
          }))
          .pipe(sourcemaps.write('./maps'))
          .pipe(gulp.dest(jsDest))
          .pipe(livereload());
  });
  
  
  
  /*jshint, watch, browserify*/
  
  // configure the jshint task
  gulp.task('jshint', ()=> {
      return gulp.src(watch_hintJs)
          .pipe(jshint())
          .pipe(jshint.reporter('jshint-stylish'));
  });
  
  gulp.task('browser-sync',  gulp.series('sass',  ()=> {
      browserSync.init({
          server: {
              injectChanges: true,
              baseDir: "./"
          },
          browser: ["chrome.exe"]
      });
  }));
  
  
  gulp.task('js-watch',  gulp.series('scripts',  () =>{
      console.log('you changed the JS');
      return browserSync.reload();
  }));
  gulp.task('css-watch',  gulp.series('sass',  ()=> {
      console.log('you changed the css');
      return browserSync.reload();
  }));
  
  gulp.task('watch',  gulp.series('browser-sync',  ()=> {
      console.log('you reach watch');
      gulp.watch(watch_hintJs, ['js-watch']);
      gulp.watch(watch_hintscss, ['css-watch']);
       gulp.watch(watch_hintJs, browserSync.reload());
      
      return livereload.listen();
  
  }));
  
  
  
  
  gulp.task('server', (done)=> {
      return http.createServer(
          st({
              path: __dirname + '/',
              index: 'index.html',
              cache: false
          })
      ).listen(8080, done);
  });
  var revts = require('gulp-rev-timestamp');
  gulp.task('rev-timestamp',  ()=> {
     return gulp.src("./index.html")
          .pipe(revts())
          .pipe(gulp.dest('.'));
  });
  gulp.task('default', gulp.series('clean', 'css', 'sass', 'libs', 'scripts', 'rev-timestamp', 'watch'));
  gulp.task('prod', gulp.series('clean', 'css', 'sass', 'libs', 'scripts', 'jshint', 'rev-timestamp'));
  

  Note: Style task is working correctly and moving all .scss files from source to destination.

  I really appreciate any help since I am running out of ideas
• TypeError in plugin 'gulp-webp-css'

  I try to save changes in my code, but I have this issue:

  [00:49:04] 'html' errored after 43 ms
  [00:49:04] TypeError in plugin 'gulp-webp-css'
  Message:
      Cannot read property '0' of null
  Details:
      domainEmitter: [object Object]
      domain: [object Object]
      domainThrown: false
  [00:49:04] 'default' errored after 124 ms
  

  Here's the link to my gulpfile.js code - https://jsfiddle.net/yLo9b4na/

  I tried to look for reasons for several hours, but did not succeed.

  Has anyone encountered such a problem? I would be grateful for any help.
• Display project folder path in the terminal with Gulp-Notify instead of entire path of project on hard drive

  I am using gulp-notify to display extra information in the terminal when a task is run. Currently I can only get the full path on my HD and file name. I would prefer to only display the project folders as it is cleaner.

  function copyVideo (done) {
     // Locate files
     return gulp.src('./src/assets/video/*')
     // Copy the files to the dist folder
     .pipe(gulp.dest('./dist/assets/video'))
     // Notify the files copied in the terminal
     .pipe(notify('Copied <%= file.relative %> to <%= file.path %>')),
   done();
  }
  

  Terminal view

  

  I would like the terminal to simply say *Copied quick-scope-for-6.mp4 to \dist\assets\video*

  I have tried <%= folder.path %> and <%= directory.path %>