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

See also questions close to this topic

• Storing data temporary in next js

  I'm creating a next js app which needs no database. But i have to store a string temporary to pass it through a few api routes. At this moment i'm using a singleton, but while i'm developing next js restarts on every change and the singleton will be recreating.

  So i'm searching for a solution which works while i'm developing and in production. Do you know what i can do without adding a database local or in the cloud?

  I think it's a little bit oversized.
• Maximum call stack size exceeded TypeScript Recursive Function returning a Generator returning a Promise

  I have a generator that streams one line of a large file at a time. I only want to process one line at a time and the file size is likely to get quite large.

  export async function *lineOfFileGenerator(fullFilePath: string) {
    const filestream = createReadStream(fullFilePath);
    const rl = createInterface({
      input: filestream,
      crlfDelay: Infinity
    });
    for await (const line of rl) {
      yield line;
    }
  }
  

  It is then instantiated

  const gen = lineOfFileGenerator('./path/to/file')
  

  I want to keep calling this generator (which returns a promise) until it is 'done'. Since it returns a promise, I can't loop and directly check if the done boolean is true. I made a recursive function

  function genPrinter(geno: any): void | AsyncGeneratorFunction {
    geno.next().then((val: { done: boolean; value: string; }) => {
      if (val.done) {
        console.log('done');
        return;
      }
      // will eventually call a processing function.
      console.log(val.value);
    });
    return genPrinter(geno);
  }
  

  However, I get RangeError: Maximum call stack size exceeded.

  I'm not sure of the best way to call this generator/solve this problem.
• React + Redux + Typescript Chrome Extension Popup Script - Redux Devtools Shows "No Store Found"

  I am creating a chrome extension that is mainly served in a popup script.

  Manifest.json

  // public/manifest.json
  
  {
    "manifest_version": 3,
    "version": "3.0.0",
    "name": "__MSG_appName__",
    "description": "__MSG_appDesc__",
    "default_locale": "en",
    "author": "lbragile",
    "homepage_url": "some_url_not_relevant_to_question_at_hand",
    "permissions": ["tabs", "storage"],
    "optional_permissions": ["contextMenus", "alarms", "downloads", "downloads.shelf"],
    "icons": {
      "16": "images/logo16.png",
      "48": "images/logo48.png",
      "128": "images/logo128.png"
    },
    "action": {
      "default_icon": {
        "16": "images/logo16.png",
        "48": "images/logo48.png",
        "128": "images/logo128.png"
      },
      "default_popup": "index.html",
      "default_title": "title"
    },
    "background": {
      "service_worker": "background.js"
    },
    "incognito": "split"
  }
  
  

  Package.json

  // package.json
  
  {
    "name": "name",
    "version": "0.0.1",
    "description": "description",
    "author": "lbragile",
    "private": true,
    "dependencies": {
      "nanoid": "^3.1.30",
      "react": "^17.0.2",
      "react-dom": "^17.0.2",
      "react-redux": "^7.2.5",
      "react-router-dom": "^5.3.0",
      "react-scripts": "4.0.3",
      "redux": "^4.1.1"
    },
    "devDependencies": {
      "@babel/core": "^7.13.14",
      "@babel/preset-env": "^7.13.12",
      "@babel/preset-react": "^7.13.13",
      "@fortawesome/fontawesome-svg-core": "^1.2.36",
      "@fortawesome/free-regular-svg-icons": "^5.15.4",
      "@fortawesome/free-solid-svg-icons": "^5.15.4",
      "@fortawesome/react-fontawesome": "^0.1.15",
      "@types/chrome": "0.0.159",
      "@types/express": "^4.17.13",
      "@types/node": "^16.10.3",
      "@types/react": "^17.0.15",
      "@types/react-dom": "^17.0.9",
      "@types/react-redux": "^7.1.19",
      "@types/react-router-dom": "^5.1.8",
      "@types/redux-immutable-state-invariant": "^2.1.2",
      "@types/remote-redux-devtools": "^0.5.5",
      "@types/styled-components": "^5.1.12",
      "@typescript-eslint/eslint-plugin": "^5.0.0",
      "@typescript-eslint/parser": "^5.0.0",
      "babel-loader": "^8.2.3",
      "babel-plugin-styled-components": "^1.13.2",
      "copy-webpack-plugin": "^9.0.1",
      "eslint": "^7.11.0",
      "eslint-plugin-react": "^7.24.0",
      "eslint-plugin-react-hooks": "^4.2.0",
      "eslint-plugin-styled-components-a11y": "0.0.34",
      "redux-devtools-extension": "^2.13.9",
      "styled-components": "^5.3.0",
      "stylelint": "^13.13.1",
      "stylelint-config-standard": "^22.0.0",
      "ts-loader": "^9.2.6",
      "typescript": "^4.3.5",
      "url-loader": "^4.1.1",
      "webpack": "^5.59.1",
      "webpack-cli": "^4.9.1"
    },
    "scripts": {
      "lint": "npx eslint {src,public}/**/**/*.[jt]s -c config/.eslintrc.js --ignore-path .gitignore .",
      "lint:style": "npx stylelint {src,public}/**/**/*.css --config config/.stylelintrc.json",
      "start": "webpack --config config/webpack.config.js --watch --progress"
    },
    "babel": {
      "extends": "./config/.babelrc.json"
    },
    "eslintConfig": {
      "extends": "./config/.eslintrc.js"
    },
    "stylelint": {
      "extends": "./config/.stylelintrc.json"
    },
    "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }
  

  Webpack

  // config/webpack.config.js
  
  const path = require("path");
  const CopyPlugin = require("copy-webpack-plugin");
  
  module.exports = {
    entry: {
      popup: path.resolve(__dirname, "../src/index.tsx"),
      background: path.resolve(__dirname, "../src/background.ts"),
    },
    plugins: [
      new CopyPlugin({
        patterns: [{ from: "public", to: "." }],
      }),
    ],
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          use: "babel-loader",
          exclude: /node_modules/,
        },
        {
          test: /\.ts(x)?$/,
          loader: "ts-loader",
          exclude: /node_modules/,
        },
        {
          test: /\.png$/,
          use: [
            {
              loader: "url-loader",
              options: {
                mimetype: "image/png",
              },
            },
          ],
        },
      ],
    },
    resolve: {
      extensions: [".js", ".jsx", ".ts", ".tsx"],
    },
    mode: "production",
    output: {
      path: path.resolve(__dirname, `../dist`),
      filename: "[name].js",
    },
  };
  

  Problem

  I've tried redux-devtools-extension:

  // src/index.tsx
  
  import React from "react";
  import ReactDOM from "react-dom";
  import App from "./components/App";
  import { Provider } from "react-redux";
  import { createStore } from "redux";
  import { composeWithDevTools } from "redux-devtools-extension";
  import rootReducer from "./store/reducers";
  
  export const store = createStore(rootReducer, composeWithDevTools());
  
  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>,
    document.getElementById("root")
  );
  

  which shows:

  

  I've also tried using remote-redux-devtools:

  // src/index.tsx
  
  import React from "react";
  import ReactDOM from "react-dom";
  import App from "./components/App";
  import { Provider } from "react-redux";
  import { createStore } from "redux";
  import devToolsEnhancer from "remote-redux-devtools";
  import rootReducer from "./store/reducers";
  
  export const store = createStore(rootReducer, devToolsEnhancer());
  
  ReactDOM.render(
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>,
    document.getElementById("root")
  );
  

  which seems more promising, but has no data in the store:

  

  When I run in the browser, using npm start (react-scripts start), I do see the store in the Redux DevTools extension, so I am not sure what the problem is.

  Possible Idea

  When I build with React (react-scripts build), I can see the store just fine. The issue is that I cannot use react as it's build times are too slow and using webpack seems like the most logical alternative. Here is the build output:

  

  Any ideas?
• is that possible to not have the local modules linked in same project directory ?( i dont want node_module folder in my project using gulp?)

  I am using gulp as a task runner and I have installed node modules globally. but I have to link the modules locally and by doing so node_modules folder gets created in the project directory. I don't want the node_modules folder
• Jenkins build fails on npm build

  I have a jenkins pipeline which fails on npm build. The error message from console is

  (node:10394) UnhandledPromiseRejectionWarning: ReferenceError: TextEncoder is not defined at Object.(/home/jenkins/agent/workspace/buildall/apps/appUI/node_modules/whatwg-url/lib/encoding.js:2:21)

  Command which I used is

  npm run build
  

  I am using jenkins version 2.303.1 the npm -version is 6.14.12 and node -v is v10.24.1

  I have tried to set CI=false in environment variable and also tried to use the below command to build.

  export CI=false && npm run build
  

  Please let me know if you have faced such error and found any solution for this.
• How to disable pre-install and post-install scripts globally for packages installed with npm

  I am looking for a method to disable pre-install and post-install scripts for packages installed with npm.

  I notice there are already questions discussing this on StackOverflow, but as far as I can see, none of the answers seem to offer a "permanent" solution without affecting other (desirable) features:

  • I'd like to disable scripts for anything I install, now and in the future, along with dependencies (so adding --ignore-scripts to every npm install isn't a solution because it's tedious and I'll forget)
  • Another answer I came across suggests npm config set ignore-scripts true, but it is remarked in the comments that this will prevent the use of npm run ..., which I use extensively.

  Is there a global configuration file somewhere (not scoped to any particular project) with an option to disable such scripts without affecting the use of npm run ...?

  Failing that, is there a way to create an alias of sorts for npm install that will automatically append --ignore-scripts?
• Running Webpack from Gulp

  Apparently one way to bundle js from gulp is using webpack-stream which passes the gulp stream to webpack().

  This is the task I wrote:

  const bundle = dirname => src(`./entry.js`)
    .pipe(webpack(webpackConfig))
    .pipe(dest(`./dest`))
  

  The configuration file for webpack is under the variable webpackConfig, and points to:

  const TerserPlugin = require("terser-webpack-plugin");
  
  module.exports = {
  output:{ filename:`bundle.js`},
  mode:"development",
  target:"web",
  module:{
  rules:[{use:{loader:"babel-loader", options: { presets: ['@babel/preset-env'] }}}]
  ,
  },
    optimization: {
      minimize: true,
      minimizer: [new TerserPlugin()],
    }
  }
  

  But this problem in the compiled code persists forever:

  __webpack_require__.r(__webpack_exports__);
  /* harmony import */ var _common_common_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../common/common.js */ "./src/public/javascripts/common/common.js");
  
  const comments = (0,_common_common_js__WEBPACK_IMPORTED_MODULE_0__.$)("#comments");
  

  I am not sure what it means, any help on this please?
• yo @microsoft/sharepoint fails on This generator (@microsoft/sharepoint:app) requires yeoman-environment at least 3.0.0, current version is 2.10.3

  I have the following issue and I cannot fix it : C:\project> yo @microsoft/sharepoint Error @microsoft/sharepoint

  This generator (@microsoft/sharepoint:app) requires yeoman-environment at least 3.0.0, current version is 2.10.3, try reinstalling latest version of 'yo' or use '--ignore-version-check' option
  
  I performed npm ls :
  +-- @microsoft/generator-sharepoint@1.13.0
  +-- gulp@3.9.1
  +-- gulp-cli@2.3.0
  +-- touch-cli@0.0.1
  +-- typescript@4.4.4
  +-- yeoman-environment@3.0.0
  `-- yo@3.1.0
  Could you please help me? thank you!