I have just taken a look at ngDoc, and even though documentation is sparse, I understand it needs a very specific namespacing syntax in the #name tag, for instance
moduleName.directive:directiveName
in the case of a directive (gleaned this from here).
However, the officially endorsed Angular styleguide says we should namespace our modules with dots (e.g. app.users).
Now, am I just not getting it, or are those two things mutually exclusive?!?
Is there a way to escape the moduleName for ngDoc? I really don't feel particularly like renaming all my modules (plus, I happen to think the styleguide makes sense)...
Never mind. For anyone coming across this and experiencing the same behavior:
If you happen to be using the grunt-ngdocs plugin, try uninstalling and reinstalling it:
npm remove grunt-ngdocs
npm install grunt-ngdocs
Related
I've just updated some depencencies in a React project using npm install and the updated project works nicely on all browser except Safari.
On Safari it shows a blanks screen and an error in the console:
SyntaxError: Invalid regular expression: invalid group specifier name
file: 2.f80ba52b.chunk.js
I can exclude breaking changes from updated dependencies, otherwise it would have broken on other browsers too. Despite that, I cannot figure out what is causing it.
Even if similar questions exist, and the root cause has been already recognized as the missing Safari support for lookbehind regex, I would like to provide a general way to handle those situations where, as described in the main question, you can not just fix a line of code - for example when the issue is caused by an external library.
How to handle broken external depencencies
In my case, the bug had been introduced with draft-js-utils 1.4.1, so I solved it downgrading to the first know working version (1.4.0). In order to achieve this, I edited the package.json file changing the dependency line from
"draft-js-utils": "^1.4.0"
to
"draft-js-utils": "1.4.0"
TIP: Avoiding the caret range, you can stick it to a specific version.
How to find broken external depencencies
The only way to find out what dependencies have been affected by this bug is to look for the error message in Github/Gitlab search - currently almost 300 public repositories have a related issue opened.
The hardest thing about this bug is that it could be hidden inside transitive dependencies.
You might not even know you are using that package.
If you are not lucky enough to spot it using a Github/Gitlab search, you could try with a local search using your IDE or grep. You need to look for the lookbehind symbols ?<!:
grep -r "?<\!" node_modules
Being a last resort, this approach could be either very slow or produce a huge-and-hard-to-read output.
A sad note
It looks like Webkit developers are not going to add lookbehind regex support soon - the issue has been created in July 2017 without receiving attention from them. Moreover, even if the Safari's issue has been recognized and tracked, no polyfill exists to fix it at the build level (e.g. using Babel).
I just want to add that I spent a week downgrading Babel and other packages to pre-2018 packages, only to realise that my problem was in a helper function within my own code that was to filter for malicious html code.
#lifeisfoo mentions to grep for the string '?<!' above in node_modules, but i recommend also grepping the entire project.
fyi, my regex that was breaking Safari was '?<=!'. Which is also an unsupported lookbehind
I tested my regex: (?<=![)(.*?)(?=]) in Safaris regex tester https://www.regextester.com/ and the output says 'Lookbehind is not supported in Javascript'
To end, I found Safaris console error message worthless and spread around the 10,000s of lines of the bundle.js, giving the impression that the issue was within the packages/dependancies, which it clearly was not.
I spent ages downgrading the packages only to find the same error message appear on a different line of the bundle.js code.
I have a sort of a "monorepo", one big project consisting of a few smaller projects that use React.
I'm trying to break these up into three separate repositories, lets call them Core, Application1, and Application2
The Core is a dependency of both applications, and the Core depends on React, because it defines some React component classes. The applications both also use React.
When I tried to build this all together (using Parcel bundler), I am getting a final bundle which at runtime gives the Invalid Hook Call warning in one (but not both) of the applications.
On that page (or in the error message), it says that the error could be caused by one o these:
You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app.
I have checked that #1 is not true, and I'm not even using hooks in any way that I am aware of, so the problem is seems to be multiple versions of React.
I gathered from reading about this that it was a mistake for my Core library to declare React as a dependency, and that it should instead declare it in peerDependencies. That made the Application stop giving the error, but it also made my Core library start having a bunch of Typescript errors and failing to be able to run the unit tests (which rely on React, using Jest/Enzyme to render and validate DOM).
Since specifying React in peerDependencies caused it not to be installed in the node_modules of Core, I decided that I should probably include React in both the peerDependencies and the devDependencies of Core. That fixes the Core library again but breaks the Application.
I'm not really sure of the following:
Why one of my applications fail due to duplicate React copies and the other doesn't, since they seem pretty symmetrical to each other.
Why, even though I only specify React in peerDependencies and devDepenencies in Core I still would get a duplicate copy of React in the dependent application
Whether the method used to bring Core in to the application has any bearing on this. (one method I'm trying is package.json I specify core as a "file:../" style of URL. Another alternative is to use "yarn link", or possibly to do both of these, and I'm not sure whether this has any effect on what ends up in node_modules underneath the application folder or on what gets bundled)
What is the right way to include React in both an Application and a library, in such a way that both of those projects have React available but there does not end up being duplicates in the Application causing this hook error (or, just taking up extra space).
Answering my own question.
I found the following issue helpful: https://github.com/facebook/react/issues/14257
Various different suggestions were made in the comments of ways to solve this problem, either by npm link or yarn linking the react library from the library to the application, or vice versa. Those all seemed promising, since the idea is to make sure that all of the different references to React are actually pointing to the same place. Unfortunately none of those worked for me. (e.g. the answers by JerryGreen and Kas in that issue)
Another user, dcecile, suggested using webpack's alias feature, but I'm not using webpack.
resolve: {
alias: { react: require.resolve("react") }
},
Parcel has a similar alias feature but can't be used in quite the same way because it's used in the package.json file so things like require.resolve can't be called like they are in webpack's js config file.
I ended up finding a way to use Parcel's alias feature to do what I wanted, based on another example from https://github.com/jaredpalmer/tsdx/issues/64 from user jaredpalmer. In my situation, I'm adding this to the application's package.json, and it appears to get rid of the duplication problem and the "Invalid Hook Call" error:
"alias": {
"react": "../my-core-library/node_modules/react",
},
I've got pretty much this error:
AngularJS ngSanitize Error
short version: "lowercase is not a function".
While my application has AngularJS enforced to 1.4.9, we didn't enforce angular-sanitize, so it resolves to 1.7.0 and on that version of AngularJS lowercase function doesn't exist anymore, producing an error.
Probably by forcing angular-sanitize to a fixed version would fix that, but I want to go beyond fixing it and understand what is causing the problem and why, because I find a few inconsistencies.
AngularJS is forced to 1.4.9. bower-components folder holds this version, build folder after compiling also holds this version, developer panel on Chrome show only this version is fetched. This version does have lowercase method.
Angular-sanitize has angular 1.7.0 as a dependency, but it's never downloaded, never. Not in any single folder or subfolder on the entire project, not at compiling, not from Chrome either. So I guess the only angular.js he's got access to is 1.4.9, which does have lowercase method.
I don't quite understand why then "lowercase is not a function" error appears if the only available angular.js still has that method. Also I don't understand why angular-sanitize 1.7.0 demanding angular 1.7.0 uses non-existing methods on AngularJS 1.7.0 (Angular developers mistake? but I find hard to believe it.)
Probably sanitize is downloading and accessing angular 1.7.0 somehow, but I would like to know how. Just out of curiosity. And also to confirm if this is an angular developers mistake or if there's something I've missed.
It is explained in the official Angular 1.6 to 1.7 Migration Guide:
Due to 1daa4f, the helper functions angular.lowercase and angular.uppercase have been removed.
These functions have been deprecated since 1.5.0. They are internally used, but should not be exposed as they contain special locale handling (for Turkish) to maintain internal consistency regardless of user-set locale.
Developers should generally use the built-ins toLowerCase and toUpperCase or toLocaleLowerCase and toLocaleUpperCase for special cases.
Further, we generally discourage using the angular.x helpers in application code.
I have been using VSCode for quite a long time and while it's very good, I'm missing intellisense and features that seem to be ES6-only:
I cannot ctrl+click to go to definition
I cannot have a preview of the definition
Here is what I am using:
ES5
Angular JS
All my files are wrapped into a closure, like:
(function() {
angular.module('foo').factory('bar', ['dep1', function(dep1) {
dep1.stuff();
}]);
})();
With that in mind, is it possible to have "goto definition" and other nice VSCode stuff working ? If so, how ?
What can I do to be able to simply click ctrl+click on dep1 and have VSCode open the file where dep1 is defined ?
What I can recommend is that you try to install John Papa's extension for Visual Studio Code for Angular 1.x. It is installed directly through VSCode. You can check some examples of how it works here. It will offer you code completion and it will automate a lot of tasks you frequently do in Angular, such as creating services, controllers, directives...
Btw John Papa is the author of the Angular Style guide and his way of coding could be called "best-practice" in the world of Angular development.
The best way to get intellisense for javascript/typescript is to install typings.
I find that this extension is good with installing typings: https://marketplace.visualstudio.com/items?itemName=benjaminromano.typings-installer
Once you have that installed, you can then launch it (F1 > Typings Installer: Typings > angular) and install the dt~angular typings. from there you should start getting intellisense, go to definition and possibly error checking.
Code should then pick this up (if not just reload the editor). You should then start getting intellisense. If you want to tweak it more, I would suggest looking into jsconfig.json files: https://code.visualstudio.com/docs/languages/jsconfig
You can get general purpose typing information pulled by enabling Synthetic Default Imports in Visual Studio Code.
It lets you get Intellisense either from TypeScript type definitions or by inferenced type information from the JSDoc of many popular repositories.
Here is a tutorial for how to get things set up.
I started using Typescript with Webstorm today and I am getting real crazy understanding what's going on. Imagine a project using tsd loading definition types on typings/. For background, angular defines an angular module aliased to ng and then there is other d.ts files appending more modules into angular (and technically ng).
When I require for example the router I get:
In fact, if you go to angular-route.d.ts (from DefinitelyTyped) you can see the same:
The d.ts files are technically correct because tsc compiles them giving it those definition files.
On the other hand, Webstorm allows you to load libraries (typescript stubs from DefinitelyTyped). If I go there and I download the angular ones (which are 100% the same as the one I have on typings/) I get:
Same error but at least I don't get the red wiggle in the solution explorer. Still, it doesn't give me any intellisense when writing ng.route.<ctrl+space>, it just turn blue when I finish writing it (in fact, I can cmd+click and go to the definition).
Who's failing here? The typescript plugin? It is weird that it fails using typings/ and somehow work with Webstorm's libraries menu (using the same file).
Who's failing here? The typescript plugin?
Yes. You need to use the Webstorm beta channel to get support for TypeScript 1.4 union Types at the moment.