The required JS dependency "readable-stream/writable.js" is not available, it was required by "node_modules/stream-browserify/index.js" - clojurescript

I am getting this error when trying to build a Clojurescript project with shadow-cljs. I've tried looking for syntax errors as described here but I can get the same the error with a single line and a single import although not all imports cause the same error.
This compiles:
(ns campfire.core)
(defn init [] (println "ok"))
This doesn't:
(ns campfire.core
(:require ["bugout" :as b]))
(defn init [] (println "ok"))
The output from the above example is:
shadow-cljs - config: /home/ru/Projects/campfire/shadow-cljs.edn
shadow-cljs - HTTP server available at http://localhost:3000
shadow-cljs - server version: 2.11.18 running at http://localhost:9630
shadow-cljs - nREPL server started on port 8777
shadow-cljs - watching build :frontend
[:frontend] Configuring build.
[:frontend] Compiling ...
[:frontend] Build failure:
The required JS dependency "readable-stream/writable.js" is not available, it was required by "node_modules/stream-browserify/index.js".
Dependency Trace:
campfire/core.cljs
node_modules/bugout/index.js
node_modules/bs58check/index.js
node_modules/create-hash/browser.js
node_modules/cipher-base/index.js
node_modules/stream-browserify/index.js
Searched for npm packages in:
/home/ru/Projects/campfire/node_modules
See: https://shadow-cljs.github.io/docs/UsersGuide.html#npm-install
package.json
{
"name": "campfire",
"version": "0.0.1",
"private": true,
"scripts": {
"build": "shadow-cljs release frontend"
},
"devDependencies": {
"shadow-cljs": "2.11.18"
},
"dependencies": {
"bugout": "^0.0.10",
"webtorrent": "^0.114.1"
}
}
shadow-cljs.edn
{:source-paths
["src/dev"
"src/main"
"src/test"]
:dependencies
[]
:dev-http {3000 "public"}
:nrepl {:port 8777}
:builds
{:frontend
{:target :browser
:modules {:main {:init-fn campfire.core/init}}}}}
I've seen similar build errors that were fixed by clearing .shadow-cljs etc and rebuilding but nothing like that seems to be helping. I'm new to shadow so apologies if this is something obvious. Does anyone have any idea what's going on here?
Update
So it looks like what's happening is that stream-browserify 2.0.2 requires readable stream ^2.0.2 which npm installs in the nested node_modules folder. Elsewhere readable-stream 3.6.0 is being installed in top level node_modules. Shadow is trying to resolve writer.js against the 3.6.0 version of readable stream instead of the 2.0.2 version.
Confusingly though, stream-browserify isn't a dependency of cipher-base as given in the dependency trace but of node-libs-browser which is itself a dependency of shadow-cljs.
Is it possible that this is a bug in shadow or is it expected behaviour?
Update 2
I've created an example repo that replicates what I'm seeing as simply as I can here.

Did you actually install the shadow-cljs dependency in the project? Does the directory node_modules/shadow-cljs exist?
I see it listed in devDependencies so it should be installed but it might not be if you never actually called npm install in the project or npm is set to production mode which won't install devDependencies. All of this is part of the node-libs-browser package which seems to be missing as well and should have been installed due to being a dependency of shadow-cljs.

Based on the link in your first error message, it says to npm install whatever's missing.
If you didn't run npm install, that by itself will install what's in your package.json.
If that's not the issue, then npm i readable-stream may help.

Related

gulp-sharp-responsive with require

when i try to use require("gulp-sharp-responsive") in gulpfile.js i get an Error:
Something went wrong installing the "sharp" module. The specified procedure cannot be found. myproject\node_modules\gulp-sharp-responsive\node_modules\sharp\build\Release\sharp.node
But if i use import sharpResponsive from "gulp-sharp-responsive" and "type": "module" in package.json it's work. What can I do to use require in gulpfile.js?
My gulpfile.js without gulp-sharp-responsive work fine.
gulp: 4.0.2, gulp-cli: 2.3.0, gulp-sharp-responsive: 0.4.0, npm: 8.11.0, node: 16.16.0
Removing "node_modules/sharp" and "npm install --ignore-scripts=false --verbose sharp", did not help.

How to pass the JSON validation of write-manifest.json when adding "debugLocale"?

I'm trying to build my first localised SPFX WebPart for Sharepoint Online. I've added an additional language de-de.js in the loc folder and now I'm trying to change the write-manifest.json to use my new language on debug by adding the `"debugLocale" property to it:
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->",
"debugLocale": "de-de"
}
Checking the official instructions of Microsoft and inspecting the JSON sheme of the write-manifest.json shows this should compile, but when I gulp serve it returns:
Build target: DEBUG
./node_modules/#microsoft/node-core-library/lib/JsonSchema.js:178
throw new Error(prefix + os.EOL +
^
Error: JSON validation failed:
./config/write-manifests.json
Error: #/ (Defines configuration options for the...)
Additional properties not allowed: debugLocale
at validateObjectWithCallback (./node_modules/#microsoft/node-core-library/lib/JsonSchema.js:178:19)
at JsonSchema.validateObjectWithCallback (./node_modules/#microsoft/node-core-library/lib/JsonSchema.js:193:13)
at JsonSchema.validateObject (./node_modules/#microsoft/node-core-library/lib/JsonSchema.js:175:14)
at WriteManifestsTask._readConfigFile (./node_modules/#microsoft/gulp-core-build/lib/tasks/GulpTask.js:311:28)
at WriteManifestsTask.onRegister (./node_modules/#microsoft/gulp-core-build/lib/tasks/GulpTask.js:87:32)
at Object.initialize (./node_modules/#microsoft/gulp-core-build/lib/index.js:299:24)
at SPWebBuildRig.initialize (./node_modules/#microsoft/sp-build-common/lib/BuildRig.js:61:19)
at SPWebBuildRig.initialize (./node_modules/#microsoft/sp-build-common/lib/SPBuildRig.js:29:15)
at SPWebBuildRig.initialize (./node_modules/#microsoft/sp-build-web/lib/SPWebBuildRig.js:15:15)
at Object.exports.initialize (./node_modules/#microsoft/sp-build-web/lib/index.js:23:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello-world#0.0.1 start: `gulp serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello-world#0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! ~/.npm/_logs/2019-01-09T16_43_53_070Z-debug.log
How can I solve this issue?
Between 1.5 and 1.6, the build tasks appeared to have changed. I have confirmed the issue with 1.6+.
If you modify your write-manfiest.json "debugLocale" to "buildSingleLocale", everything will work as expected. I think the docs and the schema may be out of date.
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->",
"buildSingleLocale": "de-de"
}
I just tried that and it works in my setup.
Created webpart using yo #microsoft/sharepoint with default options (using React as Javascript framework)
Added de-de.js file to loc folder and changed values so I can see that is really grabs the correct file
Added "debugLocale": "de-de" to write-manifests.json
Run gulp serve
Texts used are from de-de.js
My versions:
yo - 2.0.3
#microsoft/sharepoint generator - 1.4.1 (I know it is old one)
npm - 5.6.0 (Yes, also old one)
But, once I update the #microsoft/sharepoint generator to latest version 1.7.1 it stopped working. It seems that the issue occurs since version 1.6.0
Workaround is to run it with --locale parameter like gulp serve --locale=de-de or to use older version:
npm uninstall #microsoft/generator-sharepoint -g
npm install #microsoft/generator-sharepoint#1.5.1 -g

Gulp resolve failed

When I run my command:
gulp build
I get the error:
[13:28:52] Requiring external module babel-register
node_modules/nan
resolve failed for "caniuse-db": Error: Cannot find module 'caniuse-db'
resolve failed for "babel-runtime": Error: Cannot find module 'babel-runtime'
This seems to happen after I changed my preset in my .babelrc from es2015 to es2015-loose.
The stacktraces on this GitHub issue seem very similar to yours... They resolved the issue by switching from the es2015-loose preset to the es2015 preset with the loose option:
["es2015", { "loose": true }]

Importing angular-translate imports an empty object

I'm using JSPM 0.16.42 which uses SystemJS, I've tried both angular-translate and angular-route, both of which are on github endpoints.
However, for both of them angular throws the same error
argument module is not a function
when using them in ES6 syntax as follows:
import AngularRoute from 'angular-route';
angular.module('app', [AngularRoute]);
I'm using babel as a transpiler. The object I get back from the import seems to be empty. Following is the relevant part of my config.js file:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"angular-route": "github:angular/bower-angular-route#1.5.8",
"angular-translate": "github:angular-translate/bower-angular-translate#2.11.1",
}...
EDIT: When I tried to install angular-translate with an npm endpoint I got the error http://errors.angularjs.org/1.5.8/$injector/unpr?p0=e
on the following line in angular.js
return new ErrorConstructor(message);
which I guess is a bit of progress but still doesn't solve my issue obviously
EDIT#2: I got angular-route to work with the help of #artem by using the npm endpoint, for some reason the github endpoint did not work so I used jspm install npm:angular-route. Further investigation is needed as to why the github package did not work and the npm package did
EDIT#3: I have overriden the package configuration as you can see below, though that didn't help
"npm:angular-translate#2.11.1": {
"format": "global",
"dependencies": {
"angular": ">=1.2.26"
},
"shim": {
"angular-translate": {
"deps": "angular"
}
}
}
I eventually fixed it by installing angular-translate as well as angular-route via their npm endpoints instead of the default (github) endpoints, using
jspm install npm:angular-route
&
jspm install npm:angular-translate -o '{dependencies: { angular: ">=1.2.26" } }'
The override for angular-translate was needed since jspm did not understand the original dependency syntax correctly which was angular: ">= 1.2.26 <=1.6" as described in this github issue
Here is not-so-minimal, not-really-self-contained example for angular-translate with systemjs:
npm install jspm
./node_modules/.bin/jspm install github:angular-translate/angular-translate
keep pressing <ENTER>, accepting all the default values
create file test.js
import AngularTranslate from 'angular-translate/angular-translate';
console.log(AngularTranslate);
create file index.html
<!doctype html>
<html>
<head>
<script src="jspm_packages/system.src.js"></script>
<script src="config.js"></script>
<script>
System.import('./test.js');
</script>
</head>
<body>
</body>
</html>
open it in the browser:
Failed to load resource: the server responded with a status of 404 (File not found)
undefined:1 Uncaught (in promise) Error: (SystemJS) XHR error (404 File not found) loading
http://localhost:8035/jspm_packages/github/angular-translate/angular-translate#2.11.1.js(…)
Why that file isn't there? It's supposed to be created by jspm, if you had installed angular-translate from npm it would have contained
module.exports = require("npm:angular-translate#2.11.1/dist/angular-translate.js");
which is just a redirect from symbolic package name (the name of that .js file) to that package main file, as specified in package.json:
"main": "dist/angular-translate.js",
But angular-translate is from github, there is no dist there. That's why jspm did not create the redirect file - there is nothing to redirect to.
No problem, just build it from the source we got from github:
cd jspm_packages/github/angular-translate/angular-translate#2.11.1/
npm install
npm run-script build
cd ../../../..
and fix mapping in config.js:
map: {
"angular-translate/angular-translate": "github:angular-translate/angular-translate#2.11.1/dist/angular-translate",
open index.html in the browser again:
system.src.js:122 Uncaught (in promise) Error: (SystemJS) angular is not defined(…)
No problem, angular is already installed as angular-translate dependency, just tell systemjs when and how to load it.
add to config.js:
meta: {
"angular-translate/angular-translate": {
"deps": ["angular"]
}
},
map: {
"angular": "github:angular-translate/angular-translate#2.11.1/node_modules/angular/angular",
NOTE: You don't need to specify format for angular-translate. SystemJS auto-detects it correctly - it could be loaded as either 'amd' or 'cjs', but it will not work as 'global'. Also, you probably did not start by installing angular-translate, so you already have angular.js file and mapping in place somewhere.
Open index.html in the browser again. It prints in the console:
pascalprecht.translate
Yes angular-translate exports a string - seems to be typical for angular1 modules.
I have no experience with angular.js, so I declare it a success and stop here.
PS Why angular-route worked when you install it from npm, and did not work from github?
When installed from npm, jspm created a file named jspm_packages/npm/angular-route#1.5.8.js, containing
module.exports = require("npm:angular-route#1.5.8/index.js");
because package.json for angular-route has
"main": "index.js",
which is correct and works for you.
When installed from github, jspm created similar file jspm_packages/github/angular/bower-angular-route#1.5.8.js, but this time it points to a different file
module.exports = require("github:angular/bower-angular-route#1.5.8/angular-route");
because someone put an override in jspm registry there at https://github.com/jspm/registry/blob/master/package-overrides/github/angular/bower-angular-route%401.3.0.json
because bower.json for bower-angular-route has
"main": "./angular-route.js",
Maybe it's an oversight, maybe it's correct and works for them - I don't know.
TL;DR It's not a good idea to use package manager for installing software, if the software was not packaged properly for that package manager.

angular-route error Arguments to path.json must be strings

I am having a hard time figuring out what this error means.
I have the following bower.json:
...
"dependencies":{
"angular-route":"~1.2.18",
"angular":"~1.2.18"
}
Upon installing my bower packages through bower install I get the following error:
bower angular-route#~1.2.20 error Arguments to path.join must be strings
Stack trace:
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 GitHubResolver._checkout (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/lib/core/resolvers/GitHubResolver.js:54:21)
at /home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/lib/core/resolvers/GitResolver.js:69:21
at _fulfilled (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/p-throttler/node_modules/q/q.js:798:54)
at self.promiseDispatch.done (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/p-throttler/node_modules/q/q.js:827:30)
at Promise.promise.promiseDispatch (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/p-throttler/node_modules/q/q.js:760:13)
at /home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/p-throttler/node_modules/q/q.js:574:44
at flush (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/p-throttler/node_modules/q/q.js:108:17)
Console trace:
Trace
at StandardRenderer.error (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/lib/renderers/StandardRenderer.js:72:17)
at Logger.<anonymous> (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/bin/bower:111:22)
at Logger.EventEmitter.emit (events.js:95:17)
at Logger.emit (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/bower-logger/lib/Logger.js:29:39)
at /home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/lib/commands/index.js:40:20
at _rejected (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/q/q.js:797:24)
at /home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/q/q.js:823:30
at Promise.when (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/q/q.js:1035:31)
at Promise.promise.promiseDispatch (/home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/q/q.js:741:41)
at /home/ubuntu/.nvm/v0.10.26/lib/node_modules/bower/node_modules/q/q.js:557:44
System info:
Bower version: 1.3.7
Node version: 0.10.26
OS: Linux 3.13.0-29-generic x64
Now, I have to mention that I have done the same thing for about a week, and everything was working correctly, with exactly the same setup.
I have noticed that https://github.com/angular/angular.js has released a new version 1.2.20 recently, but even installing that I get the same error.
Some context: I am using nodejs, express and angular in my application. I can provide more info if needed (e.g., package.json, main server file).
Any help would be highly appreciated.
See the answer here: Bower - error when installing package "Arguments to path.join must be strings"
Fix: bower cache clean and update to Bower 1.3.8.