Yarn Workspaces - How can I use ES6 Modules in Node and share code with Apollo Server? - es6-modules

My yarn workspace is comprised of the following:
common (Plain ol' Node 14.6)
server (Apollo Server with Nodemon/Babel)
web (Create React App)
I can share code perfectly between the different workspaces.
The problem is if I try to use ES6 modules in the common workspace. I add "type": "module" to my package.json and switch everything to ES6 modules. It works as expected in the common workspace, I can access code in common from the web workspace, but I get the following error when starting the Apollo server:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:
require() of ES modules is not supported...
require() of ... is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/i834619/Desktop/ReactProjects/yws_react_apollo/common/package.json.
...
code: 'ERR_REQUIRE_ESM'

Related

How to add package.json file to built react app?

If use npm build command to build a react app for production environment, we can get a build named folder. There are html, css and JavaScript in it, but the package.json file doesn’t exists.
If we use this file to set http proxy endpoint to connect API, we can’t run the app well because the endpoint can’t be found.
How to deal with this json file rightly in this case?
First if you have package.json of some Node-React application you can run in example windows CMD (terminal console) and make some folder there you put this package.json and navigate to this folder and then, there typing npm install. On this away you can prepare all what is need for this Node-React app. Exactly with this command starting make node_modules folder there stat install need package. Next step is make folders: src and public, there you put next file :
on Src folder App.js, index.js, App.css
on public folder index.html.
That is because in this package.json exists all what is need for starting application, but if you menually build package.json this can make with run npm.
init in CMD.
Use Proxy in package.json file you can use for example if you send some data in case client-server app. There you have in client for HTTP request axios, on server side express. In package.json file add row "proxy":"http://localhost:3001"
from server. For that plz. look How to set port for express server dynamically?

Google Cloud Functions: How do you share source code?

I have a Node server and multiple controllers that perform DB operations and helpers (For e-mail, for example) within that directory.
I'd like to use source from that directory within my functions. Assuming the following directory structure:
src/
server/
/app/controllers/email_helper.js
fns/
send-confirm/
What's the best way to use email_helper within the send-confirm function?
I've tried:
Symbolically linking the 'server' directory
Adding a local repo to send-confirm/package.json
Neither of the above work.
In principle, your Cloud Functions can use any other Node.js module, the same way any standard Node.js server would. However, since Cloud Functions needs to build your module in the cloud, it needs to be able to locate those dependency modules from the cloud. This is where the issue lies.
Cloud Functions can load modules from any one of these places:
Any public npm repository.
Any web-visible URL.
Anywhere in the functions/ directory that firebase init generates for you, and which gets uploaded on firebase deploy.
In your case, from the perspective of functions/package.json, the ../server/ directory doesn't fall under any of those categories, and so Cloud Functions can't use your module. Unfortunately, firebase deploy doesn't follow symlinks, which is why that solution doesn't work.
I see two possible immediate fixes:
Move your server/ directory to be under functions/. I realize this isn't the prettiest directory layout, but it's the easiest fix while hacking. In functions/package.json you can then have a local dependency on ./server.
Expose your code behind a URL somewhere. For example, you could package up a .tar and put that on Google Drive, or on Firebase Cloud Storage. Alternatively, you can use a public git repository.
In the future, I'd love it if firebase deploy followed symlinks. I've filed a feature request for that in Firebase's internal bug tracker.

Autodesk Viewer Markup extension - can't compile from sources

I'm trying to achieve similar viewer annotations like official demo:
lvm-react
I read official blog post and use files from Autodesk Extensions github:
http://adndevblog.typepad.com/cloud_and_mobile/2016/04/markup3d-sample-for-view-data-api.html
But I can't compile extensions from sources (create bundle.js). Tried just npm install, but there are many errors like:
ERROR in ./src/Viewing.Extension.VisualReport/PieChart/PieChart.js
Module not found: Error: Cannot resolve module 'EventsEmitter' in MY_FILES
and
ERROR in ./src/Viewing.Extension.StateManager/Viewing.Extension.StateManager.scss
Module parse failed: /MY_PATH/library-javascript-viewer-extensions-master/src/Viewing.Extension.StateManager/Viewing.Extension.StateManager.scss Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
I also installed webpack using npm, but without result, there are still many errors.
There was a few loaders missing from the webpack build production config. It is fixed now and you should be able to build all extensions. Please use the latest version from the repo.
When testing your extensions, I recommend you use npm run build-dev command, so the generated extensions files will not be minified and have source-map enabled, so you can easily debug them in browser console. When building for production, you can use npm run build-prod.
You can also remove the various entries from the webpack config to build only the extensions you are interested in, for example:
module.exports = {
devtool: 'eval-source-map',
entry: {
'Viewing.Extension.Markup3D':
'./src/Viewing.Extension.Markup3D/Viewing.Extension.Markup3D.js',
},
// ... rest of the config ...
You may also want to change the output path, in my config the output is outside of the extensions directory, directly in the project using them:
output: {
path: path.join(__dirname, '../../App/dynamic/extensions'),
filename: "[name]/[name].js",
libraryTarget: "umd",
library: "[name]",
watch: true
},
In addition to including the extension file to your project, you should also make sure that you include the babel polyfill (from node_modules/babel-polyfill/dist/polyfill.min.js) before any extension script.
Hope that helps, let me know if you have any further trouble using those extensions.

Firebase deploy error on public key / directory

I am building an IOS app using Firebase. I have an error when I try to deploy
"Error: Specified public directory does not exist, can't deploy hosting"
I have been following the hosting guide here Guide Link But being new learner, I am not understanding what should I put in firebase.json
So my code in firebase.json
{
"firebase": "xxxxxx", //(my app name)
"public": "/usr/local", //(I am not sure what should i put in here)
"ignore": [
"firebase.json",
"**.*",
"**/node_modules/**"
]
}
I am not sure what should I put in "public" property. I think that is the reason why I get the error. I don't understand what public directory mean in here.
Easily deploy and host your app's static assets (HTML, CSS,
JavaScript, etc) with our production-grade hosting service. All of
your content is served over HTTPS and backed by a global CDN.
It cleary states only static thing is expected to be hosted.
In "public" you are supposed to put dist (distribution) folder distination, In web apps Its a folder that contains all assets to keep app up and running on firebase hosting service.
Above answer is to clear Concept, Provide more details of your app and structure for further help.
what are you building your app with?
I imagine the cause of the error is that you need to generate a 'dist' folder for your app and you haven't done that yet before running 'firebase deploy'.
Check the firebase.json file in your project directory, it will show you that Firebase is looking for a dist folder to read from.
IF it can't find it, you will get the error that you have.
For instance, if it is an Angular2 application and you use the Angular-cli, just do the following:
Run the command 'ng build' in your project's root directory.
This command will generate a 'dist' folder from the 'src' folder where you wrote your application code.
Then run '
firebase deploy'.

How to configure package.json to add a "self compiled binary" as a dependency?

I am very new to the concept of npm-install. Please throw some insights into where I might be going wrong. I have a .js file through which I am supposed to invoke a binary with some command line arguments.I did write package.json setting the main parameter to the javascript file and I am using preinstall script that compiles the code and creates a binary that is supposed to be used by my java script file.
Couple of questions:
How do I make package.json take this compiled binary as dependency for the js file?
npm install runs fine for me but I do not see any output folder whatsoever. I was hoping it would generate a .node_module in pwd and copy the contents onto bin/ folder in that. May be, I am missing something.
npm info prepublish test#0v.0.1
npm verb from cache <pwd>/package.json
npm verb readInstalled returning test#0.0.1
npm verb exit [ 0, true ]
npm info ok
Can someone please through some insights into this issue?
You don't have to include your binary file in package.json. If you're using Express, put it in the node-modules folder within the parent directory. Otherwise, you can either specify the whole path to the file where you call it or put the file in the parent directory. For global installations, the node-modules folder is usually created at: C:\Users\[Username]\AppData\Roaming\npm\node_modules.
I figured out a way to handle it. Using a js module and using my node as required in that module causes npm to setup my node in node_modules/ folder. I used a pre-install shell script to compile my binary and used the relative path to use the binary upon execution.
Thanks for all who replied.