When I try to use swiper with rollup I get this:
(!) Missing global variable name
Use output.globals to specify browser global variable names
corresponding to external modules
dom7/dist/dom7.modular (guessing 'dom7_modular')
created public/build/bundle.js in 1.6s
and in the console
main.js:8 Uncaught ReferenceError: dom7_modular is not defined
at main.js:8
any idea about this?
resolve({
browser: true,
dedupe: ['svelte'],
extensions: ['.svelte','.js']
}),
I added just .js to extensions in the rollup config and it was done
Related
I've written a Vue JS component/plugin and have it in the following formats:
Common
ESM
UMD
I'm trying to import the UMD version into my Nuxt JS project (I'e also tried the others) and use it.
I've added a scripts array to my nuxt.config.js file to the head section:
scripts: [
{ src: '/js/vue-les-offers.umd.js' }
]
My JS file lives in static/js, and I've gone ahead and included my component in my page:
...
<vue-les-offers></vue-les-offers>
...
But I'm getting an error thrown in my console:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What am I missing?
I've tried:
installing via the plugins array
installing via the modules (used the ESM variant)
tried wrapping in a client-only element
tried both min and non-minified JS variants
I'm trying to incorporate the Ripple package into my Nuxt application.
Following Nuxt docs and the package docs example I have a ripple.js file in plugins/ directory containing this:
import Vue from 'vue'
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple)
Then in nuxt.config.js I have:
plugins: [
'~/plugins/ripple.js'
],
But now the app doesn't work at all, with some Unexpected token export error message on the screen, and a "Missing stack frames" error message in vm.js.
I have no idea what that means nor what I'm doing wrong, any suggestion?
This is due to an SSR error, where vue-ripple-directive cannot be used on the server. In order to get around this, you need to instruct Nuxt to only load the plugin on the client side.
To fix this, do the following 2 things:
First, rename ripple.js to ripple.client.js.
Second, update the plugins array to the following:
plugins: [
'~/plugins/ripple.client.js'
]
The .client postfix signals to nuxt to only run the plugin on the client.
More information can be found here
Always keep this method in mind when adding Vue plugins, especially when they interact with the DOM in some way. Most that I've come across require this method to function without errors, as the DOM is unavailable on the server.
When creating a standard vue app (using vue-cli v3.0) and including #feathersjs/feathers in order to implement a connection with a feathers API, I get an error with Internet Explorer 11 (SCRIPT1010: Expected identifier)
The bottom line is to find an easy way to solve issues like this, because on bigger projects one could easily find lots of library issues and sometimes is necessary to support at least one version of Internet Explorer (at least from the business point of view)
I read on feathers site (https://docs.feathersjs.com/api/client.html#module-loaders) that the library uses ES6 so in this case it must be transpiled in order to work in a browser like IE11.
So I tried this but had no luck at all:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathers/commons',
'#feathers/errors',
'#feathers/feathers',
'debug'
]
}
and got errors even in chrome: Uncaught ReferenceError: exports is not defined
I created a project to show this error: https://github.com/riescorp/vue-internet-explorer
One should be able to use IE11 for this app, even if it doesn't work fast or looks nice, but works.
I believe the process should be the same as following the directions on the Vuetify website in the section of this page titled "IE11 & Safari 9 support" (scroll to the bottom): https://vuetifyjs.com/en/getting-started/quick-start
I've not had to do anything else in my projects, that I can remember.
I finally manage to solve this issue.
This is the babel.config.js config that does the trick:
module.exports = {
presets: ['#vue/app'],
plugins: ['#babel/transform-modules-commonjs']
}
Also there was a typo in my vue.config.js it should look like this:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathersjs',
'debug'
]
}
Finally, when using feathers this line wouldn't work:
.configure(restClient.fetch(window.fetch))
so you can use import 'whatwg-fetch' to solve it (remember to install it npm i whatwg-fetch)
I am trying to implement raygun for a react-native app. I am running into problems with jest and I am not sure of the best approach given the window does not exist. In my package.json I have already added the following:
"globals": {
"window": {}
}
I get the following error though and I am unable to resolve it as of yet:
ReferenceError: raygunUtilityFactory is not defined
This is a very basic implementation as per the docs:
https://raygun.com/docs/languages/javascript#reactnative
I presume this is something with jest but having searched on github, here and google I still have not been able to resolve this.
Raygun4JS does not currently work correctly in a non-browser environment. Your best bet would be to not include the Raygun4JS code inside of your test environment (which is what we do at Raygun) but that is a bit more complicated using the UMD module from NPM (we use the snippet approach to inject it dynamically).
I think the problem stems from window not being considered the global object in Jest vs the browser, we have an indirect call to the window object to call the raygunUtilityFactory. Are you using the jsdom test environment? We also have the same window definition in our jestconfig.json and export some variables onto window in our setupframework.js file that are accessed indirectly through the global object and it appears to work correctly.
I have planned to use the Ext.ux.panel.PDF extension https://github.com/SunboX/ext_ux_pdf_panel for my app but cannot make it to work inside my Sencha Architect 3.0.
I have downloaded the files and put the js file in my project directory /ext/src/ux/panel/PDF.js. In the apllication I have put the require line on the top level under Application
Ext.application({
requires: [
'Ext.window.MessageBox',
'Ext.ux.panel.PDF'
], ...
But when I want to instantiate the pdf panel with the code from the example I keep getting this error:
Uncaught Error: The following classes are not declared even if their files have been loaded: 'Ext.ux.panel.PDF'. Please check the source code of their corresponding files for possible typos: 'ext/src/ux/panel/PDF.js
Please advise.
EDIT: I have tried using a loader but the error is still present
Ext.Loader.setConfig({
enabled: true,
paths: {
Ext: 'ext/src'
}
});
The error you get means, that the file ext/src/ux/panel/PDF.js does not contain valid javascript. I tested this extension, and I don't get that error.
It the file is empty, you will get this error only, if it contains invalid javascript, this should be the second error, while the first will complain about the syntax error.
If the file is missing, you'll get another error.
Have a close look at the file, maybe it got corrupted while downloading or unzipping the extension. Or you edited it by error and introduced an error.
try to add below code on top of your Ext.application({ ~~~ source
Ext.Loader.setPath({
'Ext.ux' : 'YOURPATH(ABSOLUTE OR RELATIVE)/ext/src/ux'
});