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
Related
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.
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
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()],
I created a component library using vue-cli 3, and then pulled that into another repo to use the components. Now I am getting the error:
Uncaught Error: Module build failed: Error: Couldn't find preset "#vue/app" relative to directory "/{path_to_project}/node_modules/{vue_cli_app}"
at {path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293
at Array.map (<anonymous>)
at OptionManager.resolvePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275)
at OptionManager.mergePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264)
at OptionManager.mergeOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249)
at OptionManager.init ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368)
at File.initOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:212)
at new File ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:135)
at Pipeline.transform ({path_to_project}/node_modules/babel-core/lib/transformation/pipeline.js:46)
at transpile ({path_to_project}/node_modules/babel-loader/lib/index.js:50)
at Object.module.exports ({path_to_project}/node_modules/babel-loader/lib/index.js:175)
at {path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293
at Array.map (<anonymous>)
at OptionManager.resolvePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275)
at OptionManager.mergePresets ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264)
at OptionManager.mergeOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249)
at OptionManager.init ({path_to_project}/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368)
at File.initOptions ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:212)
at new File ({path_to_project}/node_modules/babel-core/lib/transformation/file/index.js:135)
at Pipeline.transform ({path_to_project}/node_modules/babel-core/lib/transformation/pipeline.js:46)
at transpile ({path_to_project}/node_modules/babel-loader/lib/index.js:50)
at Object.module.exports ({path_to_project}/node_modules/babel-loader/lib/index.js:175)
at Object.__webpack_exports__.a (aggregation.bundle.js:13)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.<anonymous> (select.vue:1)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.Array.concat.path (vue-multi-select.component.js:11)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.Array.concat._extends (app-files.generated.js:86)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
at Object.Array.concat.module.exports (app.js:111)
at __webpack_require__ (bootstrap ec9b411d2dc4def5406f:54)
This is coming from the autogenerated .babelrc in the vue-cli project:
{
"presets": [
"#vue/app",
"vue"
]
}
Is there a way to change the .babelrc reference so that it can be used when imported elsewhere?
I don't believe the correct way to do this would be to reference the .babelrc from the project importing the library. My solution would be:
Transpile the library prior to exporting
Build into a dist directory
Import the built dist directory into the project which is using the library.
I believe babel can do something simple like babel -d ./dist to build the directory, you can see the documentation here
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?