As I'm using Firebase Cloud Messaging in my React, it requires me to put the firebase-messaging-sw.js in my public folder.
In there, it is defining the function for the onBackgroundMessage, which I want to have an access to my module, and update some of my components in my src.
import { toast } from "react-toastify"; // or import my other modules
messaging.onBackgroundMessage(function(payload) {
console.log('Received background message ', payload);
//toast or do some updating my modules
toast(`Message received : ${payload}`) // here comes the error
});
But I got an error of
Uncaught SyntaxError: Cannot use import statement outside a module (at
firebase-messaging-sw.js:3:1)
How can I import my src module to the public folder?
How should I properly use the onBackgroundMessage in React?
is it normal to import module from src to the public folder?
Use importScripts to import scripts into the worker's scope like firebase-messaging itself.
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging.js');
Related
I'm trying to write unit test. I just import my component file inside test.file. When trying run test. It gives error module not found for file import in file component, while in file component the import is working fine.
Component file - example.tsx
import getConfig from '#/component/utils/appConfig'
jest.config.js
module.exports = {moduleDirectories:["node_modules","src"]}
test.spec.js
import example from '../../example.js'
describe('example',() => {
it('render component file',()=> {
const container = render(<example/>);
})})
after 'npm run test'
then, get error
cannot find module '#/component/utils/appConfig' from example.tsx
The way we usually use import is based on relative path.
.and .. are similar to how we use to navigate in terminal like cd .. to go out of directory and mv ~/file . to move a file to current directory.
Your Statement Should be like this...
import getConfig from './component/utils/appConfig'
import { File } from '#ionic-native/file/ngx';
I can’t use the class File from cordova-plugin-file in my application cause there is another interface from JavaScript also called File.
This name conflict impedes my app to access the cordova-plugin-file functions I want.
File from JavaScript has this description : “
interface File
Provides information about files and allows JavaScript in a web page to access their content.”.
File from cordova-plugin-file should (alias) const File: FileOriginal
import File
'File' is declared but its value is never read
Here is my code :
import { File } from '#ionic-native/file/ngx';
export class Tab1Page {
constructor(public file: File) {}
...
}
Just so that it helps someone. Workaround was to declare cordova-plugin-file outside constructor.
import { File as cordova_file } from '#ionic-native/file/ngx';
private file: typeof cordova_file
constructor(
I am running ReactJS with Server-Side-Render on ASP.Net MVC. I also setup Webpack config. This code of my component works just fine:
import "../fine-uploader/fine-uploader.min.css";
But when I import another stylesheet, like this:
import "../fine-uploader/fine-uploader.min.css";
import "../../Content/fine-uploader/fine-uploader-custom.css";
It returns this error when opening the page with my component:
TypeError: Cannot call a class as a function
at _classCallCheck -> function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
Turns out I've to manually restart the Webpack build script command everytime I import something new. I get this error because I've been relying on the webpack-subresource-integrity to watches for changes and rebuild.
I'm building an app with PixiJs and Angular2 and I'm trying to import the pixi typescript definitions (https://github.com/pixijs/pixi-typescript).
I want to extend the Pixi Sprite type, but I am unable to import the library.
Here is the code:
import { Sprite } from '../../assets/pixi.js';
export class test extends Sprite {
//...
}
This results in the error "File 'C:.../src/assets/pixi.js.d.ts' is not a module. at line 1 col 24"
The path is definitiely correct. What am I doing wrong and how can I fix this issue?
I'm sorry, but I'm very lost. Actually I have this:
import * as angular from 'angular';
import 'ts-angular-jsonapi';
And dont return any errors. But, when I do this
import * as angular from 'angular';
import * as jsonapi from 'ts-angular-jsonapi';
I get this error:
ERROR in ./src/index.ts
(14,23): error TS2307: Cannot find module 'ts-angular-jsonapi'.
What changes need I do on ts-angular-jsonapi library for fix this errors.
More info: I need do this becouse I need make something like this:
class myresource extend jsonapi.resource {
}
I found the solution. When you write a .TS file, you can not import any .JS file. You need use require(). In the code:
// some_file.ts
import * as angular from 'angular';
var jsonapi = require('ts-angular-jsonapi'); // .js library
But if you are searching the best and correct solution for typescript node module, I build a simple example on github. With this example, you can do something like this:
import * as animal_module from 'animal_module';
class Snake extends animal_module.Animal {
constructor(name: string) { super(name); }
}
let sam = new Snake('Sammy the Python');
why don't you try
import angular from 'angular'; import jsonapi from 'ts-angular-jsonapi';