Kinto Admin plugin broken
leplatrem opened this issue · 8 comments
The Kinto Admin v1.27.1 works as a standalone build (npm start or https://kinto.github.io/kinto-admin/)
But when built from the admin plugin here, the application crashes.
make build-kinto-admin
make serve
I'm struggling with the error trace, and can't really point out the guilty package :(
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
React 8
unstable_runWithPriority scheduler.production.min.js:19
React 4
Redux 4
L middleware.js:22
Redux 39
r AuthForm.js:443
r Form.js:220
React 3
unstable_runWithPriority scheduler.production.min.js:19
React 4
unstable_runWithPriority scheduler.production.min.js:19
React 18
280 index.js:12
a (index):1
t (index):1
r (index):1
<anonymous> main.879f77f6.chunk.js:1
react-dom.production.min.js:209:194
I could obtain something a bit more detailed:
--- a/kinto/plugins/admin/package.json
+++ b/kinto/plugins/admin/package.json
@@ -4,12 +4,12 @@
"dependencies": {
"babel-polyfill": "^6.23.0",
"codemirror": "^5.58.2",
- "kinto-admin": "1.27.1",
+ "kinto-admin": "file:../../../../kinto-admin",
"react": "^16.14.0",
"react-dom": "^16.14.0",
cd kinto/plugins/admin/
# edit src/index.js to hardcode server URL
npm run start
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `SessionInfoBar`.
React 16
unstable_runWithPriority scheduler.development.js:653
React 4
Redux 4
routerMiddleware middleware.js:22
Redux 38
KintoAdmin index.js:73
React 13
js index.js:12
js main.chunk.js:118
After investigating further with @Natim we realized it comes from the introduction of bootstrap-icons, and probably because the SVGs are not well exported/packaged and become undefined...
We use react-scripts here and don't seem to have many options about assets, no?
@dstaley Do you have an idea on what could cause this? T
Thanks!
@leplatrem Yup, you're correct. create-react-app translates the following import:
import { ReactComponent as Logo } from "./logo.svg";into a React component that renders the imported SVG. This works fine when running kinto-admin directly from its repo since I configured Webpack to handle that situation. However, the issue looks to be that create-react-app only applies this transform to local files, not files coming from npm. In the compiled source for kinto-admin, you see the following:
var _questionCircleFill = require("bootstrap-icons/icons/question-circle-fill.svg");
...
}, /*#__PURE__*/React.createElement(_questionCircleFill.ReactComponent, {Inspecting the _questionCircleFill variable reveals it's just a string path, not an object.
I'm going to dig into this a little bit more and see what I can find out.
@dstaley Unfortunately it doesn't seem like it's transpiled differently. And at least it still fails the same way :(
How do you install local packages in that context? I'm having issues about React versions when using file:../../../kinto-admin in package.json...
@leplatrem it looks like 1.27.2 doesn't have the updated code. I think maybe you published without running npm run build:lib?
As for the different React versions, I ran into that too. I got around it by using npm pack and then running npm i <path to tarball>. Webpack gets confused if you try to use a symlink or a relative file path, but installing from a tarball seems to work.
@leplatrem it looks like 1.27.2 doesn't have the updated code. I think maybe you published without running npm run build:lib?
[...] , but installing from a tarball seems to work.
👍 thanks!
Ha, no worries! I'm glad I could help :)