issues with imports on modularized apollo server - node.js

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

Related

Why nodejs runs other js file first before index.js file?

I have created a simple nodejs project to see how nodejs runtime execution flow works. In my project folder I have initiated a nodejs project with npm init -y command. Then added "type": "module" to the package.json file. After that I have created two files
index.js with following content
console.log("index.js")
import x from './test.js'
test.js with following content
console.log("test.js")
export default {}
When I tried to execute the index.js file with node index.js I got the result as follows
test.js
index.js
But I expected the otherway around. Could someone explain why this is the behavior I am getting. Also please advice me, is there any way to enforce nodejs to go through the index.js file first before the other one?

Angular build - Module not found: Error: Can't resolve 'console'

I have a problem with my Angular project build, and ultimately deployment to heroku. I'm using an old(ish) npm package called binary parser, which causes the following error on when I build / deploy to heroku:
Module not found: Error: Can't resolve 'console' in '/tmp/build_e75b87f248f44978f9537d83b3172254/node_modules/binary-parser/dist'
The binary-parser.js has a line require("console"); which is used in exactly one place, so local builds succeed and the application works perfectly, if only I remove console from that line altogether. But as, heroku installs node modules when deploying, this only helps when I manually build the prod version.
I have installed typings for binary-parser and for TS, and also included "types": ["node"] in both tsconfig.json and tsconfig.app.json compilerOptions.
As angular these days doesn't really allow for webpack configuration, I've tried adding global.console = global.console || require('console-browserify');
(or)
global.console = global.console || require('console');
to my polyfills, to no avail.
Any ideas on how to solve this? Do I need to configure a custom webpack to circumvent this? I'll gladly post additional information if necessary!
Here's a possible cause, may or may not be what you or others reading this question are experiencing...
My IDE's auto importing added import * as console from "console"; when I typed console.log.
Solution was of course to remove that import statement.
After trying for multiple hours to come up with the right configuration, the only solution I could come up with was forking the repo in question and changing tsconfig target from es5 to es6, which got rid of the console import altogether upon compilation.

How to Import nodes modules in react native

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.

Electron-forge + Babel + React + JSX: "unknown option base.Children" in production app

This seems related to BABEL: Unknown option: base.Children, but the fixes provided there don't help my situation. Two days ago I had an Electron application that ran in development mode (via 'electron-forge start') and as a packaged application (starting the executable in the folder produced by 'electron-forge package'). The app continues to run in development, and it will execute in production, but Babel produces an error in the Web console:
Unknown option: base.Children. Check out http://...
This occurs on the first require statement calling for one of my JSX files (there's another thing: react-forge doesn't transpile the JSX, and I suspect I'm about to be told to RTFM over that matter). I can get the same error to pop up whenever I want; all I have to do is enter "require('somefile.jsx')" in the console, and it'll do the same thing. Investigation of the error reveals that the options manager's mergeOptions function is passed a copy of React at one point during the loop that's supposed to incorporate the presets and plugins. Again, this did not start happening after a change to the application code; I tried to update some packages in NPM, and the next build I did produced this error.
I've wiped the node_modules directory completely and run a fresh 'npm install' followed by 'electron-rebuild' and a repackaging of the app produces the same results. I've tried incorporating the .babelrc contents in package.json according to the docs at the Babel website. Again, dev works fine and production fails. Creating a compliant .compilerc produced similarly disparate results. How is my production app getting a React component where it should have the Babel options?
I just found the solution. It's a combination problem. React itself and the React preset for Babel both answer to 'react' as a preset name. If the plugin is missing but React is present, Babel will pull React and pass it to mergeOptions, producing the error described.
On the other side, if you've made the mistake of requiring a module (like the React preset) in your package.json under both dev dependencies and general dependencies, the packaging subprocess run by electron-forge will ignore the entry under general dependencies. Result: no preset, and instead of spitting out a "missing a preset" error, Babel just sucks up React itself and pretends it's found the preset it was told to look for.

How to include and use non TS Node modules in my Angular 2 project

I just want to use it, I don't care about autocomplete and all the sugar..
In package.json
"module-x": "https://github.com/somerepo/module-x"
I then try to use it in my app.component.ts
import "module-x";
and it cannot be found in the project.
Angular 2 takes JS and TS modules just fine. It will have issues with angular 1 modules however.
My guess is that your module issues are that you never ran "npm install -s" so although the package json still has it, the actual module files were never installed/downloaded.
Do "npm install -s" in project folder
and then...
import {* or feature name} from "module_x";

Resources