Build failed on parcel

Kirby 3 Questions 🤔
1

Hi,
I try to use Parcel Bundler for Plugin generation first time and I get the error

No entries found.
    at Bundler.bundle (…lib/node_modules/parcel-bundler/src/Bundler.js:275:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! threeviewer@ dev: `parcel watch src/index.js --no-source-maps -d ./`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the threeviewer@ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     …/.npm/_logs/2021-07-17T00_18_33_551Z-debug.log

I thought that Parcel should generate this index.js and index.css if I run npm run dev the first time.
This is my package.json:

{
    "name": "threeviewer",
    "scripts": {
        "dev": "parcel watch src/index.js --no-source-maps -d ./",
        "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
    },
    "devDependencies": {
        "@vue/component-compiler-utils": "^3.2.0",
        "cssnano": "^4.1.11",
        "scss": "^1.35.2",
        "vue-template-compiler": "^2.6.14"
    },
    "dependencies": {
        "vue": "^2.6.14",
        "vue-hot-reload-api": "^2.3.4"
    }
}
```
If i run `npm install` it tries to search for the threeview plugin, which I will create actually.
So what have I missunderstood or do I wrong?

Cheers
2

Which Parcel, Node and npm versions are you using?

3

Hello Sonja,
I tried Parcel next but there I hat also some problems and I see that it is actually in beta so I switched back.
Parcel: 1.12.5
Node: 12.22.1
npm: 6.14.8

4

I recently was frustrated enough by parcel, its eternal beta and “experimental scope hoisting”, its continuous problems with vue, that I switched to rollup. Works great atm, it’s more complicated, but at least I have stuff under control.
I know this isn’t really an answer, but just know that you aren’t the only one having random problems with Parcel.

Anyway, no entries found normally means that the indicated source file does not exist.
Are you sure the path “src/index.js” is exact? Could you screenshot the folder structure?

5

Would you mind providing a basic setup for rollup? Or is more than “more complicated”?

6

It’s more complicated cause it’s more than a command line (at least how I’m currently using it - I like the “code over config” approach).
Here’s a snippets from a build script for a plugin:

const path = require('path')
const { rollup, watch: rollupWatch } = require('rollup')

const vuePlugin = require('rollup-plugin-vue')
const { terser } = require('rollup-plugin-terser')
const commonjs = require('@rollup/plugin-commonjs')
const nodeResolve = require('@rollup/plugin-node-resolve')

const entry = [path.join(__dirname, 'src/index.js')]

const inputOptions = {
  input: entry,
  plugins: [
    vuePlugin(),
    nodeResolve,
    commonjs()
  ]
}

const outputOptions = {
  format: 'iife',
  dir: __dirname,
}

async function build() {
  inputOptions.plugins.push(terser())
  const bundle = await rollup(inputOptions)
  await bundle.generate(outputOptions);
  await bundle.write(outputOptions)
  await bundle.close()
}

function watch() {
  const watcher = rollupWatch({
    ...inputOptions,
    output: outputOptions
  })

  watcher.on('event', (event) => {
    if (event.error) {
      console.error(event.error);
    }
    if (event.result) {
      event.result.close();
    }
  });
}

exports.build = build
exports.watch = watch

Only thing is to be careful when choosing the rollup-plugin-vue package version, as the newest version (v6) builds for Vue 3. These are my devDependencies:

  "devDependencies": {
    "@rollup/plugin-commonjs": "^19.0.0",
    "@rollup/plugin-node-resolve": "^13.0.0",
    "rollup": "^2.52.2",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-vue": "^5.1.9",
  },

plugin-commonjs and plugin-node-resolve are used because I import some stuff from node_modules and those use the “node style” require() imports.
If you’re only doing ES6 imports and don’t require stuff from node_modules, you don’t need those.

This script also does not transcode your javascript with babel since the Kirby panel requirements are anyway rather modern.

7

Thanks for sharing :smiling_face_with_three_hearts:

1 Like
8

Anyway, no entries found normally means that the indicated source file does not exist.
Are you sure the path “src/index.js” is exact? Could you screenshot the folder structure?

Yes, but I thought that parcel will generate them. Or I have misunderstood what @bastianallgeier did in his Youtube Video.
At the first start here parcel copies also a lot of modules and do other stuff. At me I couldn’t see anything of that in my terminal.
So I created the index.js by hand. The error I mentioned is gone.
Now I have problem with my Websocket connection. It looks that something from parce_bundler is missing.
I think there is something wrong with the installation or I don’t know.
But it doesn’t looks to me that parcel is not a timesaver more the opposite.

9

Parcel should generate the main index.js file in the plugin root (/site/plugins/your-plugin-name/index.js) from /site/plugins/your-plugin-name/src/index.js

10

Is this than wrong in my package.json?

    "scripts": {
        "dev": "parcel watch src/index.js --no-source-maps --hmr-hostname www.foobar.de -d ./",
        "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
    },

should it not be

    "scripts": {
        "dev": "parcel watch src/index.js --no-source-maps --hmr-hostname www.foobar.de -d ./",
        "build": "parcel build index.js --no-source-maps --experimental-scope-hoisting -d ./"
    },

Is the index.js only generating in the main folder only after build or also in development process?

11

No, it shouldn’t. The first argument after watch/build is the input file, which is always src/index.js, the output path is given as last argument, i.e. ./.