I have been trying to get react-select to work but somehow i have failed in every turn. What ever i have tried is:
1-create react project using vs2022
2-install react-select using "PM > npm i --save react-select" command
3-modify home.js as in following
import React, { Component } from 'react';
import Select from 'react-select'
export class Home extends Component {
render () {
return (
<div>
<Select />
</div>
);
}
}
4-Hit F5 key.
The above attempt results in Invalid hook call error. I have no idea what i have been doing wrong.
I have realized that aforementioned problem is not something specific to react-select. It exists in every single component that I have tried so far...
Problem is; I was using Package Manager Console ( PM ) which installs components under [PROJECT_DIR]/node_modules directory.
Navigating to [PROJECT_DIR]/clientapp using cd clientapp in Developer Powershell (PS) and then issuing same npm command fixes the problem.
Related
I have installed marked js in react app using npm install --save #types/marked.
Below is the react component:
import { marked } from "marked";
// import { marked } from "../../node_modules/#types/marked/index";
// import { marked } from "../../node_modules/#types/marked/index.mjs";
// import * as marked from "marked";
const MyPage : React.FC = () => {
return (
<div>
{ marked("Hello world from MyPage.") }
</div>
)
}
export default MyPage;
As you can see in below screenshot of tooltip in VS code, the intellisence knows where the actual function is.
But the app does not compile, I get the following errors (corresponding to different styles of imports for marked in comments):
Module not found: Can't resolve 'marked' in 'D:\coding\myblog\blog-frontend\src\app-components'
Module not found: Can't resolve '../../node_modules/#types/marked/index.mjs' in 'D:\coding\myblog\blog-frontend\src\app-components'
Basically, what ever string that I am providing after from in import statement, react tries to find it in ~/src/app-components. But all other imports are working fine (like my servies, models etc).
I know it's a bit late, but I had the same issue and could resolve it with:
npm install --save marked
In your package.json file you can look up dependencies if it's correct installed.
I used npm install -g marked at first and that wasn't really working despite getting the feedback that it was installed.
I have created my own custom React.js Icons package, with the help of the #chakra-ui/react and #chakra-ui/icons packages. However, when I import an Icon from my custom package, create-react-app throws an Invalid hook call.
Here is the code:
My custom package:
export const Down = createIcon({ d: "M21 7l-9 10L3 7", displayName: "hey" });
The other project I import it into:
import { Down } from "#hashtag-design-system/icons";
...
return (
<Down />
)
Any help is appreciated!
I had to pass #chakra-ui/react & #chakra-ui/icons, as peerDependencies in the package.json file, in order to fit this. I also used Rollup.js, that did not include extra code, but adding the packages as peerDependencies, seem to solve the issue
This is probably asked all the time, but I've tried every approach under the sun and can't find a solution.
I've created a repo to make it easier to get help. You can clone it, run npm install and then npm start:dev to see a quick local server on http://localhost:8080.
It works, and when I change a file (say, src/components/Note/Note.css) the app does reload. However, I want to only reload the component, not the whole page. I'm not sure what I'm doing wrong. Any help will be appreciated!
To debug issues like this, enable "Preserve log" in Chrome DevTools console settings to preserve console log across page refresh.
The error was:
Uncaught RangeError: Maximum call stack size exceeded
This was fixed once the following changes were made:
Remove new webpack.HotModuleReplacementPlugin() from plugins (as webpack-dev-server is started with --hot)
Also opt-out of babel transpiling ES6 modules by updating presets in .babelrc to ["react", ["env", { "modules": false }]].
"modules": false is to tell babel to not compile import/exports and let webpack handle it as described here and here (Check step 3.3.c).
For anyone using Next.js:
If you edit a file in pages/, the whole page will reload. Bummer, state is lost.
If you edit a file in components/, only the relevant module will re-load (i.e., hot reload as you expect).
My recommendation: keep the files in your pages/ folder simple.
Iterate your design/details in a component file in the components/ folder.
For example:
// pages/welcome.jsx
import WelcomePage from "../components/welcomePage";
export default function Welcome() {
return <WelcomePage />;
}
// components/welcomePage.jsx
import React from "react";
import Layout from "./layout";
import { useContext, useEffect, useState } from "react";
import PlayerContext from "../../context/playerContext";
export default function WelcomePage() {
const { songTitle } = useContext(PlayerContext);
return (
<Layout>
<div className="...">
<div className="...">
Welcome! Let's play {songTitle}.
</div>
</div>
</Layout>
);
}
Then you can go ahead and make small edits to components/welcomePage.jsx without losing state in your browser.
I have a react project and I'd like to use scrollmagic with the velocity plugin. Here's what I did from terminal once I already have a react project set up
npm install scrollmagic
npm install velocity-react
This is what my src/App.js looks like
import React, { Component } from 'react';
import ScrollMagic from 'scrollmagic';
import Velocity from 'velocity-react';
class App extends Component {
componentDidMount() {
// init controller
var controller = new ScrollMagic.Controller();
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger"})
// trigger a velocity opaticy animation
.setVelocity("#animate", {opacity: 0}, {duration: 400})
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
}
render() {
return (
<div>
<div className="spacer s2"></div>
<div className="spacer s2"></div>
<div id="trigger" className="spacer s0"></div>
<div id="animate" className="box1 blue">
<p>Now you see me...</p>
view source
</div>
<div className="spacer s2"></div>
</div>
);
}
}
export default App;
Then I ran my webpack command without error. Now when I look in my Chrome browser, I see a blank page. And the debug console gives me these errors:
15:56:08:694 (ScrollMagic.Scene) -> ERROR calling setVelocity() due to
missing Plugin 'animation.velocity'. Please make sure to include
plugins/animation.velocity.js
15:56:08:694 (ScrollMagic.Scene) -> ERROR calling addIndicators() due
to missing Plugin 'debug.addIndicators'. Please make sure to include
plugins/debug.addIndicators.js
How do you get these Velocity and Indicator functiosn to work with scrollmagic in a reactjs environment?
I came across this issue in a recent project. There are a couple of hoops you need to jump through to get it up and running.
1) I had to add aliases for all the imports I wished to make. This was done via the webpack.app.config.js file.
module.exports = options => ({
resolve: {
alias: {
"TweenMax": "gsap/src/uncompressed/TweenMax.js",
"TimelineMax": "gsap/src/uncompressed/TimelineMax.js",
"ScrollToPlugin": "gsap/src/uncompressed/plugins/ScrollToPlugin.js",
"ScrollMagic": "scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
"ScrollMagicAddIndicators": "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js",
"ScrollMagicGSAP": "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"
}
}
});
2) Once I had added this. I had to have the correct order of imports inside my runtime script.
import * as ScrollMagic from 'scrollmagic';
import 'TimelineMax';
import 'ScrollMagicGSAP';
import 'ScrollMagicAddIndicators';
This all worked with the following dependencies.
"gsap": "^1.20.3",
"scrollmagic": "^2.0.5",
Hope this helps.
I am quite new to reacjs and stuggle to create a reactjs component for paypal's in-context express checkout windows - it is simple to do in plain javascript but not sure how I can create a component and use it in similar way as react-stripe-checkout? thanks
Please use react-paypal-express-checkout (I'm the author):
Install:
npm install --save react-paypal-express-checkout
Simplest Example (but it will show the Paypal express check out button):
import React from 'react';
import PaypalExpressBtn from 'react-paypal-express-checkout';
export default class MyApp extends React.Component {
render() {
const client = {
sandbox: 'YOUR-SANDBOX-APP-ID',
production: 'YOUR-PRODUCTION-APP-ID',
}
return (
<PaypalExpressBtn client={client} currency={'USD'} total={1.00} />
);
}
}
==========
There is also a full example, in which you can have all types of callback function (e.g. completed payment-ID, return-URL etc.)
For full detailed document (as well as official guides from Paypal,) please go here:
https://github.com/thinhvo0108/react-paypal-express-checkout