Trying to build headlamp for openSUSE: conflict with plugin react

[johanneskastl]

I am trying to package headlamp for openSUSE. I have successfully prepared everything for the offline build, but the frontend build is breaking:

[  156s] Failed to compile.
[  156s] 
[  156s] [eslint] Plugin "react" was conflicted between "package.json » @kinvolk/eslint-config" and "BaseConfig » /home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/react-scripts/node_modules/esl
int-config-react-app/base.js".

Any idea why that might be?

[joaquimrocha]

Hmm, not sure. I don't think I have hit that before.
I searched and someone mentioned this worked for them: https://stackoverflow.com/questions/70449712/create-react-app-error-in-plugin-react-was-conflicted-between-eslintrc-jso

[joaquimrocha]

And thanks for packaging Headlamp for OpenSUSE BTW. I couldn't be much of a help with this issue but if you run into more problems, keep opening issues so we make sure we make it easy for folks to build Headlamp in environments we likely haven't tested.

[johanneskastl]

Hmm, not sure. I don't think I have hit that before. I searched and someone mentioned this worked for them: https://stackoverflow.com/questions/70449712/create-react-app-error-in-plugin-react-was-conflicted-between-eslintrc-jso

Thanks for the reply! Which solution do you mean? There are many many comments recommending different things...

Running yarn dedupe did not work, as yarn install will do that automatically...

[illume]

Oh. It is tested using npm, not yarn. Is it possible for you to use npm?

[johanneskastl]

Hmm, that seems to have done the trick. At least that error is gone.

Now I got some more errors:

[  146s] Creating an optimized production build...          
[  149s] One of your dependencies, babel-preset-react-app, is importing the
[  149s] "@babel/plugin-proposal-private-property-in-object" package without
[  149s] declaring it in its dependencies. This is currently working because
[  149s] "@babel/plugin-proposal-private-property-in-object" is already in your
[  149s] node_modules folder for unrelated reasons, but it may break at any time.
[  149s]                                                    
[  149s] babel-preset-react-app is part of the create-react-app project, which
[  149s] is not maintianed anymore. It is thus unlikely that this bug will
[  149s] ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
[  149s] your devDependencies to work around this error. This will make this message                                                        
[  149s] go away.                                          
[  149s]                                                                                                                                    
[  249s] Compiled with warnings.                                     
[  249s]                                                    
[  249s] Failed to parse source map from '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@apidevtools/openapi-schemas/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@apidevtoo
ls/openapi-schemas/src/index.ts'                                  
[  249s]                                                    
[  249s] Failed to parse source map from '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/constructor.ts' file: Error: ENOENT: no such file or directory, open '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/s
rc/constructor.ts'                                          
[  249s]                                                    
[  249s] Failed to parse source map from '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/extend-error.ts' file: Error: ENOENT: no such file or directory, open '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/
src/extend-error.ts'                                                                                                                        
[  249s]                                                    
[  249s] Failed to parse source map from '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/ind
ex.ts'                                                      
[  249s]                                                                                                                                    
[  249s] Failed to parse source map from '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/isomorphic.browser.ts' file: Error: ENOENT: no such file or directory, open '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtool
s/ono/src/isomorphic.browser.ts'
[  249s] 
[  249s] Failed to parse source map from '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/normalize.ts' file: Error: ENOENT: no such file or directory, open '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src
/normalize.ts'
[  249s] 
[  249s] Failed to parse source map from '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/singleton.ts' file: Error: ENOENT: no such file or directory, open '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src
/singleton.ts'
[  249s] 
[  249s] Failed to parse source map from '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/stack.ts' file: Error: ENOENT: no such file or directory, open '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/sta
ck.ts'
[  249s] 
[  249s] Failed to parse source map from '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/to-json.ts' file: Error: ENOENT: no such file or directory, open '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/t
o-json.ts'
[  249s] 
[  249s] Failed to parse source map from '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/types.ts' file: Error: ENOENT: no such file or directory, open '/home/abuild/rpmbuild/BUILD/headlamp-0.23.1/frontend/node_modules/@jsdevtools/ono/src/typ
es.ts'
[  249s] 

Those errors are apparently not fatal, the build however fails here:

[  250s] The project was built assuming it is hosted at ./. 
[  250s] You can control this with the homepage field in your package.json.
[  250s]                                                    
[  250s] The build folder is ready to be deployed.          
[  250s]                                                   
[  250s] Find out more about deployment here:               
[  250s]                                                    
[  250s]   https://cra.link/deployment                     
[  250s]                                                    
[  324s] npm ERR! code EAI_AGAIN                            
[  324s] npm ERR! syscall getaddrinfo                       
[  324s] npm ERR! errno EAI_AGAIN                           
[  324s] npm ERR! request to https://registry.npmjs.org/shx failed, reason: getaddrinfo EAI_AGAIN registry.npmjs.org
[  324s]                                                    
[  324s] npm ERR! A complete log of this run can be found in: /home/abuild/.npm/_logs/2024-04-30T20_07_19_231Z-debug-0.log
[  324s] error: Bad exit status from /var/tmp/rpm-tmp.TWxDPv (%build)

[illume]

hrmm. That looks like dns failed. I wonder if it was a temporary network error?

[johanneskastl]

Did I forget to mention, the builds happen offline. So there is no network connectivity. I need to prepare everything beforehand. In this case I run npm install and collect the node_modules directory. This gets thrown into the build process.

What does npm want to do in that step? Does it need additional files?

[illume]

oh, ok.

The make frontend does an npm install, which does network calls even when it has a node_modules.

It sounds like you do the npm install with network connectivity, then keep the node_modules folder?

Did you try “npm run build” instead of “make frontend”? I don’t think that requires the network.

[joaquimrocha]

Good call @illume , I hadn't realized @johanneskastl was trying with yarn.

@johanneskastl , about the offline build. Our initial flatpak build was also building offline (now we just use the already built binaries) and I had to use some tools that basically downloaded all the dependencies into a cache and then had to pass some arguments to make npm use that cache. Maybe this hint helps.

[johanneskastl]

@joaquimrocha Any hints on what you had to cache back then? Is there any documentation on what you did?

I had a look at other openSUSE packages containing npm things, that is how I came up with using yarn to prepare that offline source. But as it seems to not properly dedupe and the build fails with the conflict, I am stuck between a rock and a hard place...

[joaquimrocha]

@johanneskastl , you can check how I was building the flatpak at that version:
https://github.com/flathub/io.kinvolk.Headlamp/tree/5d6e176a3fefeb43e5c903e359fd9e423fd41720

This script would use the flatpak tool flatpak_node_generator to create fetch the tarballs related to headlamp's app/package-lock.json and frontend/package-lock.json, and create a cache structure that npm recognized.

Like I said, I ran into problems with this and decided to just use Headlamp's already built binaries instead. I know very well this is not how Linux packages are built, usually. Probably there are other node-based tools that are packaged in RPM from distro maintainers, from which you can check what they are doing?

[johanneskastl]

Thanks @joaquimrocha I'll have a look. And yes, there are some other tools being package, that is where I got the yarn idea from. :-)