We Keep Coding

VueFire this.$databaseBind(...).then is not a function

I'm trying to use returned promise from VueFire method $databaseBind (here is the VueFire doc), but unfortunately and I don't know why I have an error this.$databaseBind(...).then() is not a function.
I know that we can have this error when we try call then on non promise value, but $databaseBind should return a promise.
reproduction in codesandbox https://codesandbox.io/s/strange-borg-y41d0u?file=/src/App.vue
Here is my main.js
import { createApp } from "vue";
import App from "./App.vue";
import { VueFire, VueFireDatabaseOptionsAPI } from "vuefire";
createApp(App)
.use(VueFire, {
modules: [VueFireDatabaseOptionsAPI()],
})
.mount("#app");
package.json
{
"name": "happy-new-year",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"firebase": "^9.15.0",
"vue": "^3.2.13",
"vuefire": "^3.0.0"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
}
firebase.js
import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
import "firebase/database";
import "firebase/storage";
import "firebase/auth";
const config = {};
export const fb = initializeApp(config);
export const db = getDatabase(fb);
and usage
<template>
<div>{{ testObject.$value }}</div>
</template>
<script>
import { ref } from "firebase/database";
import { db } from "#/plugins/firebase";
export default {
name: "App",
data() {
return {
testObject: {},
};
},
mounted() {
this.$databaseBind("testObject", ref(db, path)).then();
},
};
</script>
Do somebody have any suggestion? Thanks a lot!

There was an inner bug of VueFire. They have fixed it already.
https://github.com/vuejs/vuefire/issues/1275

Firestore Import Error When In Jest With Next.JS

I am trying to run a test in next.js using jest that imports firebase, but i keep getting an error:
{import { registerVersion } from '#firebase/app'; SyntaxError: Cannot use import statement outside a module
Importing other modules works, but firebase throughs that error. I have tried other enviroments but none seem to work and either throw this error or another error.
Package.JSON:
{
"name": "chat",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest --forceExit --watchAll --coverage"
},
"dependencies": {
"#firebase/testing": "^0.20.11",
"firebase": "^9.9.4",
"kill-port": "^2.0.1",
"next": "12.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-firebase-hooks": "^5.0.3",
"react-hot-toast": "^2.3.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#firebase/rules-unit-testing": "^2.0.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#types/jest": "^29.0.2",
"eslint": "8.23.0",
"eslint-config-next": "12.2.5",
"firebase-admin": "^11.0.1",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.0.3"
}
}
Jest.config.js:
// jest.config.js
const nextJest = require('next/jest');
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
});
// Add any custom config to be passed to Jest
/** #type {import('jest').Config} */
const customJestConfig = {
// Add more setup options before each test is run
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
//moduleDirectories: ['node_modules', '<rootDir>/'],
testEnvironment: 'jest-environment-jsdom',
};
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);
test/page.test.js
/**
* #jest-environment jest-environment-jsdom
*/
import React from 'react';
import { render, screen } from '#testing-library/react';
import Thing from '../../pages/thing.jsx';
describe('testing Home page', () => {
test('render h1 element', () => {
expect(render(<Thing />));
});
});
pages/test.jsx
import { firestore } from "../lib/firebase";
export default function Thing({ }) {
return (
<main>
</main>
);
}
lib/firebase (Note: removed config fields)
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleAuthProvider = new GoogleAuthProvider();
export const firestore = getFirestore(app);
export const storage = getStorage(app);

rollup-plugin-dynamic-import-variables Identifier 'React' has already been declared Vite + Storybook + React

I'm experimenting with POC component library built with Vite + Storybook + React (JS, not TS). The dev environment works great, but I want to be able to build to a dist folder. That is when I encounter this error...
[rollup-plugin-dynamic-import-variables] Identifier 'React' has already been declared
...attributed to the one component in my POC, Button.jsx. Which only imports React the one time here:
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
...
If I delete import React from "react"; from the above file the application builds. But that just seems wrong to me. I shouldn't have to remove a valid import, right?
There must be something I'm doing wrong on config side which I Frankensteined from various tutorials on the topic... so likely.
vite.config.js:
import path from "path";
import react from '#vitejs/plugin-react'
import { defineConfig } from "vite";
const isExternal = (id) => !id.startsWith(".") && !path.isAbsolute(id);
export default defineConfig(() => ({
esbuild: {
jsxInject: "import React from 'react'",
},
build: {
lib: {
entry: path.resolve(__dirname, "src/index.js"),
name: "Bae Jay UI",
fileName: (format) => `bae-jay-ui.${format}.js`,
formats: ["es", "cjs"],
},
rollupOptions: {
external: isExternal,
},
plugins: [
react(),
],
},
}));
package.json:
...
"scripts": {
...
"build": "vite build",
...
},
...
...
"devDependencies": {
"#babel/core": "^7.16.12",
"#storybook/addon-actions": "^6.5.0-alpha.23",
"#storybook/addon-essentials": "^6.5.0-alpha.23",
"#storybook/addon-links": "^6.5.0-alpha.23",
"#storybook/react": "^6.5.0-alpha.23",
"babel-loader": "^8.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"storybook-builder-vite": "^0.1.13",
"vite": "^2.7.13"
}

So... in the process of reviewing this post I noticed the vite.config.js was importing react:
esbuild: {
jsxInject: "import React from 'react'",
},
likely making my component level import duplicative. It's defiantly code I poached from a tutorial without giving it much thought. Once these lines were removed my issue was resolved.
Maybe this will help someone else.
Cheers 🍻

Axios not compiling

I've installed axios with npm, but for some reason it's not compiling.
A snippet of my package.json file:
"aws4": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
"integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
},
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
A snippet of my package.lock.json file:
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
Where I use axios:
import React, {useState} from 'react';
import Search from './components/search.js';
import axios from 'axois';
function App() {
const [state, setState] = useState({
s: "", //search query. empty string is default entry
results: [], //initially, no results, so empty array
selected: {}, //the actual element clicked up out of the presented results
})
const apiurl = "http://www.omdbapi.com/?i=tt3896198&apikey=af1c6093";
const search = (e) => {
if(e.key === "Enter") {
axios(apiurl + "&s=" + state.s).then((data) => {
console.log(data);
});
}
}
Thanks in advance for your help! Let me know if you would like me to provide any more context/code.
Update:
-- I fixed the embarrassing mistake of writing 'axois' instead of 'axios', but I currently have a new issue -- element type is invalid, check render method of App. I found another post on this website that and am currently trying to troubleshoot. Perhaps an import/export issue? Nonetheless, thanks for all your help!

import axios from 'axois'; that should be 'axios' not 'axois'

You have a typo in your import. axois should be axios.

Use
import axios from 'axios';
instead of
import axios from 'axois';

No `render` method found on the returned component instance

I have initialized the basic react-native app by the command react-native init DummyProject and try to compile and run it. but its giving me an error on debug console
Warning: AppContainer(...): No `render` method found on the returned component instance: you may have forgotten to define `render`.
and
TypeError: instance.render is not a function
This error is located at:
in AppContainer (at renderApplication.js:33)
The code and error my application is in this picture
I am experiencing this error even after removing node_modules and again installing the modules.
Making another app won't work either. Same error is occurring in every situation
The code of my App.js
import React, { Component } from "react";
import { Text, View } from "react-native";
export default class App extends Component {
constructor() {
super();
this.state = {
value: 1
};
}
render() {
return (
<View>
<Text>HELLO {this.state.value}</Text>
</View>
);
}
}
index.js
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
AppRegistry.registerComponent(appName, () => App);
package.json
{
"name": "DummyProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.1",
"react-native": "0.57.5"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.49.2",
"react-test-renderer": "16.6.1"
},
"jest": {
"preset": "react-native"
}
}

I tried your code and it work perfectly fine for me.
Maybe you are facing a cache issue, Try this: Delete the node_modules folder and close the packager. Then reinstall using the command npm install from your project directory.
After this try running your code again. It should work.