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/
Related
I have a slight problem with a basic Node.JS method. When I'm trying to use "require()' method to import any downloaded (with 'npm install ..) module/library, I get a Visual Studio Code message that asks 'to convert 'require'(which is a Common JS module) into ES. If I do it, it transforms 'require()' into 'import..' though I want keep using 'require()'. Why is it so ? I read somewhere that Common JS is already included in the Node.JS environment though.
Then, when trying to compile my index.js file (with 'node index.js'), I obviously get an error about 'require' not recognized method.
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users...index.js from C:\Users...index.js not supported.
I tried then to install Webpack to fix this issue, but nothing change. I also kind of installed CommonJS (npm i common-js)..
Another common answer was to remove 'type':'module' from package.json file which normally should allow to use 'require', but I don't even have such a line in the file.
On top of that I've recently read that 'require' is not compatible with browser development tools (it's ok). But I'm trying to import a downloaded module/npm package in VSC terminal, not even in a browser.
As you understand I'm new to Node.JS, but I don't really get what's going on in this case...
Recently I have updated the node version to 16+. Prior to that, I was able to trigger the yarn build command to create the build of my project.
But after installation of node 16+, the yarn build command is throwing the following errors
./lib/view-registration.js
Module not found: Error: Can't resolve 'hoisted/#msdyn365-commerce-modules/wishlist/dist/lib/modules/wishlist-items/wishlist-items.view.js' in 'H:\source\D365_eCommerce\lib'
# ./lib/view-registration.js 5:112769-113063
# ./node_modules/#msdyn365-commerce/bootloader/entry/client.js
# multi ./node_modules/#msdyn365-commerce/bootloader/entry/webpack-public-path.js ./node_modules/#msdyn365-commerce/bootloader/entry/client
It seems like it is trying to pick the module from the hoisted folder.
I am new to this concept so have no idea why it is targeting this folder in spite of this it should pick the module from '#msdyn365-commerce-modules/wishlist/dist/lib/modules/wishlist-items/wishlist-items.view.js' directly.
Any explanation would be appreciated.
How can I force it to not pick the module directly from the hoisted folder and use '#msdyn365-commerce-modules/wishlist/dist/lib/modules/wishlist-items/wishlist-items.view.js' directly
Thanks,
Aman
This issue mainly occurred due to the corrupt version of Node.
The only possible solution for this is to make sure that all the dependencies required for Node (16+) are also installed.
We can either download all the dependencies manually or just need to allow the node itself to download all the dependencies at the time of installation.
Thanks,
Aman
I've been doing a lot of React projects which use the same components. I came to know about npm link recently, and I thought I could use it for code sharing locally.
So, I isolated some React components (calling 'A') in a directory and made a link by 'npm link' command and also 'npm link {package name}' in my projects to use it. I wrote some dependencies which 'A' depends on like styled-components and React in peerDependencies.
Basically, what I thought was the packages which 'A' depends on
doesn't need to be installed in 'A', but installed in main project which actually uses the source code, so I put them in peerDependencies. However, when I build the main project with webpack, it gives errors like
Module not found: Error: Can't resolve 'react/jsx-runtime'
Module not found: Error: Can't resolve 'react
Module not found: Error: Can't resolve 'styled-components'
I installed those modules in 'A' to figure it out, and it built successfully, but also invoked another error something like another copy of react, so I got lost after that.
I want to know what I am doing wrong and how to fix this. A little bit of hint would be much appreciated.
I have an existing project where we integrated Flow's type system into the react side. The project is electron-based so, by definition, a mono-repo. We ran in to all kinds of issues getting flow to recognize import statements.
node_modules imports would fail:
import _ from 'lodash'; // Flow: Cannot resolve module lodash
And more importantly, we wanted absolute pathing relative to our project:
import {MyComponent} from 'src/component/myComponent';
// Flow: Cannot resolve module src...
Finding a solution on this took a bit of digging, and the documentation is a little lacking in some areas, so I want to throw a compiled list of what actually worked out there.
TL;DR;
Get flow set up on webstorm so it is giving you module errors
Set up flow globally, and point webstorm's js settings to use Flow and point it at the global copy of flow-bin (not even the exe, just the dir)
add the following options to .flowconfig:
[options]
module.name_mapper='^src\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
module.system=haste
Full version
A few basic steps have to be done to get flow to work in webstorm at all:
Install flow-bin globally
Several sources made the claim that flow-bin runs better globally
Install flow-bin globally
yarn global add flow-bin
or
npm i -g flow-bin
Double check that it gave you a current version of flow-bin, this
refused to work on 0.75.0 or earlier
Set up Webstorm's flow executable
On Webstorm: File > Settings > Languages & Frameworks > Javascript
Choose Flow as the JavaScript language version
Find where your package manager (yarn or npm) stores global files
On Windows+yarn this is C:/Users/[your username]/AppData/Local/Yarn/Cache/v1
On Windows+NPM this is C:/Users/fish/AppData/Roaming/npm/node_modules
That makes my flow path:
C:/Users/[your username]/AppData/Local/Yarn/Cache/v1/npm-flow-bin-[whatever]/
On Webstorm's JavaScript settings, Target the Flow package or executable to the global flow path we just found
Apply, ok
Setting up Flow's .flowconfig
.flowconfig setup side notes
I have a root git project with 2 parts, react, and electron. Flow does things based on where you put the .flowconfig file.
If it includes "all=true", remove that line and go add // #Flow to your files you want flow to check (otherwise it will start indexing all of node_modules
Reproducing my problem
Put .flowconfig in your react directory
Enjoy all the "Flow: Cannot import module" squiggly lines of doom
Solution to the module problem
This is my current .flowconfig
[ignore]
.*/build/.*
[include]
[libs]
[lints]
[options]
module.name_mapper='^src\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
module.system=haste
[strict]
Why does this work?
Tells the name mapper to resolve modules that begin with src/ to the src/ directory so your absolute paths to your project's files work:
module.name_mapper='^src\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
Tells flow to use the "haste" module system:
module.system=haste
The haste module system step is important because otherwise it doesn't know that by 'lodash' you mean './node_modules/lodash'. Telling it to use haste means it will properly find your import statements. More info on haste available here
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.