maybe I am dumb today but I fail to fix my local dev environment for the cookbook app. Maybe you can help me?
I know this is not Nextcloud specific but I hope to get some here here though.
The problem is that I want to build the app in development mode. For simplicity, there is the option to run npm run build-dev. When doing this from the master branch, this works as expected. However, dependabot reports a new version of prettier to be present (see #1751).
This should not impose any significant changes to the code base, but you can check out the corresponding branch. Then, first, install the dependencies with npm ci and then build with npm build-dev.
The resulting logs on my machine is published on npm_build-dev.log · GitHub. It seems that there are various problems with the babel loader triggered. This is unrelated to the changes introduced later in the branch to make prettier happy. In fact, the very first commit on the branch already has this problem.
Can anyone of you help me or explain the problem to me? Maybe you can explain to me how to tackle this problem (so I can learn it).
I tried your approach to change the webpack config and it seemed to work. I now wanted to debug a new issue and ran (successfully) npm ci && npm build-dev. The build seems to work but also seems rather fast.
When navigating the web site, nothing is shown. In the console, there is a warning printed
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
I want to have the pre-compiled Vue variant (as suggested by the NC app developer guidelines) and end up with rather empty Vue component renders. Again, I guess this problem is related to the vue loader.
hmpf, you’re right
Just looking at the diff I posted above: since you merge the webpack config from nextcloud, the rules should already be there and not needed to be added again. I need to take another look…
so, tried my best to get to the bottom of this Be aware, that’s not my expert field here…
The problem comes from the fact that vue-loader depends on prettier and it doesn’t work with version 3 of prettier. Now usually I would assume that this is not a problem, because that’s what dependency management is for, right? Turns out that the package.json of vue-loader does not contain a reference to prettier. This was only added in vue-loader versions >= 16, but we are still using 15.x, as specified in the @nextcloud/webpack-vue-config here:
Now usually I would assume that we could just override the version of prettier using the overrides directive of package.json. But looks like this doesn’t work, because the package is not dependent on prettier…
Thank you for your support. I revisited the problem and came to almost the same resist. At least I tracked it down to the prettier 3 support but without the interpretation about the dependencies of vue-loader.
I did open this PR that would centrally disable prettier in the current webpack config.
Either in place (I changed to use the commit in my local package.json) I can successfully build the cookbook app again.
Thank you for the investigation again. It took me quite some time to get that. This confirmed my research. Thanks for your effort.