Require is not defined when importing #project-serum/anchor - vue.js

I'm trying to import #project-serum/anchor to a Vue 3 project, with
import * as anchor from '#project-serum/anchor';
The project compiles fine, but when the component loads it throws an error:
VM28957:1 Uncaught (in promise) ReferenceError: require is not defined
at eval (eval at nodeWrap (sha256.js?6c27:1), <anonymous>:1:1)
at nodeWrap (sha256.js?6c27:83)
at createMethod (sha256.js?6c27:67)
at eval (sha256.js?6c27:501)
at Object.eval (sha256.js?6c27:518)
at eval (sha256.js:521)
at Object../node_modules/js-sha256/src/sha256.js (3.js:1335)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Module.eval (common.js?789d:1)

I was able to solve this by setting window.JS_SHA256_NO_NODE_JS = true

Related

What's causing "export 'default' (imported as 'Axios') was not found in 'axios' (module has no exports)"?

I'm using Ionic with VueJs and JSON-Server. I'm calling a get request with an OnMounted, but when I run Ionic Serve I get the following error:
export 'default' (imported as 'Axios') was not found in 'axios' (module has no exports)
It still compiles, and when I click the page where the OnMounted is, I get this error:
ReferenceError: module is not defined
at eval (index.js?f8df:1:1)
at ./node_modules/axios/index.js (src_views_EventsPage_vue.js:277:1)
at __webpack_require__ (app.js:233:33)
at fn (app.js:486:21)
at eval (AxiosService.js:5:63)
at ./src/services/AxiosService.js (src_views_EventsPage_vue.js:73:1)
at __webpack_require__ (app.js:233:33)
at fn (app.js:486:21)
at eval (EventsService.js:12:71)
at ./src/services/EventsService.js (src_views_EventsPage_vue.js:84:1)
From what I can tell, the Axios index.d.ts file is as it should be, containing many exports. I've run npm i axios --save.
I use the same code in another project that does not run Ionic but has Vite and a few other things included.

Process not defined in node modules

Can anyone help me solve this error I get in my console when I run a ReactJS project
Uncaught ReferenceError: process is not defined
at ./node_modules/mysql/node_modules/readable-stream/lib/_stream_writable.js (_stream_writable.js:57:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/mysql/node_modules/readable-stream/readable-browser.js (readable-browser.js:4:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/mysql/lib/protocol/sequences/Query.js (Query.js:7:1)
at options.factory (react refresh:6:1)
I have tried npm i -D react-error-overlay#6.0.9 and npm i process

Sass #use won't import in Vue Components

I am trying to import a variable from a scss stylesheet into a vuejs component but I am getting an error. Importing it with #import works fine but not with #use.
colors.scss:
$color-x: blue;
contact.vue:
<style scoped lang="scss">
#use "../../css/colors";
.btn {
background: colors.$color-x;
}
</style>
Website throws this:
Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$color-x".
on line 22 of resources/vue/sections/contact.vue
>> background: $color-x;
------------------^
at Object../node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-12.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/sections/contact.vue?vue&type=style&index=0&id=60450740&scoped=true&lang=scss (app.js:28382)
at __webpack_require__ (app.js:52481)
at Module../node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-12.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/sections/contact.vue?vue&type=style&index=0&id=60450740&scoped=true&lang=scss (app.js:46766)
at __webpack_require__ (app.js:52481)
at Module../resources/vue/sections/contact.vue?vue&type=style&index=0&id=60450740&scoped=true&lang=scss (app.js:48663)
at __webpack_require__ (app.js:52481)
at Module../resources/vue/sections/contact.vue (app.js:47775)
at __webpack_require__ (app.js:52481)
at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/index.vue?vue&type=script&setup=true&lang=js (app.js:25818)
at __webpack_require__ (app.js:52481)

Error "Cannot read property 'indexOf' of undefined" binding n-api module

I wrote a c++ module using n-api, compiled it with cmake-js and now want to use it in my electron-vue app. If I use the module in a project without electron-vue it works. But when I try to use it in my electron-vue app I'm always getting this error:
App threw an error during load
TypeError: Cannot read property 'indexOf' of undefined
at Function.getFileName (D:\temp\test2\node_modules\bindings\bindings.js:178:16)
at bindings (D:\temp\test2\node_modules\bindings\bindings.js:82:48)
at eval (webpack:///./src/main/index.js?:28:67)
at Module../src/main/index.js (D:\temp\test2\dist\electron\main.js:3822:1)
at __webpack_require__ (D:\temp\test2\dist\electron\main.js:21:30)
at eval (webpack:///./src/main/index.dev.js?:11:1)
at Object../src/main/index.dev.js (D:\temp\test2\dist\electron\main.js:3810:1)
at __webpack_require__ (D:\temp\test2\dist\electron\main.js:21:30)
at eval (webpack:///multi_./src/main/index.dev.js_./src/main/index.js?:1:1)
at Object.0 (D:\temp\test2\dist\electron\main.js:3880:1)
I'm using bindings like so:
const colorBalance = require('bindings')('colorBalance');
I have tried to define my module as external according to this but it didn't solve the problem:
// vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
externals: ['NameOfMyModule']
}
}
}
Most probably you are trying to apply method 'indexOf' to variable which isn't defined yet. Take a look at docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf . Check if your variable is defined somewhere and it should be an array type.
In the meantime I've tried to import the module without bindings:
const colorBalance = require('../../build/Release/colorBalance.node');
Then I getting a new error:
Error: Cannot open D:\temp\test2\build\Release\colorBalance.node: Error: Module did not self-register.
at Object.eval (webpack:///./build/Release/colorBalance.node?:1:155)
at eval (webpack:///./build/Release/colorBalance.node?:2:30)
at Object../build/Release/colorBalance.node (D:\temp\test2\dist\electron\main.js:97:1)
at __webpack_require__ (D:\temp\test2\dist\electron\main.js:21:30)
at eval (webpack:///./src/main/index.js?:28:20)
at Module../src/main/index.js (D:\temp\test2\dist\electron\main.js:3833:1)
at __webpack_require__ (D:\temp\test2\dist\electron\main.js:21:30)
at eval (webpack:///./src/main/index.dev.js?:11:1)
at Object../src/main/index.dev.js (D:\temp\test2\dist\electron\main.js:3821:1)
at __webpack_require__ (D:\temp\test2\dist\electron\main.js:21:30)
I've rebuild electron using electron-rebuild. I've read about win_delay_load_hook here and tried this but the error doesn't disappear.
I've solved my problem by changing the build chain from cmake to gyp. Compiling with gyp everything works fine.
#grobotor, regarding the self-register issue. Please see these resources :)
https://stackoverflow.com/a/41283828
https://stackoverflow.com/a/55177338
TLDR; I discovered my issue was due to this in the bindings.gyp
"sources": [ ],
This was causing the error "Error: Module did not self-register" when I was attempting to run autotests on Linux (as module is only built for mac)
https://github.com/codebytere/node-mac-permissions/issues/23
Regarding your original issue, I don't think electronBuilder externals is where that property should be since it's a packager. The externals needs to configure the bundler, such as with webpack's externals
Example of my configuration:
// Bundle all deps when building dist (except native modules), otherwise streamline development by just using local node_modules dir
externals: packDistributable ? [{
permissions: "node-mac-permissions"
}] : [nodeExternals()],

How to mock propType of Image (React native) in Jest

I have the following error on a jest test that uses react-native and react-native-router-flux
Runtime Error
- TypeError: Cannot read property 'source' of undefined
at Object.<anonymous> (node_modules/react-native-router-flux/src/NavBar.js:155:45)
at Object.<anonymous> (node_modules/react-native-router-flux/src/DefaultRenderer.js:21:13)
at Object.<anonymous> (node_modules/react-native-router-flux/index.js:3:22)
This is the line that causes the trouble
backButtonImage: Image.propTypes.source,
so I guess that Image.propTypes is not defined correct
How can I fix this?