I try using vuex with Vue3 and Vite. After installing it with yarn like yarn add vuex#next --save
I get the error:
The requested module '/vite-dev/#fs/home/app/node_modules/.vite/vuex.js?v=f336efac' does not provide an export named 'createStore'
Any idea how to solve this?
EDIT:
store.js
import { createStore } from 'vuex'
...
const store = createStore({
plugins: [createPersistedState()],
state() {
return {...},
main.js - just importing store file
import { store } from "./store.js";
I got it solved by deleting node_modules and re-installing the dependencies. Not sure why that solved it tho.
Related
I've created a brand new project with npm init vite bar -- --template vue. I've done an npm install web3 and I can see my package-lock.json includes this package. My node_modules directory also includes the web3 modules.
So then I added this line to main.js:
import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3' <-- This line
createApp(App).mount('#app')
And I get the following error:
I don't understand what is going on here. I'm fairly new to using npm so I'm not super sure what to Google. The errors are coming from node_modules/web3/lib/index.js, node_modules/web3-core/lib/index.js, node_modules/web3-core-requestmanager/lib/index.js, and finally node_modules/util/util.js. I suspect it has to do with one of these:
I'm using Vue 3
I'm using Vue 3 Composition API
I'm using Vue 3 Composition API SFC <script setup> tag (but I imported it in main.js so I don't think it is this one)
web3js is in Typescript and my Vue3 project is not configured for Typescript
But as I am fairly new to JavaScript and Vue and Web3 I am not sure how to focus my Googling on this error. My background is Python, Go, Terraform. Basically the back end of the back end. Front end JavaScript is new to me.
How do I go about resolving this issue?
Option 1: Polyfill Node globals/modules
Polyfilling the Node globals and modules enables the web3 import to run in the browser:
Install the ESBuild plugins that polyfill Node globals/modules:
npm i -D #esbuild-plugins/node-globals-polyfill
npm i -D #esbuild-plugins/node-modules-polyfill
Configure optimizeDeps.esbuildOptions to use these ESBuild plugins.
Configure define to replace global with globalThis (the browser equivalent).
import { defineConfig } from 'vite'
import GlobalsPolyfills from '#esbuild-plugins/node-globals-polyfill'
import NodeModulesPolyfills from '#esbuild-plugins/node-modules-polyfill'
export default defineConfig({
⋮
optimizeDeps: {
esbuildOptions: {
2️⃣
plugins: [
NodeModulesPolyfills(),
GlobalsPolyfills({
process: true,
buffer: true,
}),
],
3️⃣
define: {
global: 'globalThis',
},
},
},
})
demo 1
Note: The polyfills add considerable size to the build output.
Option 2: Use pre-bundled script
web3 distributes a bundled script at web3/dist/web3.min.js, which can run in the browser without any configuration (listed as "pure js"). You could configure a resolve.alias to pull in that file:
import { defineConfig } from 'vite'
export default defineConfig({
⋮
resolve: {
alias: {
web3: 'web3/dist/web3.min.js',
},
// or
alias: [
{
find: 'web3',
replacement: 'web3/dist/web3.min.js',
},
],
},
})
demo 2
Note: This option produces 469.4 KiB smaller output than Option 1.
You can avoid the Uncaught ReferenceError: process is not defined error by adding this in your vite config
export default defineConfig({
// ...
define: {
'process.env': process.env
}
})
I found the best solution.
The problem is because you lose window.process variable, and process exists only on node, not the browser.
So you should inject it to browser when the app loads.
Add this line to your app:
window.process = {
...window.process,
};
i am trying to work on an opensource software for NLP named doccano,i tried running only the frontend part where i ran the command npm install to get all needed dependencies then when i run npm run dev it starts compiling and then fails with this error
/home/nissow/Documents/doccano/doccano/frontend/components/project/FormDelete.vue
33:14 error PropType not found in 'vue' import/named
and when i checked the FormDelete.vue i did not notice any errors and no errors were detected on vscode either
<script lang="ts">
import Vue,{ PropType } from 'vue'
import BaseCard from '#/components/utils/BaseCard.vue'
import { ProjectDTO } from '~/services/application/project/projectData'
export default Vue.extend({
components: {
BaseCard
},
props: {
selected: {
type: Array as PropType<ProjectDTO[]>,
default: () => []
}
},
computed: {
nonDeletableProjects(): ProjectDTO[] {
return this.selected.filter(item => !item.current_users_role.is_project_admin)
},
hasNonDeletableProjects(): boolean {
return this.nonDeletableProjects.length > 0
}
}
})
</script>
here's package.json content :
and here's the second part
import type { PropType } from 'vue'
see detail https://github.com/nuxt-community/composition-api/issues/189
It was also a problem elsewhere.
Sounds like a known bug in eslint and typescript. It doesn't seem to cause an error depending on the version.
https://github.com/nuxt-community/composition-api/issues/189
i just made it work, by installing yarn and then running, yarn dev as it was suggested in the README.MD the first time i was doing it with npm run dev.
What is the correct way of loading vuetify into a package that i use in a vuetify project?
When serving projects it all seems to work fine but when i build the project i've got some issues with the css/sass
things i've tried:
With vuetify loader: the css is loaded twice so i can't overwrite sass variables
Without vuetify loader: the package doesn't have the vuetify css, so it looks horrible
Without vuetify loader with vuetify.min.css: the css is loaded twice so i can't overwrite sass variables, and the loaded css is all the css so it's huge
My package is called vuetify-resource, and this is the source code of the index.js (without the vuetify loader) At this point everything works on npm run serve But when i build the package doesn't have "access" to the vuetify css.
import Vue from 'vue';
import Vuetify from 'vuetify';
import VuetifyResourceComponent from './VuetifyResource.vue';
Vue.use(Vuetify);
const VuetifyResource = {
install(Vue, options) {
Vue.component('vuetify-resource', VuetifyResourceComponent);
},
};
export default VuetifyResource;
To solve my issue i had to do a couple of things.
Make peer dependencies of vuetify and vue
add vuetify to the webpack externals, so when someone uses the package, the package uses that projects vuetify
not longer import vue and vuetify in the index.js it's not needed, the project that uses the package imports that
import the specific components that you use in every .vue file
for example:
Vue.config.js
module.exports = {
configureWebpack: {
externals: {'vuetify/lib': 'vuetify/lib'},
},
};
index.js
import VuetifyResourceComponent from './VuetifyResource.vue';
const VuetifyResource = {
install(Vue, options) {
Vue.component('vuetify-resource', VuetifyResourceComponent);
},
};
export default VuetifyResource;
part of the component.vue
import { VDataTable } from 'vuetify/lib';
export default {
name: 'vuetify-resource',
components: {
VDataTable
},
Step 4 in Ricardo's answer is not needed if you use vuetify-loader, it will do the job for you.
And I would modify step 2 to also exclude Vuetify's styles/css from your bundle. If you don't exclude them you can run into styling issues when the Vuetify version differ between your library and your application.
Use a regular expression in vue.config.js like this: configureWebpack: { externals: /^vuetify\// }. That way, only your own styles are included in the library bundle.
When trying to run the application with npm run serve (on iOS), I am getting the following error:
This relative module was not found:
./src/main.js in multi (webpack)-dev-server/client?http://10.0.0.5:8081/sockjs-node ./node_modules/#vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js
Please bear with me, I am new to this.
I have tried a bunch of random stuff like checking for misspelling issues, reinstalling webpack, updating node, and nothing. I have no clue of what this error is about so I am not sure where to look at.
The main.js file looks like this:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'
import './registerServiceWorker'
import * as VueGoogleMaps from "vue2-google-maps"
import VeeValidate from 'vee-validate'
import BootstrapVue from 'bootstrap-vue'
Vue.use(VueGoogleMaps, {
load: {
key: "AIzaSyCGiy39IZbj8oxvO4HHqSVjP5RmLSHl7mY",
libraries: "places" // necessary for places input
}
});
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
router,
store,
beforeCreate() {
this.$store.commit('initialiseStore');
this.$store.dispatch('commons/initialize');
},
render: h => h(App)
}).$mount('#app')
I expect the live web server to display, but I am getting this compilation error and it is failing.
I faced a similar issue after and spent hours searching.
The issue occurred in my project when I tried to install vuetify using command vue add vuetify. Apparently, the in automatically changes the app entry property in webpack.config automatically.
You can either change the filename itself to main.js or change the webpack config through vue.config.js (by reading the vue cli documentation regararding webpack config).
You can check your webpack.config by using the command vue inspect.
],
entry: {
app: [
'./src/main.js'
]
}
}
I had a similar error, this worked for me but not sure you have the same issue. I found this in one of my webpack configuration files (usually named like webpack.dev.conf.js):
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client')
]
},
I removed resolve('node_modules/webpack-dev-server/client') and it fixed that issue.
This is an old thread, but I ran across this recently after installing a new module to a Vue project. The problem went away when I updated all my other modules, too.
I'm using https://github.com/zhuowenli/vue-clipboards. But when i tried this it doesn't work. I'm new to vue and nuxt js. and there is an error on the console that says [Vue warn]: Failed to resolve directive: clipboard. BTW i have already installed clipboard.
Template
<button v-clipboard='message'>Copy</button>
Script
import VueClipboards from 'vue-clipboards'
export default {
components: { VueClipboards },
data () {
return {
message: 'asdad'
}
}
}
This same issue is mentioned here:
https://github.com/Inndy/vue-clipboard2/issues/4
You can solve it adding the component in the main.js file. By doing that, you are making it global.
https://vuejsfeed.com/blog/copy-texts-to-clipboard-using-vue-clipboard2
Best regards
I got the same error here
Resolved it by
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);
You have to import Vue & use it
import Vue from 'vue'
import vueClipboards from 'vue-clipboards'
Vue.use(vueClipboards)
...
Don't forget to remove the components: { VueClipboards },
import vueClipboards from 'vue-clipboards'
Vue.use(vueClipboards)
Import it to the main component and it works for me!!
Even before importing it to the current component I removed the "components: { VueClipboards }" but still it was not working. I just imported it to component instead of importing it to the Main.js file.