I am including pg-promise in my Angular app to make some queries.
My app is targeting browsers and I am willing to deploying it via ng build --prod.
However, when I launch the development server with Angular CLI using ng serve I get lots of errors and my app does not work since I imported pg-promise with:
import * as pgPromise from 'pg-promise';
Errors are like Module not found: Error: Can't resolve 'XXX' in 'path.
I tried to solve with the solutions provided in this answer:
Open src/tsconfig.app.json*.
Add "node" to the "types" array.
, and installing node types via npm i #types/node, but nevertheless I am still hitting the same errors.
Finally, lookig at the types declared in the pg-promise.d.ts file, I can clearly see there's an error which makes me think is the cause of the problems I am having. VScode is telling me that it Cannot find namespace 'NodeJS'.ts(2503).
Any suggestion on how I should include pg-promise in my app without all these errors?
Related
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.
I am working on an application via the toolchain tool on IBM Cloud and editing the code via the Eclipse Orion IDE. As I am not accessing this through my local cli, my understanding is that in order to so call npm install {package}, I would just need to include the package in the package.json file under dependencies and require it in my app. However, when I load the application, I get the require is not defined indicating that the package has not been installed. Moreover, the require() is being used in the app.js file with the application being launched but not from files in my public directory.
After playing around further, it seems it might have to do with the way the directory tree is being traced as the error is only thrown in subdirectories. For example, require('express') works in app.js which is in the main directory ./ but fails when it is called in test.js in ./subdirectory/test.js. I feel like I'm missing something painfully simple like configuration of endpoint or something.
I've been searching around but I can't seem to find how to get the packages loaded, preferably without using the cli. Appreciate any pointers. Thanks!
Update: After playing around further, I am also getting module is not defined error when trying to require from another file in the same directory. For example module.exports = 'str' returns this error. While trying to require('./file') returns the require is not defined. It might have to do with how node is wrapping the functions?
Update 2: Tried "start": "npm install && node app.js" in package.json but no luck. Adding a build stage which calls npm install before deployment also does not work
Update 3: After adding npm install build stage, I am able to see that the dependencies have been successfully built via the logs. However, the require is not defined error still persists.
Update 4: Trying npm install from my CLI doesn't work as well even though all packages and dependencies are present
Update 5: Running cf restage or configuring cache via cacheDirectories does not work as well
Opened a related question regarding deployment here
Found out my confusion was caused due to me not realizing that require() cannot be used on the client side unless via tools such as Browserify.
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 have installed version 15.2.1 of react, react-addons-shallow-compare, and react-dom. When I try to use react-virtualized, I get an error on the Chrome console saying
external "React.addons.shallowCompare":1Uncaught ReferenceError: React is not defined
Without using react-virtualized, React is working fine. Not sure why I am getting this error.
Never mind. Figured it out. I was using the UMD build of react-virtualized but with a non-UMD build of React and React.addons.shallowCompare. If you're using a bundler like Webpack, there likely isn't a global React variable.
In this case, you should use the CommonJS or ES6 builds of react-virtualized.
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