hope you're doing well.
I'm new at react native and i'm stuck with a problem while trying to import a node module.
I need to create an app that will get orders from the API of a Wordpress Website with WooCommerce.
I first created a project with the command create-react-native-app picking then npm install. It's creating a structure like this in the project folder named picking:
node_modules
App.js
app.json
App.test.js
etc....
Then I installed the package woocommerce-api with npm install woocommerce-api --save (https://www.npmjs.com/package/woocommerce-api). This package allow me to do request to the WooCommerce API easier.
I want to not put the config to the WooCommerce API in the App.js, so I created a folder src and a folder woocommerce with a file api.js (should I write it with the first letter in uppercase ?) in it and I added import Api from 'picking/src/woocommerce/api'; in my App.js.
So now the structure is
node_modules
src
-- woocommerce
-- api.js
App.js
app.json
App.test.js
etc....
The problem is that I can't achieve to import the WooCommerceAPI module from woocommerce-api, no matter what I set in path to get the module.
There is the file api.js at the moment :
import WooCommerceAPI from '../../woocommerce-api';
var Api = new WooCommerceAPI({
url: 'http://localhost/mysite',
consumerKey: 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxx',
consumerSecret: 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxx',
wp_api: true,
version: '/wc/v2',
queryStringAuth: true
});
export default Api;
And I get the error :
Unable to resolve module '../../woocommerce-api' from etc ...
I can't find what is the problem and why this is not working. If you could help me on this, it would be very nice.
Have a nice day everyone :)
EDIT: I changed the line for the import to import WooCommerceAPI from 'woocommerce-api'; and I got a new error : Metro Bundler has encountered an internal error, please check your terminal error output for more details, but there is nothing in the terminal except Failed building JavaScript bundle.
EDIT2: I downgrade node from 9.4 to 8.0.0 and restart the project. I got the same error but in the terminal i now get this in yellow/orange : Problem checking node_modules dependencies: Unexpected end of JSON input
Okay, so I find a workaround. In fact, the import is working. For some reason that i don't know, this is the npm package that is not working and make the app crash.
So I removed the package woocommerce-api and I create a file in src/woocommerce called woocommerce-api.js, then I copied the content of this https://github.com/minhcasi/react-native-woocommerce/blob/master/WooCommerceAPI.js that is the same as the one in the npm package and I pasted it in my woocommerce-api.js. I import it in my api.jsfile and "voilà" !
Seems to work fine.
As you install woocommerce-api in your project there is no need to place the location like ../../woocommerce-api.
just change ../../woocommerce-api to woocommerce-api and your project should work.
Related
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 have a fully working modularized apollo server on nextJS (based on this article https://www.apollographql.com/blog/modularizing-your-graphql-schema-code-d7f71d5ed5f2/ ) basically im doing an Array of my typedefs and merging the resolvers using the merge function from lodash... so far so good... this feed a function makeExecutableSchema and this schema is going to the server... and it works great...
the problem is im trying to move the server outside nextJS... and when i do try to create a new project and yarn init or npm init... install the dependencies, and try to copy paste all my schema files to the new npm init project ALL my imports are messed up, and i start getting all this errors like:
in nextJS i have (this one simply works in nextJS):
import { merge } from "lodash";
in the new node project it says merge couldnt be found in lodash...
or the module is commonJS and it cannot do named imports...
or if i do an import using require it says ReferenceError: require is not defined, i think this one should be due to node expecting to run this on a browser but i have no idea how to specify this wont run on a browser since it's simply a js file which intends to modularized the apollo schema...
i just dont understand why all the import sentences work just fine in Next but when im starting the apollo server in plain node every import is giving so many errors... i have fixed some by adding the extension at the end of the filename im importing (thing that was not necessary in nextJS) or by adding "/index" at the end of the package being imported...
Is there a way to make the imports behave like in Next??? but in a new nodeJS project?
Any help or orientation would be GREATLY appreciated
The answer was:
Use Babel, install with NPM or YARN
"#babel/core"
"#babel/node"
"#babel/preset-env"
add the .babelrc file to the root directory of the project:
{
"presets": ["#babel/preset-env"]
}
to run the main file use a script in package.json like:
"start": "nodemon --exec babel-node index.js"
and this will allow to execute modern JavaScript :D
I have published an npm module: react-bootstrap-tooltip-button
The package.json file states
"main": "lib/TooltipButton.js",
Installing the module as a dependency of another project using npm works fine, however, when I try to import it like so
import TooltipButton from 'react-bootstrap-tooltip-button'
I get an error revealing that node is looking for the main file in the wrong place:
Module not found: [CaseSensitivePathsPlugin]
`[...]/node_modules/react-bootstrap-tooltip-button/TooltipButton.js`
does not match the corresponding path on disk - File does not exist.
Why is lib/ missing in the path?
As it turns out, the code was fine, but this is a bug in Webpack. Restarting the dev server solved the problem (just recompiling wasn't enough).
Found the hint here: create-react-app issues on github
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
I'm using this API for a web app I'm making that uses mailchimp:
Here's the node.js API page
I'm also using this git repo to understand how to use the API: example repo
I cloned the repo, ran npm install express in the express directory of the repo, then ran node app
when I did that, I got this error: Error: Cannot find module './node_modules/mailchimp-api/mailchimp'
The require statement that names this module (in index.js) is:
var mcapi = require('./node_modules/mailchimp-api/mailchimp');
I checked the path, it should be correct. is there something I'm missing?
You need to run npm install in the express directory of the repo so that all of the modules are installed. You are missing the mailchimp module.