Why is my nx plugin generator trying to use angular devkit schematics? - nrwl-nx

I am the developer of the nx plugin #gb-nx/cli
I am making use of wrapAngularDevkitSchematic from #nrwl/devkit/ngcli-adapter in other plugins so I'm familiar with that I think.
I dug into the stack trace (below) and see that #angular-devkit/schematics/tools... is looking for a schematics key in my plugin's package.json.
Why is angular devkit being involved here? Is it because I have it in my node_modules for other plugins?
Error: Package "#gb-nx/cli" was found but does not support schematics.
at NodeModulesEngineHost.resolve (D:\ha\node_modules\#angular-devkit\schematics\tools\node-module-engine-host.js:54:23)
at NodeModulesEngineHost._resolveCollectionPath (D:\ha\node_modules\#angular-devkit\schematics\tools\node-module-engine-host.js:81:37)
at NodeModulesEngineHost.createCollectionDescription (D:\ha\node_modules\#angular-devkit\schematics\tools\file-system-engine-host-base.js:118:27)
at SchematicEngine._createCollectionDescription (D:\ha\node_modules\#angular-devkit\schematics\src\engine\engine.js:162:40)
at SchematicEngine.createCollection (D:\ha\node_modules\#angular-devkit\schematics\src\engine\engine.js:155:43)
at getCollection (D:\ha\node_modules\nx\src\adapter\ngcli-adapter.js:66:40)
at Object.<anonymous> (D:\ha\node_modules\nx\src\adapter\ngcli-adapter.js:545:28)
at Generator.next (<anonymous>)
at D:\ha\node_modules\tslib\tslib.js:118:75
at new Promise (<anonymous>)

I had removed the cli: nx entry from my schema causing the nx command to think it was a angular/devkit schematic instead of a generator.

Related

Cannot find module '#nrwl/webpack/package.json'

Followed the nx dev tutorial TO THE LETTER :-)
https://nx.dev/react-tutorial
When I get to the "npx nx build admin" or "npx nx serve admin" steps I get an error:
Unable to resolve #nrwl/webpack:webpack
for build
Unable to resolve #nrwl/webpack:dev-server
for serve
I can fix the issue by adding "#nrwl/webpack": "^15.5.2" to devDependencies in package.json (and running npm install)
I assume this is a correct fix? Meanwhile, is the tutorial broken?
Expected tutorial to work without additional steps
Looks like this is a bug in V 15.5.2!
When I repeat the tutorial steps using V 15.4.5 (npx create-nx-workspace#15.4.5) the problem goes away.
Bug reported to nrwl team.
Just in case, this helps solve a problem for other developers...
Images are also broken in V 15.5.2 (and 15.5.3)! Basically images DO NOT DISPLAY...
import siteLogo from "./assets/images/modules/logo.png";
<img
src={siteLogo}
width="137px"
height="47px"
alt="Yamaha | Revs Your Heart"
/>
Reverting to 15.4.5 also fixes this issue!

Polymer build with custom babel plugins?

We'd like to be able to add custom functionality to polymer build and polymer serve by configuring custom babel plugins.
For example, since polymer-cli uses babel internally, we would add a babel.config.js file to our workspace/project-root, e.g.:
module.exports = function (api) {
api.cache(true);
const presets = [ ];
const plugins = [
"#babel/plugin-proposal-optional-chaining"
];
return {
presets,
plugins
};
}
...and then we could serve or build our project with support for optional-chaining, etc This would allow us to do all sorts of things by writing additional babel plugins to handle stuff like minification inside template HTML strings...
Unfortunately, this doesn't currently work. polymer-build seems to load the configuration (due to its use of babel/core?), but polymer-analyze doesn't. An error is generated in the build-optimization step performed by polymer-analyze as soon as it encounters optional-chaining syntax in our source:
error: Error: Unable to get document file:///.../somefile.js: This experimental syntax requires enabling the parser plugin:
'optionalChaining' (423:6)
at BuildAnalyzer.<anonymous> (/usr/local/share/.config/yarn/global/node_modules/polymer-build/lib/analyzer.js:342:23)
at Generator.next (<anonymous>)
at fulfilled (/usr/local/share/.config/yarn/global/node_modules/polymer-build/lib/analyzer.js:17:58)
at process._tickCallback (internal/process/next_tick.js:68:7)
polymer serve also generates an error:
Error { SyntaxError: This experimental syntax requires enabling the parser plugin: 'optionalChaining' (423:6)
at Parser.raise (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:776:15)
at Parser.expectPlugin (/usr/local/share/.config/yarn/global/node_modules/babylon/lib/index.js:2084:18)
...
pos: 13056, loc: Position { line: 423, column: 6 },
missingPlugin: [ 'optionalChaining' ] }
In both cases, I've confirmed that the babel.config.js file is being loaded. But babel is included by several different packages used in polymer-cli, so my suspicion is that in some of them, babel is being used without (babel/core having loaded) configuration info.
Can anyone involved with the polymer project confirm whether I'm correct in identifying the main issue? I'm looking into the possibility of contributing a fix/enhancement if the scope isn't too large.
Thanks.
I think for this you need to write your own custom build. Polymer-cli will provide its tool also for this. Have a look at this example:
https://github.com/PolymerElements/generator-polymer-init-custom-build
For us, this issue was preventing us from using modern JS language features (like optional chaining and the nullish coalescing operator) which have wide support in modern browsers.
The only solution we could come up with was forking the Polymer tools monorepo and adding in support for the appropriate Babel plugins ourselves.
The file in question is /packages/build/src/js-transform.ts. Both serve and build use this file for Babel transforms. We switched to using Rollup for our build process, but we still needed a development server and couldn't get any others to work, so we forked the repo and built our own version of the standalone polyserve package. Would love to some day switch to Modern Web's #web/dev-server.

Angular Dart Tutorial - Unable to find modules for some sources

I'm trying to follow the Angular Dart tutorial (https://webdev.dartlang.org/angular/tutorial/toh-pt1) but got stuck after adding some html that makes use of the ngModel directive.
According to the tutorial in order to make use of the ngModel directive one has to add "angular_forms: ^2.0.0" to the pubspec.yaml, import 'package:angular_forms/angular_forms.dart' and add "formDirectives" to the component directives. I did all of that including running "pub get" to get the dependencies but when I run "webdev serve" I get the following error:
[SEVERE] build_web_compilers|entrypoint on test/app_test.dart (cached):
Unable to find modules for some sources, this is usually the result of either a
bad import, a missing dependency in a package (or possibly a dev_dependency
needs to move to a real dependency), or a build failure (if importing a
generated file).
What am I missing?
I had the same the problem. I don't think it mentions explicityly in the tute but after adding angular_forms dependency to the pubspec.yaml file, you need to pull in this new dependency with:
pub get
Hope it helps!

eslint / babel-eslint issue with escope

Currently getting this error when i try to run eslint locally:
Error: Cannot find module 'escope'
at Function.Module._resolveFilename (module.js:455:15)
at monkeypatch (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/babel-eslint/index.js:53:26)
at Object.exports.parse (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/babel-eslint/index.js:358:5)
at parse (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/linter.js:671:23)
at Linter.verify (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/linter.js:806:27)
at processText (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:278:31)
at processFile (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:320:18)
at executeOnFile (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:655:25)
at fileList.forEach.fileInfo (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:693:13)
at Array.forEach (native)
What's weird is that im using the same linting configuration with another project, and i had no issues at all.
I'm using:
babel-eslint#7.1.1
eslint#4.0.0-beta.0
Any ideas ?
Even though I had same package.json, babel-eslint was set as "7.1.1" in one and "^7.1.1" in the other.
Basically ESLint v4 uses a new fork of escope, which was then updated on version 7.2.3 of babel-eslint.
So, adding the little ^ to my configuration fixed my problem.

error 'Arguments to path.join must be strings' when adding custom Plugin Phonegap 3.0

this is a port of an older twitter plugin that I am just trying to get to work with PG > 3.0, I have this working fine on my IDE, so I wanted to share with others, for some reason when I try and do the install via NPM it errors. I have re-read the file system structure and plugin.xml specification, and cannot see any errors.
I even changed the ID of the plugin from CDVPluginTwitter incase the prefix was throwing an error, however I still get
path.js:360
throw new TypeError('Arguments to path.join must be strings');
^
TypeError: Arguments to path.join must be strings
at path.js:360:15
at Array.filter (native)
at Object.exports.join (path.js:358:36)
at /usr/local/lib/node_modules/phonegap/node_modules/cordova/node_modules/plugman/src/util/plugins.js:72:39
at /usr/local/lib/node_modules/phonegap/node_modules/cordova/node_modules/shelljs/shell.js:1707:7
at ChildProcess.exithandler (child_process.js:635:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:735:16)
at Socket.<anonymous> (child_process.js:948:11)
at Socket.EventEmitter.emit (events.js:95:17)
The Git is located here, https://github.com/ednasgoldfishuk/CDVPluginTwitter/tree/master
Any ideas?
It was missing the finishing </plugin> tag in plugin.xml, Github has been updated and now is confirmed installable on PhoneGap 3.0 +