I have a pug file with the following...
#footer
script(type="module")
| import Vue from '/vue/vue.esm.browser.js'
| import { JRGVue } from '/ui/index.js'
| import VueMaterial from '/material/vue-material.js'
| (()=>{
| const vue = new JRGVue(Vue);
| vue.app.use(VueMaterial);
| vue.app.$mount('#jg-app');
| })();
I get
Uncaught SyntaxError: The requested module '/material/vue-material.js' does not provide an export named 'default'
When I change it to
import * as VueMaterial from '/material/vue-material.js'
I get
Uncaught TypeError: _vue2.default is not a constructor
What is the proper way to import the Vue Material library using ESM?
Update
It does seem to work with Vuetify
#footer
script(type="module")
| import Vue from '/vue/vue.esm.browser.js'
| window.Vue = Vue;
script(type="module")
| import * as Vuetify from '/vuetify/vuetify.js';
| import { JRGVue } from '/ui/index.js';
| Vue.use(Vuetify);
| const vue = new JRGVue(Vue);
| vue.app.$mount('#jg-app');
Update
No longer seems to be working with the newest version. It would be really nice to find a UI with native ESM support
In case the import refers to vue-material library, a correct way to import it is:
import VueMaterial from 'vue-material';
And bundle the application with it.
It's impossible to import it with native ES modules (<script type="module">).
It's possible to import packages that were built as ES modules (e.g. vue.esm.browser.js for vue) but vue-material doesn't have ES6 entry point.
In case /material/vue-material.js refers to vue-material/dist/vue-material.js, it is UMD module which cannot be imported by ES module without module interop.
ES module that could be imported is vue-material/src/index.js but it cannot be imported directly because the package uses source files that aren't compliant with specs (.vue, .scss) and need to be built.
A way to import vue-material UMD module at runtime is to use SystemJS for module interop.
Also, IIFE is an antipattern in module scope.
Related
When creating the SRC folder and inserting the appropriate items, react-native started giving this error:
AppEntry.js:1 Uncaught Error: Cannot find module '../../App'
Uncaught ReferenceError: process is not defined
index.js:1 ./node_modules/expo/AppEntry.js:3
Module not found: Can't resolve '../../App'
1 | import registerRootComponent from 'expo/build/launch/registerRootComponent';
2 |
> 3 | import App from '../../App';
4 |
5 | registerRootComponent(App);
From what I understand it is not finding the App with the path which is in "AppEntry.js".
However, AppEntry is by default in package.json:
"main": "node_modules/expo/AppEntry.js"
What should I do to fix?
You have moved your App.js or App.ts from root folder to 'src' so in appEntry you need to update your path from:
import App from '../../App';
To:
import App from '../../src/App';
Or you just can move back App.tsx to root folder
You can set the initializer path using the "main" property in package.json (note if you do so you need to write something like this.
import { registerRootComponent } from "expo";
import App from "./App";
export default registerRootComponent(App);
An example is https://github.com/trajano/spring-cloud-demo/blob/83887627274afa1970b5a0861e7c7d2e27efecce/expo-app/src/init/index.ts#L10-L13
with the package.json line https://github.com/trajano/spring-cloud-demo/blob/rework/expo-app/package.json#L5
Doing this gives you more flexibility, and I generally don't see the downside to doing it.
I'm new to use Bootstrap-vue, since I use CDN reference to use it, it work abd perfect for me. Now I try to change webpack version, I face on some issue.
This is CDN version of bvModal.msgBoxOk method
this is webpack version of bvModal.msgBoxOk method
you can see the different in top of "X" button, I don't know which step I missing. The following is my main.ts file
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Vue from 'vue';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue);
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin);
Any body can help me?
I'm trying to include Bootstrap-Vue in my (fresh) Vue-Project. I've used the Bootstrap-Vue Vue CLI 3 plugin (vue add bootstrap-vue). Starting the app with npm run serve results in the following error:
Failed to compile.
./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
29 │ -webkit-tap-highlight-color: rgba($black, 0); // 5
│ ^^^^^^
╵
node_modules/bootstrap/scss/_reboot.scss 29:37 #import
src/assets/scss/vendors/bootstrap-vue/index.scss 4:9 #import
src/App.vue 20:9 root stylesheet
My main.js looks like this:
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
import './assets/app.scss'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
bootstrap-vue.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
app.scss
$body-bg: #000;
$body-color: #111;
#import 'node_modules/bootstrap/scss/bootstrap.scss';
#import 'node_modules/bootstrap-vue/src/index.scss';
I'm pretty sure it has to do with importing some file, but I can't figure it out. I'm using Vue-Version 2.6.11.
I've managed to solve the issue: when including bootstrap-vue via vue add bootstrap-vue, you will be asked three questions:
Use babel/polyfill? → Yes
Use scss? → Yes
Would you like to inject vars, functions and mixins in all SFC components? → If you answer "No" here, it will lead to the described error. Choose "Yes".
The last step that needs to be taken to make Bootstrap work properly, is importing the styles. You can do this by adding the following to your main.js:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
The following error message is given:
"Argument of type 'typeof VueAnalytics' is not assignable to parameter of type 'Plugin_2'.
Type 'typeof VueAnalytics' is not assignable to type '{ install: PluginInstallFunction; }'.
Types of property 'install' are incompatible."
What am I doing wrong ? Thank you very much for your help.
import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import VueAnalytics from "vue-analytics";
createApp(App)
.use(store)
.use(VueAnalytics, {id:'', router})
.mount("#app");
This error indicates that the plugin was built for Vue 2 and is not compatible with Vue 3. Checking the package's npm page reveals that there have been no updates in the last year. The requirement also lists Vue 2.
The last Github commit was in January.
Following some links from the package's Github leads to this package which looks like it may work with Vue 3.
i want add a vue panel in my project : vue-black-dashboard
in documentation :
Vue Black Dashboard is built as Vue plugin so you can simply import it
and use it.
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
but i dont know where paste vue-black-dashboard folder
how i can import it to my project
thanks
If you want to import it and use in a local component, just import it in component.
<script>
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
export default {
}
</script>
If you want to import it and use globally, just import it in main.js.
import Vue from 'vue';
import DashboardPlugin from '#/plugins/blackDashboard'
Vue.use(DashboardPlugin);
hello thanks for your answer
import DashboardPlugin from '#/plugins/blackDashboard'
where is the # in this address ?
i want use this template in specify route of my project
when i import it in main.js
This dependency was not found:
#/plugins/blackDashboard in ./src/main.js
To install it, you can run: npm install --save
#/plugins/blackDashboard
How's your plugin file look like? I have a similar issue with having plugins in separate files in /plugins directory and importing them to main.js
What I'm trying to achieve is better structure of plugins to keep them in separate files in folder plugins, rather than storing all the code in main.js
Not sure is it allowed or is it a good practice.
Plugins folder: plugins/toastification.js
import Vue from 'vue'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'
const options = {
position: 'bottom-right'
}
Vue.use(Toast, options)
// export default new Toast() - got error while exporting but it works somehow without export default I don't know why
Part of main.js
// plugins
import vuetify from './plugins/vuetify'
import i18n from './plugins/i18n'
import toastification from './plugins/toastification'
import logger from './plugins/logger'
new Vue({
vuetify,
i18n,
toastification,
logger,
render: h => h(App)
}).$mount('#app')