As a summer project, I am creating an internet radio application, and settled on using Spotify's web playback API. I was going through their recommended guide of starting a react js app (of which can be found HERE), until I got to authorizing the user through a web call through the Router module:
router.get('/auth/login', (req, res) => {...}
These used to be included in webpack version 1-4, but no longer in v5. I was able to remedy this by individually installing all of them, except for fs. From what I have found, fs is a node module that can not be accessed in a web browser, so the react js application refuses to recognize it and gives me this error:
ERROR in ./node_modules/mime/mime.js 3:9-22'
Module not found: Error: Can't resolve 'fs' in 'E:\Code\Internet Radio\spotify\spotify-web-player\node_modules\mime
MANY other threads recommend adding this snippet to the resolve.fallback in webpack.config.js:
"fs": false
but seeing as it is required for the provided SDK and react js application to function, I am stuck.
I have looked at alternatives such as fs-browserify, like-fs, filer, and fs-web, but they either lead to more errors worthy of redesigning how fs was implemented originally, or cause my react js app to load a web page with almost empty HTML, and stating
You need to enable Javascript to run this app
Is there maybe a way to revert back to a previous webpack version, or is there something I am completely failing to find in the sea of about 30 open tabs looking for a solution on my own
Related
I am new to node and React Native and I have an issue that I hope someone can help me resolve.
I and another person are making a React Native application and currently I am trying to piece together a backend made by the other person with my frontend and I get the following error:
While trying to resolve module http from file /Users/alex/ParkME/node_modules/node-fetch/index.js, the package /Users/alex/ParkME/node_modules/http/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/alex/ParkME/node_modules/http/index.js. Indeed, none of these files exist:
/Users/alex/ParkME/node_modules/http/index.js(.native||.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.json|.native.expo.json|.expo.json|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
/Users/alex/ParkME/node_modules/http/index.js/index(.native||.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.json|.native.expo.json|.expo.json|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
Failed building JavaScript bundle.
Does anyone know what the issue might be?
Is the error coming from your backend or frontend code? And were the node modules included in the code you got from the other person? You can try running npm install command on the directory to update the dependencies if you haven't already.
I'm new to Reactjs, Nodejs and MongoDB. I'm currently trying to change Mediums snowflake tool to store users scores in a database. I have installed yarn, mongodb and mongodb-core through npm. It is a single page web application which is what I think is causing me trouble. I add
var MongoClient = require('mongodb');
To SnowflakeApp.js and encounter the following error:
Module not found: Error: Can't resolve 'dns' in
'/home/mlAHO174/snowflake/node_modules/mongodb-core/lib'
I've tried googling this error and have discovered it could be a range of things. I'm not sure if it is because React is front end and I'm trying to alter back end or because mongoDB is installed incorrectly. I'm new to this so would be grateful for help!
DNS is a core module of Node.JS. Telling people they need to install DNS via NPM will end up with them having a completely different module that does something else.
https://nodejs.org/api/dns.html vs https://www.npmjs.com/package/dns
This error most likely means you are trying to do something from the client-side that needs to be done on the server-side. If MongoDB module can't find the DNS component, it's running on the client-side.
MongoDB has to run on the server. In order to access data from React dynamically you'll need to set up an API using something like Express or Apollo.
Update:
A great way to do this is with Azure Functions (TypeScript) or AWS (Lambda) functions
For anyone who encounters this Error while importing the clientPromise (like in the with-mongodb template):
Make sure you're in the /pages/ directory!
It won't work in other directories like /components.
(and you should take a break or get some coffee...)
The problem is that you are trying to connect to the database from the front end. If this were possible that would open up a whole world of security issues. You need to set up your database connections on the backend and then have the front end make requests to the backend to handle the database.
I solved this by installing and using 'bson' instead of 'mongodb' for the client part of the code. 'bson' has a tiny bit of what 'mongodb' has and it might have what you are looking for. 'bson' is built for the browser.
In my case I needed the "ObjectId" in the browser and pulling it in from 'bson' did the trick as I didn't want to reference 'mongodb' because of the error described in the OP.
The other answers are also correct depending on why you're getting this error.
I think - mongo package is meant to be run on servers only, not in the browser.
It does not work in Next.js pages file components too, but does work in getStaticProps, getServerSideProps, getStaticPaths etc - because they run on the server, not the client.
Alternative - use Firebase Realtime database, you can access it in client-side code too. Example - a website (say a React app) that is hosted on GitHub pages or some other static server, but doesn't have a web app server (aka backend).
welcome to stack overflow.
You need to understand and learn few basics of web-applications. There's frontend, backend and a layer between them and a layer between backend and database. Frontend includes react.js, angular.js or anything else that is on browser. Backend is used to take request from frontend, providing API's to frontend and ask for data from other API's or database. Database includes sql, no-sql.
The error you are facing if of a NPM module mongodb-core.js. Either it's not installed properly, or installed using wrong version of module which is not comparable with your node version, or wrong version of NPM, or module using another NPM module which is not installed.
The issue in your case is mongodb-core uses a module dns which is not been installed. Try to install dns with npm i dns. or remove and install mongodb-core again.
Default node.js module gets created with express, adds all the dependencies and forces me to remove all these files afterwards.
Isn't there any other way to create simple node.js project without express while keeping all remaining seetings (node_modules marked accordingly etc.)? Was trying to google around but with no luck.
Please vote for the related request on YouTrack: https://youtrack.jetbrains.com/issue/WEB-12988
I would like to use ES6 Modules with Angular2 in an app that is served by Node.js and Express.js. However, when I try to load an Angular2/ES6 app in the browser, the following is printed in the FireFox console:
The stylesheet http://localhost:8080/boot.css was not loaded because its MIME type, "text/html", is not "text/css". localhost:8080
SyntaxError: import declarations may only appear at top level of a module vendor.js:1:0
SyntaxError: import declarations may only appear at top level of a module boot.js:1:0
The problem seems to be the result of something missing from the build of the Angular2 app that is done by the Node.js/Express.js server that serves the Angular2 app.
Specifically, the problem emerged after I deleted the entire public app folder from this GitHub AngularJS 1.x sample app and replaced it with a copy of the entire client app folder from this GitHub Angular2 example app. When I then started the Express.js server with nodemon server.js and typed http : // localhost : 8080 into FireFox, the console printed out the errors shown above.
I would like to get the Angular2 app running in the browser so that I can then manually start stepping through the work of re-creating the Node.js routes and resolving other errors one by one in order to get the Angular2 app to work with the Node.js/Express.js server.
What specific changes need to be made so that these initial errors due to ES6 imports are resolved when this Angular2 app is placed inside the public folder of this Node.js/Express.js instance?
I just check out those two repos, and then do the same thing you mentioned above.
the problem is that the client folder of angular2 is written is ES6 syntax.
I don't think currently we can run this code on the browser without problem and
you can tell from the repo that it uses babel to compile the code
so if you want to use its client code, just make sure you also do the same
compile stuff as it does. I think everything should work
update
What I am trying to say is the angular repo use babel and gulp to help it
transpile the code from ES6 to ES5.
You can run gulp serve under angular2-esnext-starter and it will generate one
new folder called dist my screenshot
copy the client folder under that dist folder to node-todo and remember
rename it to public and you will see everything is ok.
so the hint is copy the gulpfile of angular2-esnext-starter and don't forget
to add more dependencies to your package.json should solve your problem.
my workable node-todo
Currently creating an android app. I am simply trying to import the spotify-web-api-node module.
One line so far in my index.android.js to do this:
import SpotifyWebApi from 'spotify-web-api-node';
When I go to load the JS into my emulator I get the follow error:
602/603Error while persisting cache: SyntaxError /path/to/the/project/node_modules/restler/lib/multipartform.js: Invalid number (112:35)
I am using a mac, this occurs for android (have not tried ios yet).
react-native -v =
react-native-cli: 0.1.10
react-native: 0.21.0
Is this module surely not compatible with react-native or is there an edit I may need to make within restler to make it compatible? I see on the line it is complaining about, it is attempting to open/use the file system.
Line that is in the error description:
fs.open(this.value.path, "r", 0666, function (err, fd) {
First of all, I have never used this API. But after reading readme.md of spotify-web-api-node I found spotify-web-api-js
I assume you want to fire queries through spotify's API and display the results in your app. I'd suggest you to use spotify-web-api-js instead of spotify-web-api-node
You can call fetch() in your react-native app and use their API. Please let me know if this works. So that programmers who are facing the same problem will have an answer on this thread. Good luck!