I have installed version 15.2.1 of react, react-addons-shallow-compare, and react-dom. When I try to use react-virtualized, I get an error on the Chrome console saying
external "React.addons.shallowCompare":1Uncaught ReferenceError: React is not defined
Without using react-virtualized, React is working fine. Not sure why I am getting this error.
Never mind. Figured it out. I was using the UMD build of react-virtualized but with a non-UMD build of React and React.addons.shallowCompare. If you're using a bundler like Webpack, there likely isn't a global React variable.
In this case, you should use the CommonJS or ES6 builds of react-virtualized.
Related
I have a slight problem with a basic Node.JS method. When I'm trying to use "require()' method to import any downloaded (with 'npm install ..) module/library, I get a Visual Studio Code message that asks 'to convert 'require'(which is a Common JS module) into ES. If I do it, it transforms 'require()' into 'import..' though I want keep using 'require()'. Why is it so ? I read somewhere that Common JS is already included in the Node.JS environment though.
Then, when trying to compile my index.js file (with 'node index.js'), I obviously get an error about 'require' not recognized method.
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users...index.js from C:\Users...index.js not supported.
I tried then to install Webpack to fix this issue, but nothing change. I also kind of installed CommonJS (npm i common-js)..
Another common answer was to remove 'type':'module' from package.json file which normally should allow to use 'require', but I don't even have such a line in the file.
On top of that I've recently read that 'require' is not compatible with browser development tools (it's ok). But I'm trying to import a downloaded module/npm package in VSC terminal, not even in a browser.
As you understand I'm new to Node.JS, but I don't really get what's going on in this case...
I have a simple setup with Strapi as a backend and React as a frontend. My goal is to get the result from the api I have in my backend using any tool out there. I first tried with Axios but seems to have an issue doing GET call because the 'Content-Lenght' wasn't generated automatically and I couldn't set it manually somehow.
I decided to use something else and one that I found that seems popular is node-fetch.
However, I can't even begin to use it. I install it locally to my project using:
npm i node-fetch --save
Then in my .js file:
import fetch from 'node-fetch';
const App = () => {
const result = fetch('https://api.github.com/');
}
export default App;
Then I try compiling or running the project and I get the following error message:
.\node_modules\node-fetch\src\index.js
Cannot find module: 'node:http'. Make sure this package is installed.
If I check the actual file in the node-fetch module. It is easy to see that the said module is imported there. However, I am unsure what this format for importing is even about with the 'node:xxxx'. I supose this is some kind of way to import basic node module but then, why would they be missing from my installation.
I tried it on me personal dev PC first and it failed. I then went ahead and troubleshooted for hours as to what it could be. I ended cleaning my entire project node_modules, rebuilding, uninstalling node.js and everything module installed globally. Reinstalling through nvm instead. Still didn't work.
I also tried installing "npm i http --save", which did nothing.
and today, I just tried this on a fresh project on my work computer and I have the exact same thing.
what could it be? Is this just a node-fetch issue in general?
("node-fetch": "^3.2.3")
The package node-fetch is a fetch implementation for Node.js not for the browser. In React you should be able to use fetch without installing and importing any package because fetch is part of the browser API and is present on the window object (window.fetch).
For browsers that don't support fetch you need a polyfill, check Can I Use for browser support and use whatwg-fetch as a polyfill.
See this for a polyfill solution for CRA:
https://github.com/facebook/create-react-app/blob/main/packages/react-app-polyfill/README.md
See this for examples on how to use fetch in React:
https://reactjs.org/docs/faq-ajax.html
I am including pg-promise in my Angular app to make some queries.
My app is targeting browsers and I am willing to deploying it via ng build --prod.
However, when I launch the development server with Angular CLI using ng serve I get lots of errors and my app does not work since I imported pg-promise with:
import * as pgPromise from 'pg-promise';
Errors are like Module not found: Error: Can't resolve 'XXX' in 'path.
I tried to solve with the solutions provided in this answer:
Open src/tsconfig.app.json*.
Add "node" to the "types" array.
, and installing node types via npm i #types/node, but nevertheless I am still hitting the same errors.
Finally, lookig at the types declared in the pg-promise.d.ts file, I can clearly see there's an error which makes me think is the cause of the problems I am having. VScode is telling me that it Cannot find namespace 'NodeJS'.ts(2503).
Any suggestion on how I should include pg-promise in my app without all these errors?
I have a Node JS web app that I've recently decided to add ReactJS to. I can use regular React, but using JSX throws an unexpected token < error as Babel doesn't seem to be transpiling it.
I have Babel 7 installed, and have been using it on this project for a while.
I added #babel/plugin-transform-react-jsx" and "#babel/plugin-syntax-jsx" to my package.json, and listed them in my .babelrc file.
I tried adding type='text/babel' to the script link but the file didn't even run then.
I know the React code is valid as it's just dummy-code I pulled directly off the React website to test that it's working.
I'm not sure what else I need to do to get Babel to transpile the JSX.
I'm attempting to use the fetch function in react-native to grab a piece of data from the web. from what I understand reading the docs, the fetch function is built in to react-native.
when doing so, I get the module resolution error in the attached screenshot, where for whatever reason the react-native bundler is attempting to use the fetch provided by typescript from my ~/.cache directory.
I've previously had typescript 2.6 installed globally via npm, I uninstalled it to see if that might fix things, but the error persists.
I should note that the only things I've done for this project are to create it with create-react-native-app, add a little snippet to the App.js component stolen from the react docs to fetch some JSON, and yarn run eject the project (this error persisted before and after the ejection)
well in my turkey-induced frenzy, it appears I hadn't properly uninstalled the global typescript install on my computer.
having done so properly, the issue is resolved;
however the issue of react-native's module resolution strategy being incompatible with a global typescript installation persists.