Stripe API: Module not found: Can't resolve '#stripe/react-stripe.js' - reactjs

Do I have a simple typo? Do I need to install anything else? I'm getting the following error message:
"Module not found: Can't resolve '#stripe/react-stripe.js'"
I have also npm installed: #stripe/react-stripe-js #stripe/stripe-js
Appreciate any help figuring this out!
Below are screenshots for reference:

import ... from '#stripe/react-stripe-js'
You are importing it in the wrong way. #stripe/react-stripe.js is not correct. Just replace . with -, it should work then.
As you can see in the its document. You need to import its component from #stripe/react-stripe-js
stripe-js correct import statement

Stripe API ReactJS Error
“Module not found: Can’t resolve ‘#stripe/react-stripe.js’”
npm install #stripe/react-stripe-js#1.11.0
‘#stripe/react-stripe-js’ or ‘#react-stripe-js’
When I read the official Stripe docs, everything looked simple. However, I stuck at the first step for an hour.
The issue was a
Error: module not found: can’t resolve ‘#stripe/react-stripe-js’
It is a very simple error that occurs when we miss modules. But I definitely installed and followed the official manual like the below picture. It was very weird so I started to install another one but didn’t work.
So how do you fix it?
First, open your ” package.json” and take a look at
if your package is okay, it supposed to look like this below
#stripe/react-stripe-js”: “1.4.1”,
“#stripe/stripe-js”: “1.15.0”,
the Left side should be the package name and the right side is a version of the package. But when I opened up
“#stripe/stripe-js”:“github:stripe/stripe-js”
#stripe/react-stripe-js”:“github:stripe/stripe-js”
So I reinstalled it like this, added a specific version of the package instead of copying it from Strip docs.
Try like this (Answers)
npm install #stripe/react-stripe-js#1.1.2
npm install #stripe/react-stripe-js#1.11.0
And It solved easily. I am not sure why this issue happened. If I find the reasons, I will add them or if you know the reasons please let me know.

Related

React server won't start after installing styled-components

Disclaimer: this is my first question on Stack Overflow, so apologies if it's not formatted correctly. Please let me know how I can improve it or if more details are needed.
I tried to install styled-components for my React app with the following command npm install --save styled-components.
Before I did this, my server started up just fine with npm start.
After install, React tries to start up the development server but it stops and returns the following errors:
cacheEntry.sizeOnlySource = new SizeOnlySource(size);
TypeError: SizeOnlySource is not a constructor
at updateFileWithReplacementSource (project-directory/node_modules/webpack/lib/Compiler.js:756:37)
at updateWithReplacementSource (project-directory/node_modules/webpack/lib/Compiler.js:738:8)
at processMissingFile (project-directory/node_modules/webpack/lib/Compiler.js:801:8)
at project-directory/node_modules/webpack/lib/Compiler.js:843:10
at Immediate.<anonymous> (project-directory/node_modules/memfs/lib/volume.js:698:17)
Initially, I tried uninstalling the styled-components package. Same errors. Then, I tried updating webpack with npm update webpack.
I googled the errors but they were all for problems that seemed unrelated or that are now fixed.
Support Webpack 4.29.0 breaking change
output.futureEmitAssets option breaks compatibility with source map upload plugins
library target umd - Uncaught TypeError: x is not a constructor
I did come across a post on Stack Overflow explaining that --save is no longer necessary as of npm version 5.0.0. Perhaps it's the source of the error?
Note that I installed the styled-components package on a separate branch of my project, but the server still won't start when I switch to the main branch and I'm getting the same errors.
Honestly, I have no idea what's going wrong or how to fix it. Any help or guidance would be greatly appreciated.
Edit: before the Starting development server... line I get after running npm start, there's some kind of message about webpack being deprecated. I hadn't noticed that before, but it flashes by too quickly for me to read it and I can't scroll up to see the message. I created a new React project from scratch to see if the server would start. It does, but I'm still getting the aforementioned messages.

Why am I getting a "Cannot find module './cli-engine'" error and how can I fix it?

I'm new to programming, so please be gentle.
When I use 'npm start' to view my react app in local host it won't compile. I get an error message, 'Cannot find module './cli-engine'. That was not the case until today.
I suppose this file was in node_modules until recently? How can I restore my development environment to normal without breaking anything?
Here's the full error message:
Cannot find module './cli-engine'
Require stack:
- /Users/louysgackstetter/Desktop/Portfolio/Dominion/dominion/node_modules/react-scripts/node_modules/eslint/lib/api.js
- /Users/louysgackstetter/Desktop/Portfolio/Dominion/dominion/node_modules/eslint-webpack-plugin/dist/getESLint.js
- /Users/louysgackstetter/Desktop/Portfolio/Dominion/dominion/node_modules/eslint-webpack-plugin/dist/linter.js
- /Users/louysgackstetter/Desktop/Portfolio/Dominion/dominion/node_modules/eslint-webpack-plugin/dist/index.js
- /Users/louysgackstetter/Desktop/Portfolio/Dominion/dominion/node_modules/eslint-webpack-plugin/dist/cjs.js
- /Users/louysgackstetter/Desktop/Portfolio/Dominion/dominion/node_modules/react-scripts/config/webpack.config.js
- /Users/louysgackstetter/Desktop/Portfolio/Dominion/dominion/node_modules/react-scripts/scripts/start.js
UPDATE: npm install did not fix the issue. Or rather, it did, I no longer got the error described above, but I got a different "Cannot find module" error instead. Ultimately I created a completely new react-redux app using the create-react-app command and moved my source code over. Took me 10 minutes, solved the problem like a charm.
You can try npm install, and see if that resolves the problem.
Here is explained everything you need to know about it:
What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?

react-bootstrap-table-next doesn't have type script to support import

After I installed react-bootstrap-table-next, I tried to use
"import BootstrapTable from 'react-bootstrap-table-next';" in my tsx file. As example showed in here
I got error message says "Could not find a declaration file for module 'react-bootstrap-table-next'. '../node_modules/react-bootstrap-table-next/lib/index.js' implicitly has an 'any' type."
And I run npm install #types/react-bootstrap-table-next, but couldn't find any.
Does anyone has same issue? or how did you solve the problem?
Ron
Right now it looks like there are no plans to support Typescript by the team that develop the project.
You can track the develop of the issue here on this issue and maybe you can vote up. I'm also waiting for it.
You can use this package. There is support for TypeScript now.
npm install --save #types/react-bootstrap-table-next
or
yarn add #types/react-bootstrap-table-next
try running
npm install react-bootstrap-table-next --save

CamanJS with React

I'm trying to use CamanJS with React, I'm installing as a node module with npm install caman per the documentation but I am getting an error. I've tried using require to bring it in, I've also tried import. The package is in my node_modules folder.
Heres the error:
Console Warning:
Any help is very much appreciated!
Yeah, the issue is that fibers is looking for environment variables, but because you're running it in the browser, it can't find them. npm i -s caman is meant to be used with node. Kinda a bummer.

Module not found: Can't resolve '#babel/runtime/core-js/array/from'

I am new to react and I have this problem when trying to use react-bootstrap.
I've installed react-bootstrap, reactstrap and react-bootstrap-select, and the problem is that when I try to import something from react-bootstrap I get this error:
./node_modules/react-bootstrap/es/DropdownMenu.js Module not found:
Can't resolve '#babel/runtime/core-js/array/from' in
'C:\webprojects\react\mytest-app\node_modules\react-bootstrap\es'
I removed the line calling this script and I got another similar error, but that mentions another script.
I have searched in many placed on the web and installed babel-runtime and I tried npm install but nothing seems to work. If I go to the mentioned folder I find these scripts. I don't really know what to do or what is the exact problem here.
Any help would be appreciated.
This looks like a recently introduced bug you are hitting, making the current 0.32.2 version of react-bootstrap incompatible with the babel version used:
https://github.com/react-bootstrap/react-bootstrap/issues/3231
We temporarily fixed the react-bootstrap version in package.json to 0.32.1 as a workaround.

Resources