Axios not compiling - javascript

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';

Related

React: How to find a dep inside a node module component for a hook?

React 16.8 | Typescript 3.5
I want to run useEffect to update an array inside App() every time a QR scanner inside a node module imported to the app updates one of its fields.
Alternatively, I would like to receive the data from 'onScan'.
How do you import and use as a dep elements of node module components? There's a page within a file called 'SendPage.jsx' which runs a useState hook called 'setTo()' to update a value 'to'. I'm looking to intercept that 'to' value and use it inside App().
These are my dependencies in node modules. Specifically, inside the "#burner-wallet/modern-ui" there's
"#burner-wallet/assets": "^1.0.0",
"#burner-wallet/core": "^1.0.0",
"#burner-wallet/exchange": "^1.0.0",
"#burner-wallet/modern-ui": "^1.0.9",
"#types/node": "12.0.4",
"#types/react": "*",
"#types/react-dom": "16.8.4",
"#types/react-router-dom": "^4.3.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "^3.2.0",
"typescript": "3.5.1",
"universal-cookie": "^4.0.4"
},
This is the package.json inside the "#burner-wallet/modern-ui" module space:
"name": "#burner-wallet/modern-ui",
"version": "1.0.9",
"license": "MIT",
"main": "dist/ModernUI.js",
"types": "dist/ModernUI.d.ts",
"scripts": {
"build": "tsc",
"start-local": "tsc -w",
"start-basic": "tsc -w"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-object-rest-spread": "^7.4.4",
"#babel/preset-typescript": "^7.3.3"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"repository": {
"type": "git",
"url": "https://github.com/burner-wallet/burner-wallet-2.git",
"directory": "packages/modern-ui"
},
"dependencies": {
"#burner-wallet/types": "^1.0.2",
"#burner-wallet/ui-core": "^1.0.2",
"#types/clipboard": "^2.0.1",
"#types/color": "^3.0.0",
"#types/ethereumjs-util": "^5.2.0",
"#types/qrcode.react": "^0.8.2",
"#types/react": "*",
"#types/react-qr-reader": "^2.1.2",
"#types/react-router-dom": "^4.3.4",
"#types/styled-components": "4.1.8",
"clipboard": "^2.0.4",
"color": "^3.1.2",
"ethereumjs-util": "^6.1.0",
"qrcode.react": "^0.9.3",
"react-qr-reader": "^2.2.1",
"styled-components": "^5.0.1"
}
}
My app.tsx file:
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import ScanContext from './scancontext';
import { setLocally, getLocallyStoredQRs } from './localstorage';
// import { xdai, dai, eth } from '#burner-wallet/assets';
import { xdai} from '#burner-wallet/assets';
import BurnerCore, { HistoryEvent } from '#burner-wallet/core';
import { InjectedSigner, LocalSigner } from '#burner-wallet/core/signers';
import { InfuraGateway, InjectedGateway, XDaiGateway, } from '#burner-wallet/core/gateways';
import Exchange, { Uniswap, XDaiBridge } from '#burner-wallet/exchange';
import ModernUI from '#burner-wallet/modern-ui';
import { HistoryProps } from '#burner-wallet/core/History';
const core = new BurnerCore({
signers: [new InjectedSigner(), new LocalSigner()],
gateways: [
new InjectedGateway(),
new InfuraGateway(process.env.REACT_APP_INFURA_KEY),
new XDaiGateway(),
],
// TODO use Sai
// assets: [xdai, dai, eth],
assets: [xdai],
});
const exchange = new Exchange({
pairs: [new XDaiBridge(), new Uniswap('dai')],
});
const QRCardsSpace = styled.div`
padding-bottom: 100px;
`;
function App() {
const [newQRs, setQR] = useState('');
// const storedCookieQRs: string[] = getLocallyStoredQRs();
const appUI = <ModernUI
title="Vincenz Burner Wallet"
core={core}
plugins={[exchange]}
/>
useEffect(() => {
// This will be where the addresses are assigned when read
console.log("useEffect");
console.log("newQRs" , newQRs);
var latestToAddress = "0x4f0f4m";
const QRData = [latestToAddress];
setQR(latestToAddress);
setLocally(QRData);
}, [appUI]); // Set here the conditional change to the QR data
return (
<div>
{appUI}
<QRCardsSpace>
<ScanContext />
</QRCardsSpace>
</div>
) };
export default App;

Did you mean to import firebase/app/dist/index.cjs.js?

I'm getting the following error:
Error: Directory import 'C:\Users\My Name\Documents\Code\WebProjects\nextfire-app\node_modules\firebase\app' is not supported resolving ES modules imported from C:\Users\My Name\Documents\Code\WebProjects\nextfire-app.next\server\pages\enter.js
Did you mean to import firebase/app/dist/index.cjs.js?
import firebase from "firebase/app"
import "firebase/auth";
import "firebase/firestore";
import "firebase/storage";
const firebaseConfig = {
// myConfig stuff
};
if (!firebase.app.length) {
firebase.initializeApp(firebaseConfig)
}
export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const storage = firebase.storage();
This code is inside firebase.js which gets called from enter.js using this line
import { auth, googleAuthProvider } from "../lib/firebase";
This is my package.json:
{
"name": "nextfire-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"firebase": "^8.2.1",
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-firebase-hooks": "^5.0.3",
"react-hot-toast": "^2.2.0"
},
"devDependencies": {
"eslint": "8.15.0",
"eslint-config-next": "12.1.6"
}
}
I'm not even sure what this error is trying to tell me so it's been very difficult to debug. I also haven't seen anyone else with a similar issue.
After a bit more trying I was actually able to solve the problem by changing my import lines in firebase.js to what the error was suggesting.
My new imports look like this:
import firebase from "firebase/app/dist/index.cjs.js"
import "firebase/auth/dist/index.cjs.js";
import "firebase/firestore/dist/index.node.cjs.js";
import "firebase/storage/dist/index.cjs.js";
A strange issue that I still don't understand but I at least have it working, if anyone with more experience knows why this issue occurred in the first place, I'd love to understand more about it.

(...).mockImplementation is not a function

I've used this test in the past with a React app without any issues:
import { render, fireEvent, screen, waitFor } from '#testing-library/react'
import { RelatedContent } from '../components/relatedcontent'
import { onValue } from '../components/firebase'
jest.mock('../components/firebase')
test('RelatedContent -> displays related content', async () => {
let fakeData = {
'flex-new-row': 20,
'chronlabs': 25
}
let snapshot = {val: () => fakeData}
onValue.mockImplementation((ref, callback) => {
callback(snapshot)
return jest.fn()
})
render(<RelatedContent numRelated = {5}/>)
await waitFor(() => expect(document.querySelector("a[href='/flex-new-row']")).toBeTruthy())
await waitFor(() => expect(document.querySelector("a[href='/chronlabs']")).toBeTruthy())
})
Now I'm using the same test on a Next.js app, and I'm getting the following error:
TypeError: _firebase.onValue.mockImplementation is not a function
Update
The RelatedContent component looks like:
import React, { useState, useEffect } from 'react'
import { db, onValue, ref } from './firebase'
const RelatedContent = ({ numRelated }) => {
const [related, setRelated] = useState([])
useEffect(() => {
let unsubscribe = onValue(ref(db, `posts/related`), snapshot => {
let _related = Object.keys(snapshot.val())
setRelated(_related)
})
return () => unsubscribe()
}, [])
return(
<div className = 'Related'>
{related.slice(0, numRelated).map((elem, i) =>
<Link href = {elem}>Whatever</Link>
)}
</div>
)
}
export default RelatedContent
And the Firebase component looks like:
import { initializeApp } from 'firebase/app'
import { getDatabase, goOnline, goOffline, limitToLast, onDisconnect, onValue, orderByValue, push, query, ref, remove, runTransaction, update } from 'firebase/database'
const config = { ... }
const app = initializeApp(config)
const db = getDatabase(app)
export { db, dbt, goOnline, goOffline, limitToLast, onDisconnect, onValue, orderByValue, push, query, ref, remove, runTransaction, update }
package.json looks like:
{
"name": "app-next",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest"
},
"dependencies": {
"#primer/octicons-react": "^16.3.0",
"chart.js": "^2.7.2",
"firebase": "^9.6.4",
"gfm": "0.0.1",
"moment": "^2.29.1",
"next": "12.0.8",
"prismjs": "^1.26.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-markdown": "^8.0.0",
"rehype-katex": "^6.0.2",
"rehype-raw": "^6.1.1",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"eslint": "8.7.0",
"eslint-config-next": "12.0.8",
"eslint-plugin-promise": "^6.0.0",
"jest": "^27.4.7"
}
}
If I place the fake data and the onValue.mockImplementation() function before the test declaration, the test passes correctly.
The problem is that I've several tests with multiple definitions of the fake data, and I need to declare the fake data within every test.
If I do so, I get the error.

Style import (with webpack) on react js

I'm working on a React project and I'm trying to use this library(https://www.npmjs.com/package/react-image-gallery)
from npm And from the Documentation, they say we must add these instructions to import the CSS
my component
import React from 'react'
import "~react-image-gallery/styles/css/image-gallery.css";
import "~react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';
export function Features() {
const images = [
{
original: 'https://picsum.photos/id/1018/1000/600/',
thumbnail: 'https://picsum.photos/id/1018/250/150/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
thumbnail: 'https://picsum.photos/id/1015/250/150/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
thumbnail: 'https://picsum.photos/id/1019/250/150/',
},
];
return (
<div>
<ImageGallery items={images} />;
</div>
)
}
my packeg json
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#mui/icons-material": "^5.2.4",
"#mui/material": "^5.2.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-image-gallery": "^1.2.7",
"react-material-ui-carousel": "^3.1.1",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.3",
"web-vitals": "^1.0.1"
},
But when I add this in my Component it gives me this ERROR
If there is no solution, please suggest to me the name of a library similar to this
Thanks everyone, the issue is resolved
I added this to the component
import "react-image-gallery/styles/css/image-gallery.css";
import React from 'react'
import "react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from 'react-image-gallery';
import {ImgGallery} from "./Styled.js"
export function ShopDetails() {
const images = [
{
original: 'https://picsum.photos/id/1018/1000/600/',
thumbnail: 'https://picsum.photos/id/1018/250/150/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
thumbnail: 'https://picsum.photos/id/1015/250/150/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
thumbnail: 'https://picsum.photos/id/1019/250/150/',
},
];
return (
<ImgGallery>
<ImageGallery thumbnailPosition="left" useBrowserFullscreen={false}
showPlayButton={false} autoPlay={true} items={images} />;
</ImgGallery>
)
}
You must import only the components from the library, not the css or scss files.
For example import ImageGallery from 'react-image-gallery' and use it below like <ImageGallery/> as usual.
If it's not successful than try to import css/scss files to index.js

Error :: Invalid hook call. Hooks can only be called inside of the body of a function component

I am trying to bundle my custom component using microbundle
Reference : https://github.com/developit/microbundle
My component package.json is this.
{
"name": "components",
"version": "0.0.0",
"description": "react.js component library",
"homepage": "",
"license": "ISC",
"main": "dist/index.js",
"source": "lib/index.js",
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib"
],
"scripts": {
"dev": "microbundle --external=\"react,react-dom\" --globals=\"React,ReactDOM\" watch --jsx React.createElement lib/*.js"
},
"dependencies": {
"axios": "^0.21.1",
"prop-types": "^15.7.2",
"react-debounce-input": "^3.2.3"
},
"devDependencies": {
"microbundle": "^0.13.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
when I Have component this
import React from 'react';
const Index = () => {
return (
<div>
<button onClick={()=>{
alert('==')
}}>{'state'}</button>
</div>
);
};
export default Index;
it works perfectly .I am using this component in NEXTJS or (server side react framework).
but when I use HOOKS it show me below error
import React from 'react';
const Index = () => {
const [state,setState] = React.useState(0)
return (
<div>
<button onClick={()=>{
alert('==')
}}>{'state'}</button>
</div>
);
};
export default Index;
error
my bundle.js
function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=e(require("react"));exports.Header=function(){return t.default.useState(0),t.default.createElement("div",null,t.default.createElement("button",{onClick:function(){alert("==")}},"state"))};
//# sourceMappingURL=index.js.map
You can try by removing the .next folder and running the server again.

Categories