Closed fatso83 closed 2 years ago
kennethmyhra
commented
3 years ago There has been an intention to open-source "skjemautfyller", but unfortunately there are some internal dependencies on that component which has made it difficult to share.
fatso83
commented
3 years ago https://www.npmjs.com/package/@helsenorge/skjemautfyller
~Seems like this can be closed 🥳~
EDIT: close, but no cigar. a few dependencies missing on NPM
$ npm i -D @helsenorge/skjemautfyller
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: nimble@0.0.1
npm ERR! Found: @helsenorge/core-utils@21.3.0-prerelease
npm ERR! node_modules/@helsenorge/core-utils
npm ERR! peer @helsenorge/core-utils@"^21.3.0-prerelease" from @helsenorge/skjemautfyller@7.11.0-prerelease2
npm ERR! node_modules/@helsenorge/skjemautfyller
npm ERR! dev @helsenorge/skjemautfyller@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @helsenorge/core-utils@">=21.1.1-prerelease" from @helsenorge/toolkit@21.3.0-prerelease
npm ERR! node_modules/@helsenorge/toolkit
npm ERR! peer @helsenorge/toolkit@"^21.3.0-prerelease" from @helsenorge/skjemautfyller@7.11.0-prerelease2
npm ERR! node_modules/@helsenorge/skjemautfyller
npm ERR! dev @helsenorge/skjemautfyller@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/carlerik/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:Thanks for reporting, we'll look into this
mgunnerud
commented
3 years ago @fatso83 we use peerDependencies in this package, these are not installed automatically as dependencies, but must be installed manually. I though we included the list on npmjs.com, but the list of these packages can also be found in node_modules/@helsenorge/skjemautfyller/package.json (v 7.11.0-prerelease2):
"peerDependencies": {
"@helsenorge/core-utils": "^21.3.0-prerelease",
"@helsenorge/designsystem-react": ">=1.0.0-beta70",
"@helsenorge/toolkit": "^21.3.0-prerelease",
"dompurify": "^2.0.8",
"fhirpath": "^2.7.3",
"marked": "^0.7.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-redux": "^7.1.0",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"tabbable": "^3.1.1"
},Hi, @mgunnerud! Thanks for the swift response. The problem is that the dependencies includes transitive dependencies to versions that are not ~published to NPM~ satisfied by the the ones published to NPM (it seems):
@helsenorge/core-utils@">=21.1.1-prerelease" from @helsenorge/toolkit@21.3.0-prereleaseNPM only knows of the 21.3.0-prerelease
fatso83
commented
3 years ago ~Ah, hmm ... I know see that it says that any version >= 21.1.1 should suffice, but I am not sure why 21.3.0-prerelease does not satisfy the requirement.~
EDIT: from https://medium.com/@mbostock/prereleases-and-npm-e778fc5e2420
By default, prerelease versions are not included in a range. This is because prerelease versions are meant to be unstable and are expected to have breaking changes.
According to https://semver.npmjs.com you can only include pre-release versions (like alpha, beta, ...) by an exact tag. They will never be included in a range specification, like >= 21.1.1, meaning the NPM error is not resolvable as it is.
mgunnerud
commented
3 years ago Hmm, strange that there should be a dependency to @helsenorge/core-utils@">=21.1.1-prerelease"
I see you also get an old lockfile warning; which version of node are you using? At the moment I am using these same packages to build the preview feature in the form builder. I use node v12.16.1, and the following package.json, without getting any errors when running npm install:
{
"name": "skjemautfyller-eksempel",
"version": "1.0.0",
"main": "index.js",
"author": "helsenorge",
"license": "UNLICENSED",
"description": "Skjemautfyller",
"scripts": {
"start": "webpack-dev-server --env.development --mode development",
"build": "webpack --env.production --mode production"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "4.17.1",
"webpack-cli": "3.3.2",
"webpack-dev-server": "3.4.1",
"style-loader": "^0.23.1",
"css-loader": "3.6.0",
"sass-loader": "7.1.0",
"node-sass": "4.13.1",
"file-loader": "^3.0.1"
},
"dependencies": {
"@helsenorge/skjemautfyller": "7.11.0-prerelease2",
"@helsenorge/toolkit": "^21.3.0-prerelease",
"@helsenorge/core-utils": "^21.3.0-prerelease",
"@helsenorge/designsystem-react": ">=1.0.0-beta70",
"dompurify": "^2.0.8",
"fhirpath": "2.7.3",
"marked": "^0.7.0",
"tabbable": "^3.1.1",
"react-redux": "7.1.0",
"redux-thunk": "2.3.0",
"react": "16.8.4",
"react-dom": "16.8.4",
"redux": "^4.0.4",
"antlr4": "4.8.0"
},
"browserslist": [
"> 0.2% in NO",
"not dead",
"ie >= 11",
"last 2 versions"
]
}
This is just down to old Node version (< 15) having an incorrect algorithm for resolving peer dependencies. Node 15 and 16 will not allow it - unless you ask them nicely to ignore the issue 😇
If you use Node 14 this should work without any modifiers. The "old lockfile" warning is something you get in newer Node versions when the package-lock.json file is created with NPM < 7, as far as I know (basically anything that produces versions different from "lockfileVersion": 2).
By the way, I did get this installed now and this should document a workaround, so I guess this can be closed. As soon as you publish any non-prerelease versions of the packages this whole issue will disappear anyway, so it is a short-term nuisance.
P.S. With regards to this:
strange that there should be a dependency to
@helsenorge/core-utils@">=21.1.1-prerelease
it really is not so strange. NPM does print out the dependency graph (skjemautfyller -> toolkit -> core-utils), so you can recreate it by:
$ npm i @helsenorge/skjemautfyller --legacy-peer-deps
$ npm i @helsenorge/toolkit --legacy-peer-deps
$ jq .version node_modules/@helsenorge/toolkit/package.json
"21.3.0-prerelease"
$ jq .peerDependencies node_modules/@helsenorge/toolkit/package.json
{
"@helsenorge/core-utils": ">=21.1.1-prerelease",
"@helsenorge/designsystem-react": ">=1.0.0-beta70"
}It is the toolkit that has the peer dependency on >= 21.1.1-prerelease (which is not matched by any published version when using a semver compliant algo)
fatso83
commented
3 years ago I know this has just been pre-released and the source code is not open (so PRs are hard to come by), but will there be any official support for/has any thinking been done on overriding component styles through some kind of theming functionality or an official styling API (through class naming conventions, etc) in the form filler? As the interest shows, this project already seems to be relevant for quite a few, and what normally follows is some need to customize the styling to suit the Look and Feel.
kennethmyhra
commented
3 years ago The only way to do this now is by overriding the CSS styles you want to change, currently we have no guidelines for how to do that.
Helsedata.no did this for their implementation, you can see the result here: https://helsedata.no/no/soknadskjema/?allowAnonymous=true. They also added the left sidebar for easier navigation.
If there are more detailed questions @mgunnerud or @autark will have to step in for those.
fatso83
commented
2 years ago So we had another go, trying a few times with different variations of NPM and manual resolving, but the example package, form-filler, still is not buildable. Generally, using a newer NPM version will not work due to the unresolvable packages using the bugfixed algorithm, but using Node 14 gets us a bit further.
First thing to remember is to delete .npmrc to avoid the auth error mentioned above. Then doing npm i will get you an expanded version of this:
no such file or directory, open '/home/carlerik/code/structor/examples/form-filler/node_modules/.staging/es-abstract-2d617417/2015/ToPropertyKey.js'To get over that, delete package-lock.json and run npm i again to get
No matching version found for @helsenorge/skjemautfyller@7.10.4.Then try installing the publicly available version:
npm i @helsenorge/skjemautfyller@7.11.0-prerelease2That worked. OK, then try building using npm start to be met with: webpack-dev-server: not found. OK, let's try running npm i again now that we have a resolvable version: No matching version found for @helsenorge/core-utils@21.3.0.
OK, let's update the version to something released. I'll change the version to latest. Same story, now for No matching version found for @helsenorge/toolkit@21.3.0. Changing to latest ...
Running npm i again ... this time it seems to fair better as node-gyp is compiling for several minutes.
Worked. OK, let's try building: npm start:
Running npm i again shows the possible reasons: peer deps that are missing:
$ npm i
npm WARN @helsenorge/skjemautfyller@7.11.0-prerelease2 requires a peer of @helsenorge/designsystem-react@>=1.0.0-beta70 but none is installed. You must install peer dependencies yourself.
npm WARN @helsenorge/skjemautfyller@7.11.0-prerelease2 requires a peer of dompurify@^2.0.8 but none is installed. You must install peer dependencies yourself.
npm WARN @helsenorge/skjemautfyller@7.11.0-prerelease2 requires a peer of fhirpath@^2.7.3 but none is installed. You must install peer dependencies yourself.
npm WARN @helsenorge/skjemautfyller@7.11.0-prerelease2 requires a peer of marked@^0.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN @helsenorge/toolkit@21.3.0-prerelease requires a peer of @helsenorge/core-utils@>=21.1.1-prerelease but none is installed. You must install peer dependencies yourself.
npm WARN @helsenorge/toolkit@21.3.0-prerelease requires a peer of @helsenorge/designsystem-react@>=1.0.0-beta70 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.4.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.4.1 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.OK, let's install these. npm show @helsenorge/designsystem-react versions shows 1.0.0-beta113 to be the last match. Installing that does not seem to please NPM, but continuing regardless:
$ npm i jquery@3 popper.js@1.16 dompurify@2.0.8 fhirpath@2.7.3 marked@0.7.0 react@16 react-dom@16 bootstrap@4.6.1
npm WARN @helsenorge/skjemautfyller@7.11.0-prerelease2 requires a peer of @helsenorge/designsystem-react@>=1.0.0-beta70 but none is installed. You must install peer dependencies yourself.
npm WARN @helsenorge/toolkit@21.3.0-prerelease requires a peer of @helsenorge/core-utils@>=21.1.1-prerelease but none is installed. You must install peer dependencies yourself.
npm WARN @helsenorge/toolkit@21.3.0-prerelease requires a peer of @helsenorge/designsystem-react@>=1.0.0-beta70 but none is installed. You must install peer dependencies yourself.
npm WARN skjemautfyller-eksempel@1.0.0 No repository field.
The dependencies are fulfilled, even though NPM 6 does not think so:
$ jq .version node_modules/\@helsenorge/core-utils/package.json
"21.3.0-prerelease"
$ jq .version node_modules/\@helsenorge/designsystem-react/package.json
"1.0.0-beta113"OK, let's retry building.
OK, add a few more:
npm i immer classnames && npm start
....
ℹ ｢wdm｣: Compiled successfully.:partying_face:
Let's fire it up ...
Nope, just a grey background.
This is the point where I give up :sweat: . I don't think it is quite ready for public consumption yet. Any movement on the open sourcing?
kennethmyhra
commented
2 years ago Splitting of our internal package dependencies which has been a blocker for open-sourcing the form-filler has been resolved just a couple of weeks ago.
We are now working on getting priority to switch to those packages in the form-filler. When that task is done we are ready to open-source the form-filler and publish those npm packages.
As for an ETA, I do not have that at the moment. I will have to come back to you when we get priority to start that last part.
kennethmyhra
commented
2 years ago The Form Filler React component has now !finally! been published. The source code can be found here: https://github.com/helsenorge/refero and the package is also available as an npm package: https://www.npmjs.com/package/@helsenorge/refero
Is your feature request related to a problem? Please describe. Hi, we are very interested in using the frontend code in this project to render the resulting schemas and we saw that you have an example "form-filler" project that uses some interesting looking components like "Skjemautfyller": https://github.com/helsenorge/structor/blob/90ae6ecaad4a9f1d8e4247e8d221d48d2c225045/examples/form-filler/src/root/container.jsx#L4
The problem is that this example, which seems like something for externals to look at, is not available at NPM, but in your internal repository: https://github.com/helsenorge/structor/blob/90ae6ecaad4a9f1d8e4247e8d221d48d2c225045/examples/form-filler/.npmrc#L1
Describe the solution you'd like Find out if it is possible to publish some of these internal packages or make the repositories public
Describe alternatives you've considered Make it from scratch 🍭