Backstory on the problem:
Hi I have a react code that npm start works on but npm test doesn't and I have a slight changed version of the same code that my npm test works on but npm start doesn't. I'm now trying to figure out how to get my test to work on the code that npm start works on. I didn't realized the sight difference until after I completed test and now I'm having trouble converting the tests to work for my code that npm start works on. The difference in the codes was that my code that npm start works on state ={/*multiple things*/} was outside the constructor(props){} and all the functions in the react app had to be called with function = (value) => {} on the code that npm test worked on the state ={/*multiple things*/} was inside the constructor(props){} and all the functions in the react app had to be called with function(value){} to work.
The problem:
current error:
error
package.json
{
"private": true,
"version": "0.0.0",
"name": "example-react",
"dependencies": {
"moment": "^2.22.2",
"react": "16.4.1",
"react-dom": "16.4.1",
"react-scripts": "^1.1.4",
"react-snapshot": "^1.3.0",
"react-table": "^6.8.6",
"recharts": "^1.1.0"
},
"devDependencies": {
"babel-jest": "*",
"babel-preset-env": "*",
"babel-preset-react": "*",
"enzyme": "^3.4.1",
"enzyme-adapter-react-16": "^1.2.0",
"jest": "*"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && react-snapshot",
"test": "jest --verbose",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
.babelrc
{
"presets": ["env", "react"]
}
app.js
import moment from 'moment';
import React from 'react';
class ReactPage extends React.Component {
constructor(props) {
super(props)
this.setTimeMonth = this.setTimeMonth.bind(this)
this.setTimeDay = this.setTimeDay.bind(this)
}
state = {
CUS_KEY: "",
Date1: "",
Date2: "",
Date3: ""
}
setTimeMonth = (time) => {/*code*/}
setTimeDay = (time) => {/*code*/}
//some more functions
render(){
return();
}
}
export default ReactPage;
How do I fix this code so it doesn't crash on compile?
Related
I'm trying to use https://github.com/garbit/lottie-web-vue with vue 3 and typescript in our project, but somehow types are not matching or not recognized:
my main.ts:
import {createApp} from 'vue';
import App from './App.vue'
import LottieAnimation from "lottie-web-vue";
import Quasar from "quasar";
import quasarUserOptions from './setup/quasar-user-options'
const app = createApp(App);
app.use(LottieAnimation);
app.use(Quasar, quasarUserOptions);
app.mount('#app')
The error on compilation:
ERROR Failed to compile with 1 error 4:34:00 PM
This dependency was not found:
* lottie-web-vue in ./src/main.ts
To install it, you can run: npm install --save lottie-web-vue
So far so weired, now here comes the package.json of the actual module:
{
"name": "lottie-web-vue",
"version": "2.0.6",
"description": "Airbnb Lottie-web component for Vue.js projects",
"type": "module",
"exports": {
".": "./dist/index.js"
},
"types": "./dist/LottieAnimation.d.ts",
"files": [
"dist"
],
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview --port 5050",
"typecheck": "vue-tsc --noEmit",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
"repository": {
"type": "git",
"url": "git+https://github.com/garbit/lottie-web-vue.git"
},
"keywords": [
"vuejs",
"lottie",
"lottie-web-vue",
"lottie-web-vuejs",
"lottie-web-animation",
"vue-lottie",
"lottie-vue",
"lottie-web",
"web-lottie",
"lottie-player",
"player-lottie",
"vue-lottie-player",
"lottie-player-vue",
"player-lottie-vue",
"vue-component",
"vue-animation",
"lottiefiles"
],
"author": "Andy Garbett",
"license": "MIT",
"bugs": {
"url": "https://github.com/garbit/lottie-web-vue/issues"
},
"homepage": "https://github.com/garbit/lottie-web-vue#readme",
"dependencies": {
"lottie-web": "^5.8.1",
"vue": "^3.2.29"
},
"devDependencies": {
"#rushstack/eslint-patch": "^1.1.0",
"#types/node": "^16.11.22",
"#vitejs/plugin-vue": "^2.1.0",
"#vue/eslint-config-prettier": "^7.0.0",
"#vue/eslint-config-typescript": "^10.0.0",
"#vue/tsconfig": "^0.1.3",
"eslint": "^8.5.0",
"eslint-plugin-vue": "^8.2.0",
"prettier": "^2.5.1",
"rollup-plugin-typescript2": "^0.31.2",
"typescript": "~4.5.5",
"vite": "^2.7.13",
"vue-tsc": "^0.31.1"
}
}
And here the linked LottieAnimation.d.ts file:
import type { App } from "vue";
import { LottieAnimation } from "./components";
declare const _default: {
install: (app: App) => void;
};
export default _default;
export { LottieAnimation };
//# sourceMappingURL=LottieAnimation.d.ts.map
Is there a way I can fix this without touching the library? If the library needs to be changed, what would be required?
You can use also have a look at https://github.com/Andreas-Schoenefeldt/lottie-web-vue-yarn-ts of you want to reproduce the thing locally.
Also here is the extensive back and forth on the lottie-web-vue ticket: https://github.com/garbit/lottie-web-vue/issues/11
Many thx community!
I'm working on a nextjs application and installed bootstrap. The styles work but when I try to import the bootstrap.bundle.js file I get an error
Could not find a declaration file for module 'bootstrap/dist/js/bootstrap'. 'c:/Users/HP/OneDrive/Documents/webapps/nft-marketplace/node_modules/bootstrap/dist/js/bootstrap.js' implicitly has an 'any' type.
This is my pacakage.json
{
"name": "nft-marketplace",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#nomiclabs/hardhat-ethers": "^2.0.2",
"#nomiclabs/hardhat-waffle": "^2.0.1",
"#openzeppelin/contracts": "^4.3.1",
"#popperjs/core": "^2.10.2",
"axios": "^0.21.4",
"bootstrap": "^5.0.0-beta3",
"chai": "^4.3.4",
"dropzone": "^5.9.3",
"ethereum-waffle": "^3.4.0",
"ethers": "^5.4.6",
"hardhat": "^2.6.4",
"ipfs-http-client": "^52.0.3",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"web3modal": "^1.9.4"
},
"devDependencies": {
"#types/bootstrap": "^5.1.6",
"autoprefixer": "^10.3.4",
"eslint": "7.32.0",
"eslint-config-next": "11.1.2",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.10"
}
}
This is my app.js file
import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.css";
import { useEffect } from "react";
import "../styles/app.css";
function MyApp({ Component, pageProps }) {
useEffect(() => {
import("bootstrap/dist/js/bootstrap");
}, []);
return <Component {...pageProps} />;
}
export default MyApp;
I have searched and tried different solutions. I have also installed #types/bootstrap but still didn't work. What am I doing wrong? I need help this issue has me so confused.
this worked for me
useEffect(() => {
typeof document !== undefined
? require('bootstrap/dist/js/bootstrap')
: null
}, [])
If you use bootstrap 5 try to install propperjs
npm install #popperjs/core --save
Here are a couple fixes that seemed to work for me. Make sure #types/bootstrap is installed.
Option 1: Instead of import("bootstrap/dist/js/bootstrap");, try just import("bootstrap");.
Option 2: You can tell typescript where the types are for the "bootstrap/dist/js/bootstrap" module by using the paths option in tsconfig.json. That would look something like this:
{
...
"compilerOptions": {
"paths": {
"bootstrap/dist/js/bootstrap" : ["./node_modules/types/bootstrap"]
}
},
...
}
If you are using Vue Vite and have already downloaded npm i --save-dev #types/bootstrap.
You will try this next step which is to add a line of code in the env.d.ts folder, add declare module "boostrap"
I am learning react native and during this i was trying to implement drawer navigation but as soon as i installed the react-navigation-drawer(2.2.0) this error pops up.
Behaviour :
App crash on load
Reproduce :
Just reload the app
Package.js
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~42.0.1",
"expo-app-loading": "^1.1.2",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "^2.1.0",
"react-native-screens": "^3.4.0",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.1",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
"private": true
}
App.js
import React,{useState} from 'react';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
//import Navigator from './routes/homestack'
import Navigator from './routes/drawernav';
const loadFont = ()=>Font.loadAsync({
'merrie-regular':require('./assets/fonts/Merriweather-Regular.ttf'),
'merrie-bold':require('./assets/fonts/Merriweather-Bold.ttf')
});
export default function App() {
const [isFontLoaded,setFontLoaded] = useState(false);
if(isFontLoaded){
return (
//initial changes again
<Navigator/>
);
}else{
return(
<AppLoading
startAsync = {loadFont}
onFinish = {()=>setFontLoaded(true)}
onError = {()=>alert('Error')}
/>
);
}
}
Error:
AppLoading threw an unexpected error when loading:
TypeError: interpolate is not a function. (In 'interpolate(this.progress, {
inputRange: [PROGRESS_EPSILON, 1],
outputRange: [0, 1]
})', 'interpolate' is undefined)
**Already Tried:
1.Changing reanimated version
2.Uninstall and install reanimated version.
3.Uninstall and install drawer-navigation**
Note: It's on both android and IOS simulators.
Your react-navigation-drawer version is conflicting with the version of react-native-reanimated. Try to run npm i --save react-native-reanimated#1.0.0.
Downgrade your react-native-reanimated to version 1.1.0
Run this command in terminal
yarn add react-native-reanimated#1.0.0
This is screenshot of error:
I have 2 tests, the first one is working alright: sum.js :
function sum(a, b) {
return a + b;
}
module.exports = sum;
sum.test.js
const sum = require('./sum');
test('adds 2 + 5 to equal 7', () => {
expect(sum(2, 5)).toBe(7);
});
it works okay, prints message in console.
the second one (I dont sure) is set by default by create-react-app
App.test.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
App.js :
import React, { Component } from 'react';
import {HashRouter} from "react-router-dom";
import Routes from './routes';
import Alerts from './app/components/alerts';
import Navbar from '../src/app/navbar/navbar'
import Auth from './app/settings/auth';
import Register from './app/entities/user/modify-modal';
import './index.scss';
class App extends Component {
componentWillMount(){
}
render() {
return (
<HashRouter>
<>
<Auth></Auth>
<Navbar></Navbar>
<Alerts></Alerts>
<Register/>
<div className={"content-root"}>
<Routes/>
</div>
</>
</HashRouter>
);
}
}
export default App;
package.json
{
"name": "x5_r_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/cli": "^7.2.3",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.4.1",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#fortawesome/fontawesome-free": "^5.7.1",
"#fortawesome/fontawesome-svg-core": "^1.2.12",
"#fortawesome/free-solid-svg-icons": "^5.6.3",
"#fortawesome/react-fontawesome": "^0.1.3",
"axios": "^0.18.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"bootstrap": "^4.2.1",
"jest": "^24.5.0",
"jest-cli": "^24.5.0",
"jsdom": "^14.0.0",
"moment": "^2.23.0",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-addons-test-utils": "^15.6.2",
"react-bootstrap": "^1.0.0-beta.5",
"react-bootstrap-typeahead": "^3.2.4",
"react-datetime": "^2.16.3",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.2",
"react-select": "^2.3.0",
"reactstrap": "^7.0.2",
"rxjs": "^6.3.3",
"scss": "^0.2.4",
"test": "^0.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.4.0",
"babel-core": "^6.26.3",
"babel-jest": "^24.5.0"
}
}
package-lock.json is 20000 rows of code, so I dont know, what part of it is needed for explanation of my problem, all guides that I've read about this problem were useless for me, so I am asking here.
The issue is that the app was bootstrapped with create-react-app, but then the latest version of Jest was also installed and the npm test script within package.json was changed to launch jest directly.
The test failed since Jest was not configured to transpile the JSX syntax.
Tests that use syntax like JSX have to be transpiled before they can be run by Jest.
create-react-app includes react-scripts which handles all of that configuration automatically.
If an app is bootstrapped with create-react-app then Jest does not need to be installed and configured manually.
If an app is not bootstrapped with create-react-app, or if the app is ejected from create-react-app, then Jest needs to be installed and configured to transpile the test code.
I converted my Container into a .jsx file, but now I'm getting the following errors on my HTML elements in the render method:
Property does not exist on type 'JSX.IntrinsicElements.div
Property does not exist on type 'JSX.IntrinsicElements.h1
package.json
{
"name": "moonholdings.io",
"version": "0.1.0",
"private": true,
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/ --source-map",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive --source-map",
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"dependencies": {
"node-sass-chokidar": "^1.3.3",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts-ts": "2.17.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#types/jest": "^23.3.2",
"#types/react": "^16.4.14",
"#types/react-dom": "^16.0.5",
"#types/react-redux": "^6.0.9",
"#types/react-router": "^4.0.25",
"#types/react-router-dom": "^4.2.6",
"#types/react-router-redux": "^5.0.14",
"#types/redux": "^3.6.31",
"ramda": "^0.25.0",
"typescript": "^3.0.3"
}
}
loginContainer.js
import * as React from 'react';
import { connect } from 'react-redux';
// Actions
// import { addCoins } from 'actions/coins';
interface IProps {
loginActions: any
}
interface IState {
email: string;
password: string;
}
class LoginContainer extends React.Component<IProps, IState> {
public state: IState = {
email: '',
password: ''
};
public render() {
return (
<div id="login-container">
<h1>Login</h1>
</div>
);
}
}
// const mapDispatchToProps = dispatch => ({
// addCoins: (...args) => dispatch(addCoins(...args))
// });
export const LoginContainerJest = LoginContainer;
export default connect(null, null)(LoginContainer);
I've rm -R node_modules, I also did see that I had "#types/react-redux" installed twice, but I fixed that. Reinstalled Typescript, and still get the same (2312,14): Duplicate identifier 'LibraryManagedAttributes'. Error :(
Found the answer: Typescript Error: TS2339: Property 'span' does not exist on type 'JSX.IntrinsicElements'
Make sure you have import * as React from 'react' in your file
Update types for react npm install #types/react