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.
Related
I have a project in Angular 13. I want to use quillJS and I want to add tables so I tried to install quill-better-table in my project.
For some reason the package is not working. I used the web inspector and found this to be the issue:
ERROR TypeError: quill.keyboard.bindings.Backspace is undefined
The problem seems to be located at: quill_better_table_BetterTable quill-better-table.js:2979 and when I check the debugger I can see the line:
let thisBinding = quill.keyboard.bindings['Backspace'].pop();
quill.keyboard.bindings['Backspace'].splice(0, 1, thisBinding); // add Matchers to match and render quill-better-table for initialization
// or pasting
I found a github repo that had this issue fixed:
https://github.com/LosEcher/quill-better-table
The problem I'm running into is I dont know how to get that particular repo into my project. I have tried updating the current package and webpack continues to load the old one. I've tried clearing the npm cache and reinstalling the node packages.
I found this guide: https://whatapalaver.co.uk/npm-dependency which seems to indicate what I should do but I'm not quite npm literate enough to figure it out. Specifically, I dont know that I understand how to create the NPM link.
I'm looking for advice as to how to fix this package. I am going to be reading up on NPM link but I figured if there was another easier way to get this fixed then I would ask. I can load that repo into my node module folder, but I dont know how to make webpack reload the updated module.
Thanks in advance for the help, let me know what details I for got to add.
I'm working in a project that has multiple typescript projects. I'm trying to have a common package for all the interfaces, types, enums, etc.
I thought I could make it work creating a NPM package with Typescript and have an index.ts with this content:
When I'm working in the projects that depend on this package, everything seems fine, but when I want to start the development environment I'm getting this error:
I've got the suggestion of running ts-node with --skipIgnore flag, but I'm getting the same error:
Maybe I needed to compile the code and import the .js (doesn't make ANY sense, but at this point 🤷🏽♂️)... no luck.
Let me share both tsconfig.json:
The one from the "common" package:
The one from the project that depends on the common package:
Things suggested and tried:
Because your target is ES6, commonjs modules cannot use your package. The dependent project should change its module type to ES6 as well - #kellys
Changing project's module to ES6, brings me this error:
All right, let's add moduleResolution: "node" ... and I'm getting:
So I'm adding "type":"module" in package.json:
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?
I am working on a project created by others in Node.JS.
Noticed a pattern I've never used before.
All the inside imports are used with #.
ex: import Config from '#config/config';
Where config is a file inside /src/config/config.js.
Now, it's working flowlessly but WebStorm keeps complain about Module is not installed and suggest me to Install #config/config as dev dependency.
The real issue behind it is that WebStorm isn't able to autocomplete or help me in any other way regard those imports.
And how do I configure WebStorm to understand this?
Thanks!
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.