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

See also questions close to this topic

• How can I get toast-ui editor content?

  I am a student studying. I think I'm doing it conceptually wrong.

  I'm trying to use vue3 and type script And I'm going to use toast-ui editor.

  I get some errors.

  1. refEditor.value.invoke is not a function

  How can I get toast-ui editor content?

  this is my code

  <template>
    <div class="markup-tables flex">
      <va-card :title="$t('tables.stripedHoverable')">
        <va-card-content>
          <div id="refEditor" ref="refEditor"></div>
          <br />
          <div class="row justify--end paginationButtons-left">
            <va-button class="mr-2 mb-2">List</va-button>
          </div>
          <div class="row justify--end paginationButtons-right">
            <va-button class="mr-2 mb-2" @click="getHTML">Save</va-button>
          </div>
        </va-card-content>
      </va-card>
    </div>
  </template>
  
  <script lang="ts">
  import '@toast-ui/editor/dist/toastui-editor.css'
  
  import Editor from '@toast-ui/editor'
  import { defineComponent, onMounted, ref } from 'vue'
  
  import data from '@/data/tables/markup-table/data.json'
  
  export default defineComponent({
    name: 'BoardWrite',
    setup() {
      const refEditor = ref(null)
  
      const getHTML = () => {
        console.log('getHTML test')
        let html = refEditor.value.invoke('getHtml')
        console.log(html)
        // ERROR 
      }
  
      onMounted(() => {
        const editor = new Editor({
          el: refEditor.value,
          height: '700px',
          initialEditType: 'markdown',
          previewStyle: 'vertical',
        })
        editor.getMarkdown()
      })
  
      return {
        getHTML,
        refEditor,
      }
    },
  })
  </script>
  
• Custom utility types (generic types) for classes `IsClass` of TypeScript

  I am trying to create a generic type to make sure the first parameter to be a class. However, the factory function parameter cannot be replaced by a generic type.

  The following upper parts were my attempts. The last part were a working example that directly write the extends ... which worked.

  Why does it works inside a function, but not works as a generic type IsClass?

  class A {
    constructor() {
  
    }
  }
  class B {}
  class C extends B {}
  
  // ERRORS:
  
  type IsClass<T extends new (...args: any) => InstanceType<T>> = T
  type IsClass2<T> = T extends new (...args: any) => InstanceType<T>? T: never
  
  type X = IsClass<A>
  type Y = IsClass2<A>
  
  function someFactoryError<T>(clx: IsClass<T>) {
    return new clx()
  }
  
  someFactoryError(A)
  
  function someFactoryError2<T>(clx: IsClass2<T>) {
    return new clx()
  }
  
  someFactoryError2(A)
  
  // WORKS:
  
  function someFactoryWorks<T extends new (...args: any) => InstanceType<T>>(clx: T) {
    return new clx()
  }
  
  const a0 = someFactoryWorks(A)
  const b0 = someFactoryWorks(B)
  

  TypeScript Playground

  Related:

  • stackoverflow
  • TypeScript Handbook: Abstract Construct Signatures
• Async function passed as prop into React component causing @typescript-eslint/no-misused-promises error

  I have the following asynchronous submitNewPatient function which is throwing @typescript-eslint/no-misused-promises error message from elint. Is it possible to adjust the function such that it removes this error?

  const submitNewPatient = async (values: PatientFormValues) => {
      try {
        const { data: newPatient } = await axios.post<Patient>(
          `${apiBaseUrl}/patients`,
          values
        );
        dispatch({ type: "ADD_PATIENT", payload: newPatient });
        closeModal();
      } catch (e: unknown) {
        if (axios.isAxiosError(e)) {
          console.error(e?.response?.data || "Unrecognized axios error");
          setError(
            String(e?.response?.data?.error) || "Unrecognized axios error"
          );
        } else {
          console.error("Unknown error", e);
          setError("Unknown error");
        }
      }
    };
  

  Component used to pass function as a prop:

  <AddPatientModal
          modalOpen={modalOpen}
          onSubmit={submitNewPatient}
          error={error}
          onClose={closeModal}
        />
  

  I have also tried the following which removes the eslint error message based. However, seems like I am not entering the async code block (perhaps not triggering the async() function):

    const submitNewPatient = (values: PatientFormValues) => {
      async () => {
        try {
          const { data: newPatient } = await axios.post<Patient>(
            `${apiBaseUrl}/patients`,
            values
          );
          dispatch({ type: "ADD_PATIENT", payload: newPatient });
          closeModal();
        } catch (e: unknown) {
          if (axios.isAxiosError(e)) {
            console.error(e?.response?.data || "Unrecognized axios error");
            setError(
              String(e?.response?.data?.error) || "Unrecognized axios error"
            );
          } else {
            console.error("Unknown error", e);
            setError("Unknown error");
          }
        }
      };
    };
  
• A fool-proof tsup config for a React component library

  I've never published an NPM package before. All these details to generate a package seem way too complicated to my level. The only tool, that was beginner friendly, that I could find is create-react-library which recommended to switch to tsup instead.

  I'm asking here to know if there's a batteries-included, most-cases-met, setup for tsup or any other tool of your recommendation for this kind of project (and I think this is a common scenario):

  • A React Project
  • Typed with Typescript
  • Tested with Jest
  • No dependencies
  • Exports React components
  • Should be public on NPM
• Yarn start run normally but browser not open

  In the terminal:

  yarn start
  

  The response is:

  yarn run v1.22.18
  $ react-scripts start
  Done in 0.15s.
  

  Nothing happens, no browser is opened

  Other projects in the same machine works fine, with the same Node version and NPM version.
• Can not run npm command, instead getting something about Elasticsearch

  Does someone know what is going on? I have never before worked with node.js and npm, just needed to run some terminal commands and for every command i try i get the following ->

  Usage: node [OPTIONS] COMMAND [ARGS]...

  Implementation of Cluster Nodes APIs of Elasticsearch

  Options: --help Show this message and exit.

  Commands: info The cluster nodes info API allows to retrieve one or more (or all) of the cluster nodes information stats The cluster nodes stats API allows to retrieve one or more (or all) of the cluster nodes statistics.
• app.css error when compiled with ruby sass from app.scss

  I'm trying to build my project with gulp, and the app.scss file is compiled with ruby sass. The problem is the app.css gets error and cannot be applied to browser.

  Error: Invalid CSS after "... floor(math": expected ")", was ".div($grid-gutt..." on line 369 of node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss from line 8 of node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss from line 2 of src/styles/global/libraries.scss from line 4 of ./src/styles/app.scss

  The app.css file after being compiled will have lines of comments like this

  /* Error: Invalid CSS after "... floor(math": expected ")", was ".div($grid-gutt..." on line 369 of node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss from line 8 of node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss from line 2 of src/styles/global/libraries.scss from line 4 of ./src/styles/app.scss ...(there are more)

  and the last line of app.css is commented too, it looks like this

  /*# sourceMappingURL=data:application/json;...

  here is the gulpfile.js

  var browserSync  = require('browser-sync');
  var sass         = require('gulp-ruby-sass');
  var sourcemaps   = require('gulp-sourcemaps');
  var handleErrors = require('../util/handleErrors');
  var config       = require('../config').sass;
  var autoprefixer = require('gulp-autoprefixer');
  
  gulp.task('sass', function () {
    return sass(config.entry, config.settings)
       .on('error', handleErrors)
       .pipe(sourcemaps.init())
       .pipe(sourcemaps.write())
       .pipe(autoprefixer({ browsers: ['last 2 version'] }))
       .pipe(gulp.dest(config.dest))
       .pipe(browserSync.reload({stream:true}));
  });
  
  
• Gulp injecting can not inject multiple bundle but file is created

  Gulp inject is not injecting multiple js bundle in index.html. I am using angular project and gulp to manage the project. while I am injecting file. only one file is injected as a bundle. I need to inject too many bundle atleast 5 bundles. because the project volume and script file is huge.

  var corebundle = gulp.src([path.join(conf.paths.src, '/app/**/*.module.js')]
  ,{allowEmpty: true,buffer:true,sourcemaps:true,nounique:false})
  .pipe(concat('corebundle.js')).
  pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
  
  var mainbundle = gulp.src([
      path.join(conf.paths.src, '/app/**/*.js')
  ],{ allowEmpty: true,buffer:true,sourcemaps:true,nounique:false})
  .pipe(concat('mainbundle.js'))
  .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
  
  ***The below code I ran for injecting***
  return gulp.src(path.join(conf.paths.src, '/*.html'))
      .pipe($.inject(injectStyles, injectOptions))
      .pipe($.inject(corebundle, injectOptions)) // js bundle can add
      .pipe($.inject(mainbundle, injectOptions)) // js bundle can not add
      .pipe(wiredep(_.extend({}, conf.wiredep)))
      .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
  
• Gulp-minify how to remove duplicate files

  Im trying to minify JS files with Gulp, but what is happening is that it copies all the original files im trying to minify to the destination folder /minify whereas I want there to be only the minified files with the extension -min.js.

  var gulp = require('gulp');
  var minify = require('gulp-minify');
  var stripDebug = require('gulp-strip-debug')
  var strip = require('gulp-strip-comments')
  
  gulp.task('min-js', function() {
      return gulp.src('./**/*.js', '!./node_modules', '!./*-min.js')
          .pipe(minify({
              ignoreFiles: ['gulpfile.js', './node_modules']
          }))
          .pipe(stripDebug())
          .pipe(gulp.dest('./minify'))
  });
  
  gulp.task('watch', function(){
    gulp.watch('lib/scripts/*.js', ['min-js']); 
  });
  
  gulp.task('default', gulp.series('min-js', 'watch'));