VueFire with vite - vuejs3

Hi i'm using vuefire with vite when i try to
import { VueFire, VueFireAuth } from 'vuefire'
I get this error :
Uncaught SyntaxError: Function statements require a function name (at chunk-TZOYARRL.js?v=786f7321:13756:9)

Related

Trying to convert react application to next application

Keep getting error
SyntaxError: Cannot use import statement outside a module
cyberoni_next\node_modules\three\examples\jsm\lines\LineGeometry.js:2
import { LineSegmentsGeometry } from "../lines/LineSegmentsGeometry.js";
In node modules?? really confused.
import { LineSegmentsGeometry } from "../lines/LineSegmentsGeometry.js";

sapper with firebase - fetch not defined

I am getting this error when running npm run dev
registerFunctions(firebase$1, fetch.bind(self));
^
ReferenceError: fetch is not defined
I figured rxfire doesn't import fetch, so I add this line to src/server.ts
global['fetch'] = require('node-fetch');
And the error is still there, any suggestions? I would think I would not have to add this at all.
I am just using rxfire in a src/firebase.ts file like so:
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/functions";
import * as config from "./config.json";
firebase.initializeApp(config);
export const auth = firebase.auth();
export const googleProvider = new firebase.auth.GoogleAuthProvider();
export const db = firebase.firestore();
export const functions = firebase.functions();
Thanks,
J
This was a specific error caused when trying to import "firebase/functions" on the server end in my firebase.ts file.
I was able to solve it by adding import 'isomorphic-unfetch' to server.ts. However, then I got this error:
registerFunctions(firebase$1, fetch.bind(self));
^
ReferenceError: self is not defined
I realized there apparently is no object to bind to on the backend, so I found a work around. I needed to not import it on the backend, which was a bigger Sapper Firebase problem.
See my post here for complete fix.
I had similar issue with this error stacktrace :
ReferenceError: fetch is not defined
at Module.<anonymous> (/var/task/webpack:/Users/dev/projects/node_modules/#firebase/functions/dist/index.esm.js:702:27)
at __webpack_require__ (/var/task/webpack:/webpack/bootstrap:19:1)
at /var/task/webpack:/webpack/bootstrap:83:1
at Object.<anonymous> (/var/task/families.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at Module._require.i.require (/var/task/serverless_sdk/index.js:9:73397)
I solve it by updating the firebase import to
import * as admin from 'firebase-admin';
import firebase from 'firebase/app';
first install whatwg-fetch.
npm i --save whatwg-fetch yarn add --save whatwg-fetch pnpm i --save whatwg-fetch
create a file ./define-self.js
with this content
var global =
(typeof globalThis !== "undefined" && globalThis) ||
(typeof self !== "undefined" && self) ||
(typeof global !== "undefined" && global);
if (!global?.self) {
global.self = global;
}
on your index.svelte / _layout.svelte
<script context="module">
import "./define-self";
import "whatwg-fetch";
</script>

Symfony Webpack use simple function

I was wondering how to use a simple function using Symfony + Webpack + Encore.
I have my file accentsDelete.js with :
export default function accentsDelete(string) {
...
}
And in my app.js file :
import accentsDeletefrom './accentsDelete';
But I still get the error when I try to use accentsDelete('éléphant') in my Twig templates :
Uncaught ReferenceError: accentsDeleteis not defined
My Webpack config is almost the original one, do I need to specify a scope or something ?

How to import redux-logger?

I'm trying to import redux logger v.3.0.6. https://github.com/evgenyrodionov/redux-logger
Attempt 1
import logger from 'redux-logger';
error
Uncaught SyntaxError: The requested module '../node_modules/redux-logger/dist/redux-logger.js' does not provide an export named 'default'
Attempt 2
import { logger } from 'redux-logger';
error
Uncaught SyntaxError: The requested module '../node_modules/redux-logger/dist/redux-logger.js' does not provide an export named 'logger'
Attempt 3
import { createLogger } from 'redux-logger';
error
Uncaught SyntaxError: The requested module '../node_modules/redux-logger/dist/redux-logger.js' does not provide an export named 'createLogger'
The third one is the one suggested on the github page. How do I solve this?
I had the same issue and solved it like this:
import createLogger from 'redux-logger';
// ...
const loggerMiddleware = createLogger;
It seems createLogger is a default export.
I am using like your first attempt and it is working fine,
import logger from "redux-logger";
I am also using the same version - 3.0.6 for both typings and logger itself.
"#types/redux-logger": "^3.0.6",
"redux-logger": "^3.0.6",
This suggestion was given to me in the error i got after installing and importing redux-logger.
the fix i found out is given below.
import pkg from "redux-logger";
const {createLogger}=pkg;
const logger=createLogger()
hope it helps!!

Client-side Loggly Meteor 1.4.1

I'm trying to setup some kind of logging for my meteor app and chose Loggly, I read this article, but I can't get the client-side implementation to work.
// in startup/client/loggly-client.js
import { Meteor } from 'meteor/meteor';
import { winston } from 'meteor/clinical:winston-browser-logging';
winston.info("winston-client has started on the client!");
// in startup/client/index.js
import './loggly-client.js';
import './routes.js';
Error I'm getting is Uncaught TypeError: Cannot read property 'info' of undefined
According to https://github.com/clinical-meteor/winston-browser-logging/blob/master/package.js it should be Winston, not winston.

Resources