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?
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?
I tried all sorts of variations in addition to ReactDOM.render
but nothing seems to work…