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.
Related
Getting below error for any snapshot testing where the component is using following import
import { Auth } from 'aws-amplify';
Test suite failed to run
NetInfo must be passed to networkMonitor to enable reachability in React Native
at ReachabilityNavigator.Object.<anonymous>.ReachabilityNavigator.networkMonitor (node_modules/#aws-amplify/core/src/Util/Reachability.native.ts:20:10)
at Object.<anonymous> (node_modules/#aws-amplify/datastore/src/sync/datastoreReachability/index.native.ts:4:55)
at Object.<anonymous> (node_modules/#aws-amplify/datastore/src/sync/datastoreConnectivity.ts:3:1)
If you go to the aws-aplify code, that error is thrown in this networkMonitor function, which is called in this other place where #react-native-community/netinfo is used. Mocking the dependency as indicated in the lib README should fix the issue.
If you do not have a Jest Setup file configured, you should add the
following to your Jest settings and create the jest.setup.js file in
project root:
setupFiles: ['<rootDir>/jest.setup.js']
You should then add the
following to your Jest setup file to mock the NetInfo Native Module:
import mockRNCNetInfo from '#react-native-community/netinfo/jest/netinfo-mock.js';
jest.mock('#react-native-community/netinfo', () => mockRNCNetInfo);
I would like to import pdf-lib into my vue.js application.
Installed using npm
npm install --save pdf-lib
Imported into my component like this,
import _ from "#pdf-lib";
export default {
data() {
I get the following error message,
Module not found: Error: Can't resolve 'pdf-lib' in
I'm trying to integrate the use of Vuex into a very small Vue 3 application, but I'm unable to load things for reasons that are totally unclear to me. My main.js is very simple and does a use() statement on the Vuex store as documentation indicates I should do:
import { createApp } from "vue"
import App from "./app.vue"
import store from "./store.js"
const app = createApp(App)
app.use(store)
app.mount("#app")
The store itself is pretty simple with the first relevant lines looking like the following:
import axios from "axios"
import { createStore } from "vuex"
export default {
store: createStore({
However, when I load my app after it compiles successfully without any warnings, I get this in the debugger:
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Property "$store" was accessed during render but is not defined on instance.
at <EventListByDay>
at <App>
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of render function
at <EventListByDay>
at <App>
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: Cannot read property 'state' of undefined
at Proxy.events (event-list-by-day.vue?04a6:61)
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:819)
at Object.get [as events] (runtime-core.esm-bundler.js?5c40:5611)
at Proxy.render (event-list-by-day.vue?04a6:2)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:696)
at componentEffect (runtime-core.esm-bundler.js?5c40:4035)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4018)
What am I missing? I know it's something basic here. Note that installed Vuex as npm install --save vuex#next as the Vuex documentation indicated I should do to support Vue 3.
You're exporting it as an object {store: Store} but what you really want to do is export the Store instance created by createStore().
On your store.js
const store = createStore({
...
...
})
export default store
or
export default createStore({
...
...
})
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'm trying to integrate a Datatable plugin (https://www.npmjs.com/package/vuejs-datatable) in my Vue application and I'm getting an error in my console.
Uncaught TypeError: Cannot read property 'use' of undefined
at eval (vuejs-datatable.js?b015:1)
at Object.eval (vuejs-datatable.js?b015:1)
at eval (vuejs-datatable.js:4)
at Object../node_modules/vuejs-datatable/dist/vuejs-datatable.js (app.js:10170)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (selector.js?type=script&index=0!./src/views/tables/data-table.vue:2)
at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/tables/data-table.vue (app.js:1438)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
My dataTable.vue file:
<template lang="html">
<section class="data-table">
<datatable :columns="columns" :data="rows"></datatable>
</section>
</template>
<script lang="js">
import Vue from 'vue'
import DatatableFactory from 'vuejs-datatable'
export default {
name: 'DatatablePage'
}
Vue.use(DatatableFactory)
</script>
And whenever i try to use 'Vue.use(PluginName)' when integrating a plugin, i get the similar error. I'm new to VueJS. Is there anything i need to do ?
You need to add plugin before your main Vue instance is initialized; See using vue plugins here, which says:
Use plugins by calling the Vue.use() global method. This has to be
done before you start your app by calling new Vue().
For your case, move
import Vue from 'vue'
Vue.use(DatatableFactory)
to your main.js, so it looks like:
import Vue from 'vue'
Vue.use(DatatableFactory)
// some other code
new Vue({
...
})
Adding the following in weback.config.js seemed to do the trick:
module.exports = {
resolve: {
alias: {
...
'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js',
...
}
},
}
Based on discussion here:
https://github.com/pstephan1187/vue-datatable/issues/50
I faced the same error in my vue-app.
import Vue from 'vue';
import VueRouter from 'vue-router';
...some more imports here....
Vue.use(VueRouter);
...
The error was cannot read property 'use' of undefined. Which means, it had a problem with reading Vue. I checked my package.json and package-lock.json (for whether I installed in my local). Everything seemed ok. I had both Vue and Vue-router.
Deleting node_modules and re-installing worked for me.