I have a react app and have been installing packages using npm. I have a datastax db that I am trying to access in my react scripts using cassandra-driver, and make requests from using axios. I ran "npm install cassandra-driver" successfully. The line
const cassandra = require('cassandra-driver');
Throws 23 errors. All errors are breaking changes of the webpack version not including polyfills for node.js core modules by default. Such as
ERROR in ./node_modules/cassandra-driver/lib/streams.js 23:4-21
Module not found: Error: Can't resolve 'stream' in 'C:\Users\Base\Documents\py1\node_modules\cassandra-driver\lib'
Other posts about the webpack polyfill problems instruct to alter items in the webpack.config file. My problem is I don't know where to find the webpack config file as in my node_modules there are several files and a folder named webpack, and I am not new to programming but I am new to webdev & react. If there is an alternate solution for connecting my scripts to datastax that would be helpful as well. Thank you
OK I realize my error. I'm trying to access the db from the client side, and cassandra-driver is designed for server-side.
Related
I have created a brand new react app using VS2022 and create-react-app.
I have installed zlib using npm install zlib.
getting the following error when running npm run start:
ERROR in ./node_modules/zlib/lib/zlib.js 1:0-43
Module not found: Error: Can't resolve './zlib_bindings' in 'c:\projects\mall\mall\node_modules\zlib\lib'
To troubleshoot, I created a test.js file with just require('zlib') in it and it works.
file ./node_modules/zlib/lib/zlib.js has import './zlib_bindings' as a single line in it. But there is no ./zlib_bindings.js.
Questions:
How do I fix this?
How does that work when I run node test.js?
Your test.js file works because you run it with node.
The zlib module provides compression functionality implemented using
Gzip and Deflate/Inflate. It is the part of nodejs core module written
in c++
This module can't be used outside of node.js
You can however try to use react-zlib-js and it should work!
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'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.
I'm trying to bundle my node.js application with webpack or browserify, but I need some backend modules such as knex, bookshelf and others.
But webpack and browserify fail to package these modules since they do some strange stuff with require()...
I got these kind of errors :Cannot find module 'sqlite3' or Error: Cannot find module './dialects/postgres/index.js'
I can't ignore my node_modules directory since I need the modules in the package because I can't access the environment where my package will be used. (AWS Lambda)
I don't need webpack or browserify to optimize my node_modules but I need them, is there a way to tell webpack or browserify to just bundle the node_module folder and trust me if a require is missing ?
EDIT: I'm using serverless to test and deploy my lambdas and the only plugins allowing me to use ES2015 with babel force me to use webpack / browserify
Thank you :)
You can incorporate node_modules in the your Lambda package (the zip file containing your code that you upload in Amazon Lambda) and don't need to package it (I mean create a file with Webpack or Browserify).
Some node modules are not meant to be used in the browser and do not support packaging because they use dynamic requires. They can have good reasons to do that, specially ORMs like Bookshelf or Sequelize.
Webpack can manage simple dynamic requires, but it works only for rules easy to parse. If you really want to use webpack for whatever reason, you could have a look to the ContextReplacementPlugin but I don't think it worth the effort.
I had this exact problem and finally got it to work with webpack (don't know about browserify) by adding this to my webpack config:
{
plugins: [
new webpack.NormalModuleReplacementPlugin(/\.\.\/migrate/, '../util/noop.js'),
new webpack.NormalModuleReplacementPlugin(/\.\.\/seed/, '../util/noop.js'),
new webpack.IgnorePlugin(/mariasql/, /\/knex\//),
new webpack.IgnorePlugin(/mssql/, /\/knex\//),
new webpack.IgnorePlugin(/mysql/, /\/knex\//),
new webpack.IgnorePlugin(/mysql2/, /\/knex\//),
new webpack.IgnorePlugin(/oracle/, /\/knex\//),
new webpack.IgnorePlugin(/oracledb/, /\/knex\//),
new webpack.IgnorePlugin(/pg-query-stream/, /\/knex\//),
new webpack.IgnorePlugin(/sqlite3/, /\/knex\//),
new webpack.IgnorePlugin(/strong-oracle/, /\/knex\//),
new webpack.IgnorePlugin(/pg-native/, /\/pg\//)
]
}
If you're using serverless-webpack like me, you'll have to explicitly npm install the normal webpack module in your project and require it in your webpack config file.
This config is specifically for my setup where I use postgres without pg-native. Just ignore the modules you're not using.
The two top plugins aren't needed for webpack to build, but they get rid of a ton of annoying warnings. They're probably a little dangerous since they could match requires in other modules than knex. I couldn't find a better way without having to write my own plugin.
I was struggling to get webpack to bundle knex properly and want to share my configuration.
We could instead use ContextReplacementPlugin to avoid listing all drivers not needed for the project as when using webpack.IgnorePlugin. A side benefit is that it would avoid ignoring these packages in other modules (as mention by #Erik Frisk).
For example, I use a mysql database with mysql2 driver and my webpack config looks like this:
plugins: [
new webpack.ContextReplacementPlugin(/knex\/lib\/dialects/, /mysql2\/index.js/),
]
This will only bundle node_modules/knex/lig/dialects/mysql2/index.js excluding other dialects thus effectively ignoring the dependency in other packages like oracledb, mssql, etc.
To find more information about ContextReplacementPlugin have a look at Webpack’s ContextReplacementPlugin examples:
I'm trying to make use of the axios library to call some API endpoints.
My project setup is a Phoenix app (with brunch for asset management) and a React app (all in the web/static/js directory)
Most npm modules are ok, I do:
npm install --save _module-name_
Then I add the module to the brunch-config.js into the npm whitelist array.
Which I've done with axios, so it doesn't complain that it cannot find the library.
However, when I try and use axios e.g axios.post
I get the following error in the JS Console:
Cannot find module "axios/lib/adapters/xhr"
It's like brunch isn't loading in the axios dependencies (even though I can see that file if i navigate to node_modules/axios/lib/adapters
Has anyone had this issue (with any npm module and brunch/phoenix) and if so how do you go about fixing it?
Update
It seems to be a wider spread problem with brunch.
I also cannot use "React-Bootstrap" I get a similar error where it cannot find the sub-dependencies....
I had the same issue and updated brunch to the latest (2.7.5 at the time), which resolved my issue.
See https://github.com/brunch/brunch/issues/1136