Error importing 'vscode-languageserver' in a React app - node.js

I am trying to create a playground using monaco-editor and vscode-languageserver to show the features of my language server.
However when I try to import 'vscode-languageserver' from a page like the following example
//# src/pages/test.js
const { TextDocument } = require("vscode-languageserver");
console.log(TextDocument.create('a' , 'b' , 'c' , 'd' ));
https://github.com/zkrami/docusaurus-test/blob/master/src/pages/test.js
I get the following errors:
Module not found: Can't resolve 'child_process' in 'C:\Users\Rami\git\my-website\node_modules\vscode-languageserver\lib'./node_modules/vscode-languageserver/lib/files.js
Module not found: Can't resolve 'fs' in 'C:\Users\Rami\git\my-website\node_modules\vscode-languageserver\lib'./node_modules/vscode-jsonrpc/lib/pipeSupport.js
and please note that if I imported the module in the docusaurus.config.js file it works perfectly.
I made a quick example you can try:
https://github.com/zkrami/docusaurus-test/
Specifications:
yarn 1.22.4
node v10.15.3
OS: Windows
#docusaurus/core: "^2.0.0-alpha.54"

I ended up using vscode-languageserver-protocol package which fulfill my requirements.

fs is a Node module and requires Node runtime, you can't use it in the browser.
This is not a Docusaurus issue, you wouldn't be able to use it in any client-side React app.

Related

Problems with 'fs' when I try to start snowpack

[15:03:25] [snowpack] Welcome to Snowpack! Because this is your first
time running this project, Snowpack needs to prepare your
dependencies. This is a one-time step and the results will be cached
for the lifetime of your project. Please wait... [15:03:25] [snowpack]
Package "fs" not found. Have you installed it?
When I try to start snowpack I got the error above...
Is 'fs' not include in node by default? When I tried to install 'fs' via npm install fs, not started as well. Some of my files(test files) use 'fs' to run some tests...
Obs: I am using to import:
import fs from 'fs';//(not require('fs'))
Thanks. André
I discovered how to deal with it in the snowpack website using the configuration in snowpack.config.js (packageOptions.external: ["fs", "path"])
module.exports = {
packageOptions: {
/* ... */
external: ["fs", "path"]
}
}

How do I use zlib in a react app? or what is zlib_binding and why is it missing?

I have created a brand new react app using VS2022 and create-react-app.
I have installed zlib using npm install zlib.
getting the following error when running npm run start:
ERROR in ./node_modules/zlib/lib/zlib.js 1:0-43
Module not found: Error: Can't resolve './zlib_bindings' in 'c:\projects\mall\mall\node_modules\zlib\lib'
To troubleshoot, I created a test.js file with just require('zlib') in it and it works.
file ./node_modules/zlib/lib/zlib.js has import './zlib_bindings' as a single line in it. But there is no ./zlib_bindings.js.
Questions:
How do I fix this?
How does that work when I run node test.js?
Your test.js file works because you run it with node.
The zlib module provides compression functionality implemented using
Gzip and Deflate/Inflate. It is the part of nodejs core module written
in c++
This module can't be used outside of node.js
You can however try to use react-zlib-js and it should work!

SyntaxError: Unexpected identifier in TypeScript on import Web3 from "web3"

I'm setting up a Node.js environment in Visual Studio Code to debug Truffle for Ethereum development. I open the truffle source folder in VSCode, then select truffle-migrate/index.js file, press F5 and after I fix a bunch of unresolved imports, I get an error as it's trying to resolve Web3 module from a TypeScript file.
c:\Users\dimitri\Zap.org\truffle\node_modules\truffle-interface-
adapter\lib\web3-shim.ts:1
import Web3 from "web3";
^^^
SyntaxError: Unexpected identifier
I'm not sure if TypeScript is supported properly here. I tried changing
import Web3 from "web3";
to
import { Web3 } from "web3";
and
import web3 from "web3";
In folder truffle/node_modules/web3/dist there are 3 files:
web3.cjs.js
web3.esm.js
web3.umd.js
And each of them has a variation of:
var Web3 = function (_AbstractWeb3Module) {
and at the end of each file, there are:
module.exports = Web3;
export default Web3;
return Web3;
I assume these are 3 files for 3 different varieties of JavaScript. It looks like the Web3 module is being exported in them.
This is JavaScript importing TypeScript which imports JavaScript again. Am I having this issue because TypeScript is not properly set up in my environment (VSCode), or something else?
I want to set up Truffle to run inside VSCode, so I can step through it to find out what it does exactly. Truffle is a Node.js app. Am I even going about this the right way? If not, what do the developers of the Truffle Framework use and how do they set it up?
In my case i was just simply forget to install dependency
npm i web3
or
npm i -S web3

Getting error Cannot find module 'crypto'

I am trying to use node Crypto module in Angular 7 for asymmetric encryption.
and used below command to import the Crypto module
import * as crypto from 'crypto';
but still I am getting error that is
`ERROR in src/app/log-in/log-in.component.ts(11,25): error TS2307: Cannot find module 'crypto'.`
Please help me to resolve the error that how to use this library into Angular.
Thanks in Advance.
I was trying to import { randomBytes } from "crypto"; then such error occurred,
I installed node types npm install #types/node --save-dev and it was resolved.
Per the author on npm , The crypto package is no longer available as it is now built in to Node.js. I would suggest looking for an alternative. I came across a Github Gist that contains some suggestions: https://gist.github.com/jo/8619441
Make sure whatever you pick is useable in the browser. Some of the options listed there are server-side only.
Make sure that you install 'crypto' module from npm
use: npm i crypto to install this module.
for more information please visit here.
If this is still not working then you have to check for alternative module because this module is dedicated you can check this

Unable to resolve path to module './package.json' in React native application

I am trying to get application version in my react native app.
To get app version, I have written following code.
import { version } from './package.json';
console.log(version.appVersion);
But, It's throwing error like following
[eslint] Unable to resolve path to module './package.json'. [import/no-unresolved]
Any suggestions?
I have fixed is some syntax error in package.json
Package.json data just check with https://jsonlint.com/ website wether it is valid json data or not.
I my case, There is one } symbol missed. So, Fixed. it.

Resources