My first electron app: it's an admin app intended to run only on my machine
I want to add the #google-cloud/datastore module to it, but electron won't start once I import the package.
I add the package using 'yarn add', then rebuild for electron using electron-rebuild as instructed here: https://electronjs.org/docs/tutorial/using-native-node-modules
The first error is:
Failed to compile
./node_modules/#grpc/grpc-js/build/src/channel.js
Module not found: Can't resolve 'http2' in '<...>\node_modules\#grpc\grpc-js\build\src'
So I try manually yarn add'ing http2, electron-rebuild, and 'yarn start', after which I get a few warnings:
./node_modules/http2/lib/protocol/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
./node_modules/grpc/src/grpc_extension.js
Critical dependency: the request of a dependency is an expression
./node_modules/grpc/node_modules/node-pre-gyp/lib/pre-binding.js
Critical dependency: the request of a dependency is an expression
./node_modules/grpc/node_modules/node-pre-gyp/lib/util/versioning.js
The app then starts but shows a long list of errors.
Error: Cannot find module './../process/browser.js'
... intermediate errors, below is the module trying to import
Module../node_modules/merge2/index.mjs
I'm not sure if/what I'm doing wrong, or if google datastore is somehow not compatible with electron?
Using the latest Electron & google packages (and no other changes) seems to have resolved this issue
Related
Current behavior
I know this kind of issue was fixed in the version 5.1.0 but ...
I'm trying to seed DB in the Node JS part logic at the before hook
We have the cls-hooked and 1 more internal npm module for sharing both use async_hooks
When I'm trying to import and use any of that modules I receive crashes at the test script launch:
Error: Webpack Compilation Error
./node_modules/...[our private module name].../lib/...[file name]....js
Module not found: Error: Can't resolve 'async_hooks' in '/Users/.../node_modules/...[private module or cls-hooked].../lib'
resolve 'async_hooks' in '/Users/.../node_modules/...[private module or cls-hooked].../lib'
Parsed request is a module
using description file: /Users/.../node_modules/...[private module or cls-hooked].../package.json (relative path: ./lib)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
Desired behavior
Test script launch should go smoothly with before hook executing
Test code to reproduce
require some module in ./cypress/plugins/index.ts with next similar logic
var async_hooks = require("async_hooks");
var asyncLocalStorage = new async_hooks.AsyncLocalStorage();
...
asyncLocalStorage.getStore();
Cypress Version
^8.1.0 - 8.5.0
Cypress binary version: 8.5.0
Electron version: 13.2.0
Bundled Node version: 14.16.0
tried Node version: 14.17.6 and 16.9.1
the same for:
Cypress binary version: 7.7.0
Electron version: 12.0.0-beta.14
Bundled Node version: 14.15.1
Other
additional install of "async_hooks": "^1.0.0" didn't help
Using TS
"typescript": "^4.1.5"
OS
macOS Big Sur 11.16
The problem was in 1 common file for both processes browser and NodeJs in Cypress.
In this case, Webpack built the bundle with 'browser' context but received NodeJs context logic. That's why the error occured.
When I used enum in Browser part in the file which besides that also exports NodeJs logic it (Webpack) didn't make the 'treeshaking', thus the NodeJs logic was imported into the bundle for browser process logic. 🤷♂️
Ive only been learning Javascript/Typescript since the start of the year as I decided to create a group of microservices that are all linked together. I have my own API created in nestJS and found that whenever I wanted to call the API from each microservice i was repeating the same code over and over again so I moved it all into its own separate package which I can use.
Every other project I have which uses my npm package does not cause any errors and works fine however these projects are done using babel. I decided to implement my new package into my react frontend project but whenever I import the package and try to use it I get an error
SyntaxError: D:\Projects\Node\Lab Maker\redditbot-frontend\node_modules\labmaker-api-wrapper\lib\utils\BaseAPI.js: Missing class properties transform.
I managed to fix this issue by installing the babel class transform package but then was presented with another error.
Failed to compile.
./node_modules/labmaker-api-wrapper/lib/utils/BaseAPI.js 13:9
Module parse failed: Unexpected token (13:9)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| class API {
> APIBase;
| APIUrl = 'http://localhost:3000';
|
I'm not sure what is wrong with my package or what causes this error but if anyone is able to take a look at the source code for my npm module and explain how I would fix this issue that would be helpful. https://github.com/LabMaker/API-Wrapper
this is the npm package https://www.npmjs.com/package/labmaker-api-wrapper
I have following app structure:
Application A
Application B
Common package
Now Application A and B have in package.json the common package added:
{
dependencies: {
"commonPackage": "file:../../../commonPackage"
}
}
both apps use React, as well as the common package, all had React added with npm, and it worked, before we started to use react hooks.
Because when we started, we got an Invalid Hook Call Warning due to having "more than one copy of React", so to avoid that, in the common package, the react dependency was moved to peerDependencies so that the react instance from the app is used and not from the package.
It works great in the browser when we run both apps A and B, but when I run my mocha tests in the console, I get:
ERROR in ../commonPackage/~/#uifabric/utilities/lib/customizations/Customizer.js
Module not found: Error: Can't resolve 'react' in 'D:\myProject\commonPackage\node_modules\#uifabric\utilities\lib\customizations'
this is from the office-ui-fabric-react package we use, but it seems like a more general issue with dependency resolution.
Project is in TypeScript, we use webpack for the compilation of the app for the browser, and tsc to compile for the unit tests.
I found some answers, suggesting to npm link react in the common package to the react package in the application node_modules, but it seems wrong, since the common package is used by two applications, it would solve the issue only for one.
In the case above we finally came to a solution which was
adding back react as devDependency to Common package
using esm package to help our test runs understand es6 module export/import that came with fabric package. Just using mocha --require esm ...
ejecting and adding alias to webpack.config.js in Application
alias: {
'react': path.resolve('./node_modules/react')
}
Application A, B and hooks work now.
I'm attempting to use the fetch function in react-native to grab a piece of data from the web. from what I understand reading the docs, the fetch function is built in to react-native.
when doing so, I get the module resolution error in the attached screenshot, where for whatever reason the react-native bundler is attempting to use the fetch provided by typescript from my ~/.cache directory.
I've previously had typescript 2.6 installed globally via npm, I uninstalled it to see if that might fix things, but the error persists.
I should note that the only things I've done for this project are to create it with create-react-native-app, add a little snippet to the App.js component stolen from the react docs to fetch some JSON, and yarn run eject the project (this error persisted before and after the ejection)
well in my turkey-induced frenzy, it appears I hadn't properly uninstalled the global typescript install on my computer.
having done so properly, the issue is resolved;
however the issue of react-native's module resolution strategy being incompatible with a global typescript installation persists.
I'm working on an open source electron project which I am building using webpack. One requirement for my project is to use the nodegit library which has to be built as a native module.
I've followed what appears to be conventional advice when working with native modules and electron. That is, I run electron-rebuild, have configured the source package to use and finally have configured node-loader to catch the import of any .node files.
Unfortunately, when I go to include the module, I end up with this error:
ERROR in ./node_modules/nodegit/dist/nodegit.js
Module not found: Error: Can't resolve '../build/Debug/nodegit.node' in
'C:\Users\atrauzzi\Development\atrauzzi\gerty\node_modules\nodegit\dist'
# ./node_modules/nodegit/dist/nodegit.js 18:11-49
# ./src/Layer/Domain/Thunktor/Git/CloneGitRepository.ts
# ./src/Layer/Gerty/Component/Repository/AddGitHubRepository.tsx
# ./src/Layer/Gerty/Component/Repository/AddRepository.tsx
# ./src/Layer/Gerty/Component/Workspace.tsx
# ./src/Layer/Gerty/Component/App.tsx
# ./src/Layer/Gerty/GertyServiceProvider.ts
# ./src/Bundle/GertyElectron.ts
The only thing I can see that's suspicious at this point is that when I rebuild the module to work with electron, I only get a Release directory, when the import seems to be looking for Debug:
This could be a red herring however as nodegit is written to try Debug as a fallback after Release has failed.
The general ask here is "How do I get this native module working in my project?".
I also have a corresponding question over at the repo, although on the off chance that my issue is unrelated to the library itself, or that there are some battle-worn veterans of native modules in electron, I figured SO would be a good place to check as well.
Try configuring your webpack by specifying the native module as an external dependancy rather than load it using the node-loader.
https://webpack.js.org/configuration/externals/