How can I import or require scripts within a panel View?

Kirby 3 Questions 🤔
1

I’m making panel views for my custom blocks and I need to import some components from another repo, but neither import nor require seem to work in that context.
How can I import or require scripts within a panel View? Or styles for that matter?

2

I’m using Parcel to build my files so now it looks like I can import, but it seems like Kirby is hiding all error messages and warnings because it doesn’t work but doesn’t complain either…

Here is what I have now in site/plugins/MY_PLUGIN/, maybe someone will see what I’m doing wrong? The result is that I see the “Hello?” but my Input component doesn’t appear and there aren’t any errors or warnings I can find anywhere…

package.json

{
  "scripts": {
    "dev": "parcel watch src/index.tsx --no-source-maps -d ./",
    "build": "parcel build src/index.tsx --no-source-maps --experimental-scope-hoisting -d ./"
  },
  "posthtml": {
    "recognizeSelfClosing": true
  },
  "devDependencies": {
    "@babel/core": "7.14.6",
    "@babel/preset-react": "7.14.5",
    "@vue/babel-preset-jsx": "1.2.4",
    "@vue/component-compiler-utils": "3.2.2",
    "parcel-bundler": "1.12.5",
    "typescript": "4.3.5",
    "vue-template-compiler": "2.6.14"
  },
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "vue": "2.6.14",
    "vue-hot-reload-api": "2.3.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react"
  }
}

babelrc.js

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react', '@vue/babel-preset-jsx']
}

src/index.tsx

import Primary from './components/Primary.vue'

panel.plugin("blocks/block-primary", {
  blocks: {
    "block-primary": Primary
  }
});

src/components/Primary.vue

<template>
  <div>
    <h2>Hello?</h2>
    <div id='boom'></div>
  </div>
</template>

<script>
  import ReactDOM from 'react-dom'
  import { Input } from '../../../../../../../git/shawninder/components/components/form/Input'

  export default {
    computed: {
      layout () {
        if (this.content.blocks_layout === 'left_first') {
          return 'block-lrlr'
        } else {
          return 'block-rlrl'
        }
      },
      items () {
        return this.content.items || []
      }
    },
    render () {
      return ReactDOM.render(<Input text='TEXT2' label='LABEL2' />, document.getElementById('#boom'))
    }
  }
</script>

Help?

3

I tried all sorts of variations in addition to ReactDOM.render but nothing seems to work…