Audio block: plugin is not a function

The CMS Questions
1

Hi,

I want to build block plugins in the future and followed this tutorial:

https://getkirby.com/docs/cookbook/panel/custom-block-type

Unfortunately, npm run build does not work. Error: Audio.vue:undefined:undefined: plugin is not a function

I use Node 15 via NVM. But after closing the terminal, I have to re-use the latest Node version (new terminal = Node 13). During build (Node 13), PostCSS yells at me that Node 14+ should be used.

The output does not direct me to a log file. I think everything is fine with the plugin itself and the Starterkit is a fresh clone, but my setup has no desire. Are there any requirements that are not listed in the tutorial?

BTW, parcel-bundler is deprecated, but I have tried parcel (v2 beta) and that does not work either.

Stack trace:

    at LazyResult.run (/Users/crstn/.nvm/versions/node/v15.14.0/lib/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/Users/crstn/.nvm/versions/node/v15.14.0/lib/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:212:26)
    at /Users/crstn/.nvm/versions/node/v15.14.0/lib/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/Users/crstn/.nvm/versions/node/v15.14.0/lib/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/Users/crstn/.nvm/versions/node/v15.14.0/lib/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.js:131:17)

Edit: npm run dev does work. And NPM generates a log only while on Node 13. With Node 15, there is no log.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@6.13.7
3 info using node@v13.11.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle @~prebuild: @
6 info lifecycle @~build: @
7 verbose lifecycle @~build: unsafe-perm in lifecycle true
8 verbose lifecycle @~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/crstn/Documents/starterkit/site/plugins/audio-block/node_modules/.bin:/Users/crstn/.rvm/gems/ruby-2.4.9/bin:/Users/crstn/.rvm/gems/ruby-2.4.9@global/bin:/Users/crstn/.rvm/rubies/ruby-2.4.9/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/crstn/.rvm/bin
9 verbose lifecycle @~build: CWD: /Users/crstn/Documents/starterkit/site/plugins/audio-block
10 silly lifecycle @~build: Args: [
10 silly lifecycle   '-c',
10 silly lifecycle   'parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./'
10 silly lifecycle ]
11 silly lifecycle @~build: Returned: code: 1  signal: null
12 info lifecycle @~build: Failed to exec build script
13 verbose stack Error: @ build: `parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1026:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid @
15 verbose cwd /Users/crstn/Documents/starterkit/site/plugins/audio-block
16 verbose Darwin 20.3.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v13.11.0
19 verbose npm  v6.13.7
20 error code ELIFECYCLE
21 error errno 1
22 error @ build: `parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./`
22 error Exit status 1
23 error Failed at the @ build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Edit: I have found a StackOverflow question with the exact same issue, one day old. But no related issue on the Parcel GitHub repo.

The following issue was solved by installing Parcel v2 beta. I tried that but first, had to remove both --experimental-scope-hoisting -d flags and second, a new error is displayed: unknown: Could not find entry: /Users/crstn/Documents/starterkit/site/plugins/audio-block

Log of Parcel v2 error (this time I tried Node 14 and it stays on this version after restarting the terminal):

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/crstn/.nvm/versions/node/v14.16.1/bin/node',
1 verbose cli   '/Users/crstn/.nvm/versions/node/v14.16.1/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.12
3 info using node@v14.16.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle @~prebuild: @
6 info lifecycle @~build: @
7 verbose lifecycle @~build: unsafe-perm in lifecycle true
8 verbose lifecycle @~build: PATH: /Users/crstn/.nvm/versions/node/v14.16.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/crstn/Documents/starterkit/site/plugins/audio-block/node_modules/.bin:/Users/crstn/.rvm/gems/ruby-2.4.9/bin:/Users/crstn/.rvm/gems/ruby-2.4.9@global/bin:/Users/crstn/.rvm/rubies/ruby-2.4.9/bin:/Users/crstn/.nvm/versions/node/v14.16.1/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/crstn/.rvm/bin
9 verbose lifecycle @~build: CWD: /Users/crstn/Documents/starterkit/site/plugins/audio-block
10 silly lifecycle @~build: Args: [ '-c', 'parcel build src/index.js --no-source-maps ./' ]
11 silly lifecycle @~build: Returned: code: 1  signal: null
12 info lifecycle @~build: Failed to exec build script
13 verbose stack Error: @ build: `parcel build src/index.js --no-source-maps ./`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/crstn/.nvm/versions/node/v14.16.1/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (/Users/crstn/.nvm/versions/node/v14.16.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid @
15 verbose cwd /Users/crstn/Documents/starterkit/site/plugins/audio-block
16 verbose Darwin 20.3.0
17 verbose argv "/Users/crstn/.nvm/versions/node/v14.16.1/bin/node" "/Users/crstn/.nvm/versions/node/v14.16.1/bin/npm" "run" "build"
18 verbose node v14.16.1
19 verbose npm  v6.14.12
20 error code ELIFECYCLE
21 error errno 1
22 error @ build: `parcel build src/index.js --no-source-maps ./`
22 error Exit status 1
23 error Failed at the @ build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
2

Well, that was stupid. I forgot to replace -d ./ with --dist-dir ./. After that, installing vue@next got the whole damn thing rollin’.

Is it time for an updated guide? I could do that. @bastianallgeier @texnixe

3

Updated with what? parcel 2?

4

Since Parcel 1 is deprecated, yes.

5

And Parcel 2 is still in beta… We will certainly discuss this again because it doesn’t just affect that one recipe and if we make changes, we will make them for all. My last status was that Parcel 2 wasn’t ready yet and there were some issues.

6

I understand, and tagging something as deprecated while the new shiny thing is still in beta … That is weird.

Have you tried this recipe yourself recently? For me it looks like Parcel 1 is having issues now. Maybe it’s just my setup, since you are using Parcel 1 on a daily basis, right? But I am not the only one with issues either.

A few lines about Parcel 2 and what to change – notable -d flag – in the recipe(s) would be cool.

7

Hi there,
I’m currently also having problems with building my panel plugin.
I can run the plugin in dev-mode and everything is fine, but when building the plugin I get the same error as @crstn .
Parcel 2 is another story…