I am making a chrome extension using manifest v3.
I am trying to import my script files into the background.js.
I am using the second method described here
I have thus this in manifest.json:
"background": {
"service_worker": "background.js",
"type": "module"
},
On a simple script with no other dependency:
in myscript.js:
export function myFunction() {
console.log("In myFunction!")
}
and in my background.js :
import { myFunction } from "./lib/myscript.js";
myFunction()
In that simple case, it works fine.
However, if I try to add another dependency in myscript.js from myscript2.js, like this:
myscript2.js:
export function mySecondFunction() {
console.log("In mySecondFunction!")
}
and myscript.js (same directory as myscript2):
import { mySecondFunction} from "./myscript2.js";
export function myFunction() {
console.log("In myFunction!")
mySecondFunction()
}
In that case, it doesn't work anymore and I get the error "Service worker registration failed".
What should I be doing to fix this issue?
Related
I have the following two files and a jsconfig.json file in a directory.
/** myclass.js **/
class MyClass {
constructor() {}
myMethod() {}
}
/** test.js **/
/** #type {MyClass} */
let test;
The jsconfig.json file looks like this:
{
"compilerOptions": {
"module": "es6",
"target": "es6"
},
}
If I use the above code as is, I get method suggestion in the test.js file. However, as soon as I try to export out the MyClass class definition from myclass.js (by adding for example export default MyClass; on the end of that file) auto suggestion stops working, and IntelliSense does not recognize the MyClass class anymore.
I presume that this is a jsconfig.json issue, but I can't figure out why is this happening.
I am using Visual Studio Code v1.46.1 and I have the ESLint v2.1.5 extension installed on it.
We are currently running a Magento 2.2.6 instance. Sometimes the product gallery breaks with a JS error:
Uncaught TypeError: settings.$elementF.fotorama is not a function
This also happens to other js libraries on the homepage and catalog page. Sometimes we get an error
Uncaught TypeError: $(...).CustomMenu is not a function
IF you hard-refresh/clear your browser cache it works and all the errors disappear for that page, but if you browse the site it will throw the errors again after visiting a few pages.
I have already tried re-deploying the static assets, turning on and off static signing, disabling all extension, disabling all backend caches and changing my requirejs-config.js file to depend and shim jquery
var config = {
deps: ['jquery'],
map: {
'*' : {
'hello' : 'js/custom'
}
},
'fotorama/fotorama': {
deps: ['jquery']
}
}
This issue has been posted various times before, any advice would be greatly appreciated.
Unfortunately, the dependencies array is not guaranteed to load in order.
You can use a shim within requireJS that will let you define dependencies between libraries and export global variables that can be used with other libraries.
Essentially within the shim, you can use the deps property to define libraries that should be loaded before using the included library.
What you have now is close, but it's not within a shim
Try this:
var config = {
deps: ['jquery'],
map: {
'*' : {
'hello' : 'js/custom'
}
},
shim: {
// export the variable
jquery: {
exports: '$'
},
// fotorama depends on jquery
'fotorama/fotorama': {
deps: ['jquery']
}
}
}
I have this namespace
namespace Validation {
export function Func1() {
// code
}
export function Func2() {
// code
}
}
Which I can import in my app.ts:
import Validations = Validation;
But when I want to reference some modules in my Validation namespace
import {Request, Response} from 'express';
var jwt = require('jsonwebtoken');
var express = require('express');
import {Config} from './../config';
namespace Validation {
export function Func1() {
// code
}
export function Func2() {
// code
}
}
So then import Validations = Validation; in my app.ts giving me an error cannot find namespace Validation.
Why it is happened? Any thoughts how to fix?
UPDATE 1 : In case if I put imports after namespace I am getting an error Import declaration in a namespace cannot import a module:
namespace Validation {
import {Request, Response} from 'express'; //Error: Import declaration in a namespace cannot import a module
var jwt = require('jsonwebtoken');
var express = require('express');
import {Config} from './../config'; //Error: Import declaration in a namespace cannot import a module
export function Func1() {
// code
}
export function Func2() {
// code
}
}
my config.ts is just a simple class:
export class Config {
public static get Secret():string { return 'stuff'; }
public static get Database():string { return 'mongodb://127.0.0.1:27019/test'; }
}
And 'express' it is an npm package
UPDATE 2
I think I just fixed config by wrapping it in to namespace:
namespace Common {
export class Config { .. }
}
Also changed import statement from this import {Config} from './config'; to this: import Config = Common.Config; but haven't yet figure out how to fix 'express' thing
This happens because from the moment you put a top-level import or export statement into a file, that file is treated as an external module itself. If you are using internal modules (namespaces), I suggest importing inside namespaces, so that there are no top-level import or export statements.
namespace Validation {
import Request = ...;
import Response = ...;
export function Func1() {
// code
}
export function Func2() {
// code
}
}
The other approach would be to use external modules instead, but that requires a module loading system, which might be superfluous in many cases.
Right now, you are mixing internal and external modules, which is not recommended. Regarding complex structural cases like this, Typescript is still very far from being a mature language.
I assume that you have defined your validation functions in the separate (from app.ts) file. If this is the case then what you need to do is:
In your Validation.ts:
export function Func1() {
// code
}
export function Func2() {
// code
}
In your app.ts:
import * as Validation from './Validation';
Validation.Func1();
Your problem is most likely in mixing together concepts of modules and namespaces in typescript. Have a look here: Namespaces and Modules, and be sure to look through Modules and Namespaces
I'm trying to adapt the instructions on https://github.com/simplabs/ember-simple-auth for an app build using v0.0.28 of ember-cli. I am fairly new to ember-cli and use of AMD modules.
Can anyone help with the proper way/place to import ember-simple-auth rather than the global namespace as covered in the README?
The following initializer
import SimpleAuth from 'vendor/ember-simple-auth/amd/ember-simple-auth';
export default {
name: 'authentication',
initialize: function(container, application) {
SimpleAuth.setup(container, application);
}
}
Is compiled to
define("myapp/initializers/ember-simple-auth",
["vendor/ember-simple-auth/amd/ember-simple-auth","exports"],
function(__dependency1__, __exports__) {
"use strict";
var SimpleAuth = __dependency1__["default"];
__exports__["default"] = {
name: 'authentication',
initialize: function(container, application) {
SimpleAuth.setup(container, application);
}
}
});//# sourceURL=myapp/initializers/ember-simple-auth.js
And __dependency1__ is undefined.
Please see the installation instructions for ember-cli in the README: https://github.com/simplabs/ember-simple-auth#installation - unfortunately it's not yet possible to import individual parts of Ember.SimpleAuth though.
When I call init() I get an error saying the class "Facebook" has not been declared. Every tutorial online has similar code and supposedly works so I'm guessing its a setting somewhere I haven't set because it does look like its getting imported.
My Code:
import flash.display.MovieClip;
import com.facebook.graph.Facebook;
import com.facebook.graph.net.*;
import com.facebook.graph.data.*;
public class A_CLASS extends MovieClip {
protected var _appID:String = "164534125383085";
function A_CLASS():void {
Facebook.init(_appID, logIn);
}
function logIn(session:Object, fail:Object):void {
console.text = "Did Init()";
}
}
My Output:
ReferenceError: Error #1065: Variable com.facebook.graph::Facebook is not defined.
at ALPHA_CLASS()[C:\Users\DelphPC\Desktop\FlashProjects\A\A_CLASS.as:11]
at runtime::ContentPlayer/loadInitialContent()
at runtime::ContentPlayer/playRawContent()
at runtime::ContentPlayer/playContent()
at runtime::AppRunner/run()
at ADLAppEntry/run()
at global/runtime::ADLEntry()
ReferenceError: Error #1065: Variable com.facebook.graph::Facebook is not defined.
that means your program cannot see the reference class please check your Build Path SWC or ANE and build your project then retry