Nasty issue with local dev env throws issues from babel

[christianlupus]

Hello guys,

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).

Thanks Christian

[SysKeeper]

This looks like webpack is using the wrong loader for vue files. What works is adding something like this to the webpack config:

        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                    loader: "babel-loader",
                    },
                },
                {
                    test: /\.vue$/,
                    loader: "vue-loader",
                },
            ],
        },

Or you could re-use the default nextcloud rules:

diff --git a/webpack.config.js b/webpack.config.js
index 9350e384..e3a8b323 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,6 +9,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
 const webpack = require('webpack')
 const webpackConfig = require('@nextcloud/webpack-vue-config')
+const nextcloudWebpackRules = require('@nextcloud/webpack-vue-config/rules')
 const { merge } = require('webpack-merge')
 
 const buildMode = process.env.NODE_ENV
@@ -24,6 +25,11 @@ function cookbookConfig (env) {
         // devServer: {
         //     host: "0.0.0.0",
         // },
+        module: {
+            rules: [
+                ...Object.values(nextcloudWebpackRules),
+            ],
+        },
         plugins: [
             new CleanWebpackPlugin(),
             new webpack.DefinePlugin({

As to the question of “Why does an update to prettier change the loader being used”, I am the wrong person, sorry, no idea.

[christianlupus]

Thanks, that solved the issue.

[christianlupus]

Hello @SysKeeper,

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.

Any more good advice?

[SysKeeper]

Hey,

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…

[SysKeeper]

Hey @christianlupus,

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:

nextcloud/webpack-vue-config/blob/f8a436cdfc3312c4dae17330658135007ef2a931/package.json#L54

For reference, see this commit of vue-loader that adds prettifier to the package.json: test: setup component render test · vuejs/vue-loader@7d3bc47 · GitHub where prettier was added as a dependency.

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…

I assume that this PR Vue 3 by raimund-schluessler · Pull Request #331 · nextcloud/webpack-vue-config · GitHub would fix the issue, since it upgrades vue-loader to a version >= 17.

For now I see 2 things (there might be other/better ones maybe…)

• Go back to prettier < 3
• Disable prettier for vue-loader

I think the latter one is the better in this case. You can easily do this in your webpack.config.js:

diff --git a/webpack.config.js b/webpack.config.js
index 9350e384..479291d9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,11 +9,18 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
 const webpack = require('webpack')
 const webpackConfig = require('@nextcloud/webpack-vue-config')
+const webpackRules = require('@nextcloud/webpack-vue-config/rules')
 const { merge } = require('webpack-merge')
 
 const buildMode = process.env.NODE_ENV
 const isDev = buildMode === 'development'
 
+webpackRules.RULE_VUE.options = {
+    prettify: false
+}
+
+webpackConfig.module.rules = Object.values(webpackRules)
+
 function cookbookConfig (env) {
     const config = merge(webpackConfig, {

For reference, this is the complete config file (so without the changes mentioned in my first post):

/**
 * Nextcloud Cookbook app
 * Main Webpack configuration file.
 * Different configurations for development and build runs
 *  are located in the appropriate files.
 */
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const webpack = require('webpack')
const webpackConfig = require('@nextcloud/webpack-vue-config')
const webpackRules = require('@nextcloud/webpack-vue-config/rules')
const { merge } = require('webpack-merge')

const buildMode = process.env.NODE_ENV
const isDev = buildMode === 'development'

webpackRules.RULE_VUE.options = {
    prettify: false
}

webpackConfig.module.rules = Object.values(webpackRules)

function cookbookConfig (env) {
    const config = merge(webpackConfig, {
        context: path.resolve(__dirname),
        entry: {
            guest: path.resolve(path.join('src', 'guest.js')),
        },
        // You can add this to allow access in the network. You will have to adopt the public path in main.js as well!
        // devServer: {
        //     host: "0.0.0.0",
        // },
        plugins: [
            new CleanWebpackPlugin(),
            new webpack.DefinePlugin({
                '__webpack_use_dev_server__': env.dev_server || false,
            }),
        ],
        resolve: {
            'alias': {
                cookbook: path.resolve(__dirname, 'src'),
                icons: path.resolve(__dirname, 'node_modules/vue-material-design-icons'),
            }
        },
    })
    // console.log(config)
    return config
}

module.exports = cookbookConfig

With this I am able to run the dev build again and also get a UI again

% npm run build-dev

> cookbook@0.10.2 build-dev
> npx webpack --node-env development --progress --config webpack.devel.js

Building cookbook 0.10.2 

10% building 0/2 entries 2/2 dependencies 0/2 modulesBrowserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
asset cookbook-main.js?v=a63b38e0f3deef9ed6f3 7.11 MiB [emitted] [immutable] (name: main) 1 related asset
asset cookbook-guest.js?v=6f78cde98d4da8710a79 1.78 MiB [emitted] [immutable] (name: guest) 1 related asset
runtime modules 2.45 KiB 13 modules
orphan modules 16.8 KiB [orphan] 12 modules
modules by path ./node_modules/ 5.75 MiB 688 modules
modules by path ./src/ 370 KiB
  modules by path ./src/components/*.vue 319 KiB 250 modules
  modules by path ./src/components/AppControls/*.vue 24 KiB 21 modules
  modules by path ./src/js/*.js 14.7 KiB
    ./src/js/helper.js 4.17 KiB [built] [code generated]
    + 5 modules
  modules by path ./src/*.js 2.48 KiB
    ./src/main.js 1.62 KiB [built] [code generated]
    ./src/guest.js 888 bytes [built] [code generated]
  ./src/router/index.js 2.25 KiB [built] [code generated]
  ./src/store/index.js 7.3 KiB [built] [code generated]
webpack 5.88.1 compiled successfully in 2384 ms

Hope that helps

[christianlupus]

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.

[SysKeeper]

Glad it works now