I have Node.js v12.13.0 installed but still, I am getting below error. I have checked lots of questions regarding this but solution in all the question is updated node version.
Uncaught TypeError: crypto__WEBPACK_IMPORTED_MODULE_5__.generateKeyPairSync is not a function
at Login.render (Login.jsx:31)
at finishClassComponent (react-dom.development.js:17098)
at updateClassComponent (react-dom.development.js:17051)
at beginWork (react-dom.development.js:18513)
at HTMLUnknownElement.callCallback (react-dom.development.js:189)
at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
at invokeGuardedCallback (react-dom.development.js:291)
at beginWork$1 (react-dom.development.js:23055)
at performUnitOfWork (react-dom.development.js:22022)
at workLoopSync (react-dom.development.js:21995)
at performSyncWorkOnRoot (react-dom.development.js:21613)
at scheduleUpdateOnFiber (react-dom.development.js:21045)
at updateContainer (react-dom.development.js:24194)
at react-dom.development.js:24577
at unbatchedUpdates (react-dom.development.js:21763)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:24576)
at Object.render (react-dom.development.js:24659)
at Module../src/index.js (index.js:27)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Object.1 (PlayerStore.jsx:21)
at __webpack_require__ (bootstrap:781)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
Judging by the stacktrace, it looks like this code is running in the browser. The crypto.generateKeyPairSync API is only available in Node.js. Basically, it can only be used server-side, not in the frontend.
You would need something like the Web Crypto API, built into modern browsers. Here is an example RSA key pair generation:
let keyPair = window.crypto.subtle.generateKey(
{
name: "RSA-OAEP",
modulusLength: 4096,
publicExponent: new Uint8Array([1, 0, 1]),
hash: "SHA-256"
},
true,
["encrypt", "decrypt"]
);
Related
When I name my style files as "App.css" everything is fine, but if I name it as "App.module.css" it gives me the following error:
Uncaught TypeError: props.styles.reduce is not a function
at Styled (Styled.js:9:1)
at renderWithHooks (react-dom.development.js:14803:1)
at mountIndeterminateComponent (react-dom.development.js:17482:1)
at beginWork (react-dom.development.js:18596:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
at invokeGuardedCallback (react-dom.development.js:292:1)
at beginWork$1 (react-dom.development.js:23203:1)
at performUnitOfWork (react-dom.development.js:22154:1)
at workLoopSync (react-dom.development.js:22130:1)
at performSyncWorkOnRoot (react-dom.development.js:21756:1)
at scheduleUpdateOnFiber (react-dom.development.js:21188:1)
at updateContainer (react-dom.development.js:24373:1)
at react-dom.development.js:24758:1
at unbatchedUpdates (react-dom.development.js:21903:1)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757:1)
at Object.render (react-dom.development.js:24840:1)
at WebComponent.mountReactApp (WebComponentFactory.js:204:1)
at WebComponent.connectedCallback (WebComponentFactory.js:66:1)
at DireflowComponent.<anonymous> (DireflowComponent.js:47:1)
at Generator.next (<anonymous>)
at fulfilled (DireflowComponent.js:4:1)
index.js:1 The above error occurred in the <Styled> component:
in Styled (at App.js:14)
in App
in StylesProvider
in Portal (created by ShadowRoot)
in ShadowRoot
...
I am working on an Express based backend API with Firebase. I have some issues with Firebase configuration.
When I try to require firebase I get the following error.
const firebase = require('firebase');
node:internal/modules/cjs/loader:499
throw e;
^
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /home/***/Desktop/Express/DemoBackend/node_modules/firebase/package.json
at new NodeError (node:internal/errors:387:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:439:9)
at packageExportsResolve (node:internal/modules/esm/resolve:718:3)
at resolveExports (node:internal/modules/cjs/loader:493:36)
at Module._findPath (node:internal/modules/cjs/loader:533:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:942:27)
at Module._load (node:internal/modules/cjs/loader:804:27)
at Module.require (node:internal/modules/cjs/loader:1022:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/home/***/Desktop/Express/DemoBackend/firebase_config.js:1:18)
{
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
I am working with NodeJS 18.6.0
Thanks for your help!
I have a Vue.js 2.6.14 application that uses webpack to creates its webapp.
When running npm run webpack-dev-server -- --mode development --env stats=normal, I am presented with the following error in the browser, and the app does not start.
Error Screen
util.js:109 Uncaught ReferenceError: process is not defined
at Object../node_modules/util/util.js (util.js:109:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at Object../node_modules/shex-methods/node_modules/n3/lib/N3StreamParser.js (N3StreamParser.js:3:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at Object../node_modules/shex-methods/node_modules/n3/N3.js (N3.js:11:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at Module../node_modules/shex-methods/lib/validate.js (rdfToData.js:131:1)
Being relatively new to this, I am not sure what to do to fix this.
The error is caused by the inclusion of the library "Shex-methods".
This library, and the ./src/main/webapp/app/shared/model/interop.model.ts calling it, work like a charm when I test them with Jest.
The error is thrown when I try to include the library in a Vue component.
When the import is removed from the component, the app works normally.
The library needed polyfills, so I enabled the following:
resolve{
fallback: {
"path": require.resolve("path-browserify"),
"constants": require.resolve("constants-browserify"),
"crypto": require.resolve("crypto-browserify"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"zlib": require.resolve("browserify-zlib"),
'fs': require.resolve('browserify-fs'),
'net': require.resolve('net-browserify'),
'tls': require.resolve('tls-browserify'),
'async_hooks': require.resolve('async-hook-browser'),
},
}
and installed the needed browserify libraries with npm.
( :warning: they are not saved in package.json)
Here are the steps I already went through
Tried using dotenv (with .env file and import in webpack config), which changed nothing
Tried adding the plugin new webpack.DefinePlugin({'process.env.NODE_ENV': '"production"'}), which also changed nothing
Successfully logged process in webpack config and in Vue component, so am not really sure where this is happening.
I am attaching the full stack below for reference.
You can also view source code in this repository.
What can I do to solve this?
Thank you for your help!
Complete stack
./node_modules/util/util.js # util.js:109
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./node_modules/shex-methods/node_modules/n3/lib/N3StreamParser.js # N3StreamParser.js:3
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./node_modules/shex-methods/node_modules/n3/N3.js # N3.js:11
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./node_modules/shex-methods/lib/validate.js # rdfToData.js:131
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./node_modules/shex-methods/lib/handlers/create.js # sha512.js:260
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./node_modules/shex-methods/lib/shape.js # index.js:5
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./node_modules/shex-methods/lib/index.js # update.js:21
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./src/main/webapp/app/shared/model/interop.model.ts # jhi-item-count.component.ts:5
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./src/main/webapp/app/experiments/demo/demo.component.ts # entities-menu.component.ts:4
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./src/main/webapp/app/router/experiments.ts # entities.ts:14
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./src/main/webapp/app/router/index.ts # experiments.ts:9
__webpack_require__ # bootstrap:24
fn # hot module replacement:62
./src/main/webapp/app/main.ts # demo.component.ts:10
__webpack_require__ # bootstrap:24
(anonymous) # startup:6
(anonymous) # startup:6
I get an error in tf.model when convert model from tensorflow2 to tensorflow js
That line get error:
model = tf.model({inputs: img, outputs: [a, b]})
My error:
/home/whoisltd/works/mtcnn-tfjs/node_modules/#tensorflow/tfjs-layers/dist/tf-layers.node.js:30023
finally { if (e_3) throw e_3.error; }
^
TypeError: Cannot read property 'name' of undefined
at LayersModel.Container [as constructor] (/home/whoisltd/works/mtcnn-tfjs/node_modules/#tensorflow/tfjs-layers/dist/tf-layers.node.js:30015:46)
at new LayersModel (/home/whoisltd/works/mtcnn-tfjs/node_modules/#tensorflow/tfjs-layers/dist/tf-layers.node.js:32802:28)
at Object.model (/home/whoisltd/works/mtcnn-tfjs/node_modules/#tensorflow/tfjs-layers/dist/tf-layers.node.js:35296:12)
at PNet (/home/whoisltd/works/mtcnn-tfjs/models.js:39:16)
at new MTCNN (/home/whoisltd/works/mtcnn-tfjs/mtcnn.js:16:21)
at image_demo (/home/whoisltd/works/mtcnn-tfjs/demo.js:11:13)
at Object.<anonymous> (/home/whoisltd/works/mtcnn-tfjs/demo.js:38:1)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
Do you know how to fix this?
I use Nuxt, and sometimes, when I want to use some npm packages, I have this error:
SyntaxError
Unexpected token '<'
The stack:
vm.js:102:7
new Script
internal/modules/cjs/loader.js:1114:10
Module._extensions..js
internal/modules/cjs/loader.js:950:32
Module.load
internal/modules/cjs/loader.js:790:14
Module._load
internal/modules/cjs/loader.js:974:19
Module.require
webpack:/external "vue-typeahead-bootstrap":1:
Object.vue-typeahead-bootstrap
webpack/bootstrap:25:
__webpack_require__
pages/account/tabs/addresses.js:693:81
Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./components/address/form/country.vue?vue&type=script&lang=js&
webpack/bootstrap:25:
I have this error for example on this package: vue-typeahead-bootstrap
If I import the package:
import VueTypeaheadBootstrap from ['vue-typeahead-bootstrap'](https://github.com/mattzollinhofer/vue-typeahead-bootstrap)
export default {
components: { VueTypeaheadBootstrap },
}
It throws the error.
Is it because the package is not supported or something ?
You may try to transpile it. https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#transpile
Add the package name like this
{
build: {
transpile: [
({ isServer }) => 'vue-typeahead-bootstrap'
]
}
}
As answered here: https://github.com/mattzollinhofer/vue-typeahead-bootstrap/issues/19#issuecomment-645510809