I am able to successfully use RxJs 7.8.0 from my Chrome Extension's popup.js and options.js by importing RxJS from their corresponding popup.html and options.html files like this:
<script type="text/javascript" src="./libs/rxjs.umd.js"></script>
<script type="module" src="options.js"></script>
However, I also have background.js from which I would like to use RxJs. This is service worker and does not have html file. So when I try to import RxJs like this:
import * as rxjs from "./libs/rxjs.umd.js";
My chrome extension gets following error:
Uncaught TypeError: Cannot set properties of undefined (setting 'rxjs')
libs/rxjs.umd.js:416 (anonymous function)
Which corresponds to following code:
413:(function (global, factory) {
414: typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
415: typeof define === 'function' && define.amd ? define('rxjs', ['exports'], factory) :
416: (factory((global.rxjs = {})));
417:}(this, (function (exports) { 'use strict';
I am able to successfully import other libraries from my background.js file. So this seems to be something specific to RxJs. If it matters I got RxJs from this CDN
Related
I am writing library and i have exports like this:
export function a(){ ... }
And using these functions as graphs.a()
After i added
import * as d3 from 'd3'
if i use library with
<script src="graphs.js"></script>
all is ok and module have functions, but when i use in node.js
import * as graphs from './graphs.js'
global.graphs = graphs
module 'graphs' contains no functions
Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}
Symbol(Symbol.toStringTag): "Module"
__esModule: true
__proto__: Object
Module using <script>
Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}
address_graph: (...)
address_sankey: (...)
query: (...)
Symbol(Symbol.toStringTag): "Module"
__esModule: true
get address_graph: ƒ ()
get address_sankey: ƒ ()
get query: ƒ ()
__proto__: Object
The import syntax only works if you're using a module bundler like Webpack or Rollup, or if you are using <script type="module">. What is your build system like?
If you could share an example repository that reproduces the behavior, it would help folks be able to debug.
Typically with Webpack, the build injects a <script> tag automatically into the HTML that points to the built bundle, so you should not need to include the <script> tag yourself. If you do, it might introduce conflicts or not work correctly.
If you want to import the library in Node, it needs to be built to a CommonJS module (that should be an output option of Webpack).
Getting the above error on page refresh, but i am not using localStorage in my Code.
Perform operations only possible in the browser within the following if statement:
if (process.client) {
localStorage...
}
See: https://nuxtjs.org/api/context/
another option is to only call it in the beforeMount or mounted functions, since they always happen on the client side.
Your app is running on a server so there is no browser or window, which means you do not have access to the APIs provided by the browser.
You can prevent this error by checking if the window object is available before try to access it. for example:
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
//OR
if (typeof window !== 'undefined') {
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
}
Well What I did was that I created a state like
const thisWindow = useState('thisWindow')
and in app.vue onMounted set window like
onMounted( () => {
thisWindow.value = window
})
and just called it in my function and globally
I am in Browser trying to initialize Vuetify and I believe this used to work but now fails...
//In Node
app.use(serve("./node_modules/vuetify/dist"));
// On Client
<script type="module">
import * as Vuetify from '/vuetify/vuetify.js';
const global = window || global;
global.Vuetify = Vuetify;
Vue.use(Vuetify, {
...
});
</script>
When I run I get
Error in beforeCreate hook: "Error: Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object"
I tried changing to...
//In Node
app.use(serve("./node_modules/vuetify"));
// On Client
<script type="module">
import Vuetify from "/vuetify/lib";
const global = window || global;
global.Vuetify = Vuetify;
Vue.use(Vuetify, {
...
});
</script>
But it still fails this time with
GET https://localhost:3001/vuetify/lib net::ERR_ABORTED 404
I even tried changing to...
//In Node
app.use(serve("./node_modules/vuetify"));
// On Client
<script type="module">
import Vuetify from "/vuetify/lib/index.js";
const global = window || global;
global.Vuetify = Vuetify;
Vue.use(Vuetify, {
...
});
</script>
Then I get...
GET https://localhost:3001/vuetify/lib/components net::ERR_ABORTED 404
I think the js files are not proper ES6 definitions (IE no extensions mjs, cjs) but is there a way to get it to work?
For additional context this is how I load Vue
import Vue from '/vue/vue.esm.browser.js'
const global = window || global;
global.Vue = Vue;
This works fine
you could try importing the script in a script tag: https://cdnjs.com/libraries/vuetify
I think the link you want is this: https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.17/vuetify.js
I created a local package and added to my project, and added templating.
package.js
`Package.onUse(function(api) {
api.versionsFrom('1.4.2.3');
api.use('templating', 'client');
api.addFiles('server/main.js', 'server');
api.addFiles('client/main.js', 'client');
api.addFiles('client/main.html', 'client');
api.mainModule('pkgName.js');
});`
I created a template in client/main.html.
<template name="myTemplate">
<button>Test</button>
</template>
Then in client/main.js, i set the event listener:
Template.myTemplate.events({
'click button': function (e,t){ //do this on click };
})
But when i run the app - i get console error
Uncaught TypeError: Cannot read property 'events' of undefined
OK - after a couple of hours of research it seems that the Package.onUse function must list dependencies in the order that they should be loaded.
I thought the load order was only relevant to the 'packages' file in the main application, but it seems that you need to load the dependencies in order as well.
So this fixed it---
Package.onUse(function(api) {
api.versionsFrom('1.4.2.3');
api.addFiles('client/main.html', 'client');
// I moved the html file above the javascript - so the DOM loads first and then the template exists for the event listener to listen to.
api.use('templating', 'client');
api.addFiles('server/main.js', 'server');
api.addFiles('client/main.js', 'client');
api.mainModule('pkgName.js');
});
I have a core-ajax component that is working fine (I see all the expected data):
<template is="auto-binding">
<core-ajax id="ds" auto url="https://server/data.json" response="{{data}}"></core-ajax>
<my-alarms alarms="{{data}}"></mu-alarms>
</template>
I'm attempting to refresh it periodically just for a proof of concept demo using the following javascript:
function f() {
$('#ds').go();
}
setTimeout(f, 1000)
This results in the following error on the line with go()
Uncaught TypeError: undefined is not a function
Here is the documentation. What am I doing wrong?
that function looks like jquery. try this.
function f() {
document.querySelector("#ds").go();
}
setTimeout(f, 1000);
not real sure about using jquery with polymer. i think it can't find elements in shadowdom like using document.querySelector can.
$ is a Map not a function in Polymer. It available only in Polymer elements and you can use it like
function f() {
$.ds.go();
}
setTimeout(f, 1000)
to access elements inside the elements shadowDOM.