#StackBounty: #typescript #npm #yarnpkg #monaco-editor #language-server-protocol editor.IStandaloneCodeEditor' is not assignable to…

Bounty: 100

in order to use monaco in below source code I did install below package but I’m getting that type error. Why is that and how can I fix that?

package:

npm i monaco-editor

I’m using this command:

yarn install

the package file looks like this:

{
  "private": true,
  "name": "node-example",
  "version": "0.13.0",
  "dependencies": {
    "@codingame/monaco-jsonrpc": "^0.3.1",
    "express": "^4.15.2",
    "file-loader": "^4.3.0",
    "monaco-editor": "^0.27.0",
    "monaco-editor-core": "^0.22.3",
    "monaco-editor-webpack-plugin": "^4.1.2",
    "monaco-languageclient": "^0.13.0",
    "normalize-url": "^2.0.1",
    "reconnecting-websocket": "^3.2.2",
    "request-light": "^0.2.2",
    "vscode-json-languageservice": "^4.0.2",
    "vscode-languageserver": "7.0.0",
    "vscode-uri": "^3.0.2",
    "vscode-ws-jsonrpc": "^0.2.0",
    "ws": "^5.0.0"
  },
  "scripts": {
    "prepare": "yarn run clean && yarn run build",
    "compile": "tsc",
    "watch": "tsc -w",
    "clean": "rimraf lib",
    "copy": "cp src/index.html lib/index.html",
    "build": "yarn run compile && webpack && yarn run copy",
    "start": "node lib/server.js",
    "start:ext": "node lib/server.js --external"
  },
  "devDependencies": {
    "webpack-cli": "^4.8.0"
  }
}

And this the error I’m getting:

src/client.ts:32:24 – error TS2345: Argument of type
‘import("path/to/project/monaco-languageclient/example/node_modules/monaco-editor/esm/vs/editor/editor.api").editor.IStandaloneCodeEditor’
is not assignable to parameter of type
‘monaco.editor.IStandaloneCodeEditor’.

this is the full source code:

import { listen, MessageConnection } from 'vscode-ws-jsonrpc';
import {
    MonacoLanguageClient, CloseAction, ErrorAction,
    MonacoServices, createConnection
} from 'monaco-languageclient';
import * as monaco from 'monaco-editor'
import normalizeUrl = require('normalize-url');
const ReconnectingWebSocket = require('reconnecting-websocket');

// register Monaco languages
monaco.languages.register({
    id: 'typescript',
    extensions: ['.ts'],
    aliases: ['TypeScript','ts','TS','Typescript','typescript']
})

// create Monaco editor
const value = `{
    "$schema": "http://json.schemastore.org/coffeelint",
    "line_endings": "unix"
}`;
const editor = monaco.editor.create(document.getElementById("container")!, {
    model: monaco.editor.createModel(value, 'typescript', monaco.Uri.parse('file:///abs/path/to/demo/ts/file.ts')),
    glyphMargin: true,
    theme: "vs-dark",
    lightbulb: {
        enabled: true
    }
});

// install Monaco language client services
MonacoServices.install(editor,{rootUri: "file:///abs/path/to/demo/ts"});

// create the web socket
const url = createUrl('ws://localhost:3000/ts')
const webSocket = createWebSocket(url);
// listen when the web socket is opened
listen({
    webSocket,
    onConnection: connection => {
        // create and start the language client
        const languageClient = createLanguageClient(connection);
        const disposable = languageClient.start();
        connection.onClose(() => disposable.dispose());
    }
});

function createLanguageClient(connection: MessageConnection): MonacoLanguageClient {
    return new MonacoLanguageClient({
        name: "Sample Language Client",
        clientOptions: {
            // use a language id as a document selector
            documentSelector: ['typescript'],
            // disable the default error handler
            errorHandler: {
                error: () => ErrorAction.Continue,
                closed: () => CloseAction.DoNotRestart
            }
        },
        // create a language client connection from the JSON RPC connection on demand
        connectionProvider: {
            get: (errorHandler, closeHandler) => {
                return Promise.resolve(createConnection(connection, errorHandler, closeHandler))
            }
        }
    });
}

function createUrl(path: string): string {
    return normalizeUrl(path);
}

function createWebSocket(url: string): WebSocket {
    const socketOptions = {
        maxReconnectionDelay: 10000,
        minReconnectionDelay: 1000,
        reconnectionDelayGrowFactor: 1.3,
        connectionTimeout: 10000,
        maxRetries: Infinity,
        debug: false
    };
    return new ReconnectingWebSocket(url, [], socketOptions);
}


Get this bounty!!!

#StackBounty: #javascript #reactjs #npm #webpack #webpack-module-federation how to set up webpack to pull js file from local rather tha…

Bounty: 50

webpack.config.js pulls remote js for Module Federation.

  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        'mfe1': "mfe1@http://xxxxxxxxxx.com/remoteEntry.js"
      }
    })
  ],

So how can I use a local JS file in remotes or in addition to remotes?
I have simple React.js library in other folder with ./dist/browser/remote-entry.js file in it.
I cannot publish to npm so trying to load it from local. Would it be something like:

  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        'mfe1': "../../myproject/dist/browser/remoteEntry.js"
      }
    })
  ],


Get this bounty!!!

#StackBounty: #vue.js #npm How to fix vue-jest error – SyntaxError: Unexpected token 'export'

Bounty: 100

How to fix vue-jest error – SyntaxError: Unexpected token ‘export’?

I’m having an issue with vue-jest unit test. Any help will be appreciated.

1. jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
  "moduleFileExtensions": [ "js", "ts", "json", "vue" ],
  transform: {
    '.*\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },  
}

2. package.json

{
  "name": "hotel-frontend-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "register-service-worker": "^1.7.1",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  }
}

3. Error message

me@meme:~/hotel-frontend-vue$ npm run test:unit

> hotel-frontend-vue@0.1.0 test:unit /home/me/hotel-frontend-vue
> vue-cli-service test:unit

 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/me/hotel-frontend-vue/src/components/HelloWorld.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export default {
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      1 | import { shallowMount } from '@vue/test-utils'
    > 2 | import HelloWorld from '@/components/HelloWorld.vue'
        | ^
      3 | 
      4 | describe('HelloWorld.vue', () => {
      5 |   it('renders props.msg when passed', () => {

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (tests/unit/example.spec.js:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.947s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hotel-frontend-vue@0.1.0 test:unit: `vue-cli-service test:unit`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the hotel-frontend-vue@0.1.0 test:unit 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!     /home/me/.npm/_logs/2020-12-11T14_1

You can find Github repository here on this branch:

https://github.com/digitlimit/hotel-frontend-vue/tree/bg-fix-vue-test

git clone git@github.com:digitlimit/hotel-frontend-vue.git -b bg-fix-vue-test


Get this bounty!!!

#StackBounty: #npm #webpack #imagemin npm run watch Error in Cannot read property of 'map' undefined

Bounty: 50

Problem:
Running the command npm run watch throws and error

54% building 35/41 modules 6 active /app/docroot/themes/custom/mytheme/node_modules/css-loader/index.js??ref--10-2!/app/docroot/themes/custom/mytheme/node_modules/postcss-loader/src/index.js??postcss5!/app/docroot/themes
 ERROR  Failed to compile with 1 errors          1:25:50 AM

 error 

Cannot read property 'map' of undefined

 15 assets

ERROR in Cannot read property 'map' of undefined
[Browsersync] Proxying: https://ps.lndo.site

The Error happens only when the following code is included in my webpack.mix.js file:

mix.imagemin({
  patterns: [{
    from: '**/*.{png,gif,jpg,jpeg,svg}',
    to: 'images/',
    context: 'src/images/'
  }, {
    from: '**/*.{png,gif,jpg,jpeg,svg}',
    to: 'images/',
    context: 'src/components/'
  }]
  });

Removing the above snippet removes the error but the previous developers on this project had this for a reason.

I recently updated due to security vulnerabilities and managed to debug a different issue that Copy Plugin introduced a breaking change (already updated in the code above). However I am unsure that I have all of the configuration correct.

This I have tried:
From the command line

rm -rf node_modules
rm package.lock
npm cache clean --force
npm install

These are the packages in package.json current as of August 27, 2020

"devDependencies": {
    "bootstrap": "^4.3.1",
    "browser-sync": "^2.26.12",
    "browser-sync-webpack-plugin": "^2.2.2",
    "copy-webpack-plugin": "^6.0.3",
    "cross-env": "^7.0.2",
    "husky": "^4.2.5",
    "imagemin-webpack-plugin": "^2.4.2",
    "jquery": "^3.5.1",
    "laravel-mix": "^5.0.4",
    "laravel-mix-imagemin": "^1.0.3",
    "popper.js": "^1.16.1",
    "pretty-quick": "^2.0.1",
    "resolve-url-loader": "^3.1.1",
    "sass": "^1.26.10",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
"dependencies": {
    "throttle-debounce": "^2.3.0"
  }

The packages updated were the following

    "browser-sync": "^2.26.7",
    "copy-webpack-plugin": "^5.1.1",
    "husky": "^4.2.3",
    "jquery": "^3.5.0",
    "sass": "^1.26.3",

    "throttle-debounce": "^2.1.0"


Get this bounty!!!

#StackBounty: #npm #package #verdaccio Is there a way in Verdaccio to generate package.json files based on what it has in it's stor…

Bounty: 50

I’m publishing angular packages to Verdaccio to use inside the company. Suddenly, I found out that one of my package is missing, when I run npm install it gives me an error saying Can not find that specific module. When I checked the verdaccio UI it was not there as well then I checked the server where Verdaccio is hosted, there was no package json file inside that package folder but all the .tgz files are there.
all the tgz files

Is there a way to redo all of it’s package.json files based on what it has in it’s storage?

Verdaccio version -4.0.4


Get this bounty!!!

#StackBounty: #linux #manjaro #npm Getting "Command not found" for global node packages

Bounty: 50

I’ve installed fkill globally by doing npm i -g fkill. I can see it installed when I do npm list. It shows only fkill as installed globally when I run npm list -g --depth=0. However when I run fkill I get “command not found”.

Next I ran “npm get prefix” and got “/home/alex/.node_modules”. Here is my PATH:

/home/alex/.node_modules/bin:/home/alex/.npm-global/bin:/home/alex/.node_modules/bin:/home/alex/.node_modules/lib/node_modules:/home/alex/.local/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/opt/cuda/bin:/var/lib/flatpak/exports/bin:/usr/lib/jvm/default/bin:/usr/bin/site_perl:/usr/bin/vendor_perl:/usr/bin/core_perl:/var/lib/snapd/snap/bin

This all began after I tried to run system updates with pacman and got node conflicts, so I uninstalled node and ran my updates, then reinstalled node.

Any ideas?

This is on Manjaro.


Get this bounty!!!

#StackBounty: #reactjs #npm #webpack #file-upload #babel CSS and Images files not coming after transpiling package with babel in new CRA

Bounty: 50

I am importing CSS as import ‘./style.css’; and images in CSS with background URL property. What I want is to make a package, publish it to npm without building and then install it into a new CRA and use it there. Using self made npm package in react. Failed to compile. From here I got to know that to use that installed package now I have to transpile it. But the issue is my js/jsx are getting transpiled from ES6 to ES5 but the images and CSS aren’t coming into the new transpiled folder.

DETAILS
I made a package in Reactjs and was not able to use it after publishing the source, not by making the build.
Then I posted a question on it: Using self made npm package in react. Failed to compile.

Now I am able to use it by following the steps in the accepted answer i.e. by transpiling ./src using babel.

The issue on which I am still stuck is that I don’t get my CSS and images in the new transpiled location i.e. ./lib/src. If I copy all the images and CSS folders in the respective places in ./lib/src. It works but I don’t want to do it manually.

Any suggestions on how to achieve this.

WEBPACK.CONFIG.JS

module.exports = {
  overrides: [
    {
      test: ["./node_modules/<component_name>"],
      presets: ["@babel/preset-env", "@babel/preset-react"],
      plugins: ["@babel/plugin-proposal-class-properties"]
    }
  ]
};

PACKAGE.json

{
  "name": "package-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.8.3",
    "@material-ui/core": "^1.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "active-event-stack": "^1.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-webpack-loaders": "^0.9.0",
    "classnames": "^2.2.3",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "material-ui": "^0.20.0",
    "path": "^0.12.7",
    "prop-types": "^15.6.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-draggable": "^2.2.6",
    "react-onclickoutside": "^5.10.0",
    "react-redux": "^7.1.3",
    "react-resizable": "^1.7.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "redux": "^3.7.2",
    "style-loader": "^1.1.3",
    "styled-components": "^4.3.2",
    "url-loader": "^3.0.0",
    "wolfy87-eventemitter": "^5.2.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4"
  }
}


Get this bounty!!!

#StackBounty: #javascript #node.js #windows #npm #electron Electron is broken, Windows not launching, No errors

Bounty: 100

Dec. 27 Update — I just tried installing the Electron Fiddle, and for some reason Electron 7.1.7 is working via that program, but not on my personal projects or when I create a new project.

I have not been able to work on my Electron projects in at least a few weeks, but for some reason not a single one of my Electron projects is launching their windows all of a sudden, even though they all used to. Even if I create a new project, it seems to start and then end immediately.

  • Windows 10 Home 1903 build 10.0.18362, 1909 build 18363.535
  • Node 12.13.0
  • NPM 6.13.4
  • Electron 7.1.4, 7.1.7

Notably, I did just update NPM, and Node may have also been updated sometime in the last few weeks, and I suspect it could have something to do with this? Either that or the recent Windows update? Can somebody verify that their projects are working on the latest Windows?

enter image description here

Anybody know what is going on or have any idea how to fix it?


I have also posted this as an issue on the Electron GitHub page over here.


Get this bounty!!!