Question (not an issue): how can your files build when you're on an old version of laravel mix?

[gavinhewitt]

Hi,

I'm trying to create a custom tiptap field for Nova (I can't use this package because I want to really customize it), but I can't get my code to build properly. When I try to import tiptap I get an 'unexpected token' error because of the usage of the spread operator. I finally found how to fix it, and that is upgrading Laravel-mix to 5.0, and adding a .babelrc in the root. This builds the files as expected.

However, the field is not showing. Not sure what is going on there. So my question is:

How can it work for you as the mix version in your package is 1.0? Shouldn't you be having the same issues? Or if you did, how did you fix it or what am I missing? I've spend almost 2 days now trying to get it to work and could use some help :-(

// .babelrc
{
    "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

[manogi]

Hi Gavin, tbh the question about the spread operator and laravel mix I have no quick answer to.

As for why the field does not show, if you point me to your repository I will have a look when I find the time. No promises though, as I'm pretty busy at the moment.

[gavinhewitt]

HI Sebastian,

Thanks for your response!

The question is really if you don't encounter any hiccups when you build the files with the settings in your package.json. My guess is not, otherwise you'd know :-)

As for the repo:
I've only had it local so not in a repo yet, but the setup is really basic. It's just a fresh Laravel 7 (7.26.1) install, with Nova 3.8.4 and the default field code generated with nova:field. The only thing that's different is the tiptap import:

<template>
    <default-field :field="field" :errors="errors">
        <template slot="field">
            <input
                :id="field.name"
                type="text"
                class="w-full form-control form-input form-input-bordered"
                :class="errorClasses"
                :placeholder="field.name"
                v-model="value"
            />
        </template>
    </default-field>
</template>

<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova'
import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble } from 'tiptap' // <---- field does not show with this added

export default {
    mixins: [FormField, HandlesValidationErrors],

    props: ['resourceName', 'resourceId', 'field'],

    methods: {
        /*
         * Set the initial, internal value for the field.
         */
        setInitialValue() {
            this.value = this.field.value || ''
        },

        /**
         * Fill the given FormData object with the field's internal value.
         */
        fill(formData) {
            formData.append(this.field.attribute, this.value || '')
        },

        /**
         * Update the field's internal value.
         */
        handleChange(value) {
            this.value = value
        },
    },
}
</script>

// package.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "cross-env": "^5.0.0",
        "laravel-mix": "^5.0", // <-- changed from ^1.0, otherwise you get the unexpected token error
        "laravel-nova": "^1.0"
    },
    "dependencies": {
        "tiptap": "^1.27.1",
        "tiptap-extensions": "^1.29.1",
        "vue": "^2.5.0",
        "vue-template-compiler": "^2.6.10"
    }
}

Do you want to see the generated field.js?

[manogi]

Hi Gavin, don't get me wrong, but debugging this here in the issue section of my package is a bit much to ask.
I give it one shot, which is I don't seen you doing anything with Editor, EditorContent, EditorMenuBar, EditorMenuBubble which you are importing - no components object inside your default object.

But this should not neccessarily cause your field to not show at all. I recommend using Chrome devtools with the Vue extension to see if there maybe are some error messages you oversaw.

Feel free to fork my package and start from there or grab anything you need from it.

[gavinhewitt]

Hi Gavin, don't get me wrong, but debugging this here in the issue section of my package is a bit much to ask.
I give it one shot, which is I don't seen you doing anything with Editor, EditorContent, EditorMenuBar, EditorMenuBubble which you are importing - no components object inside your default object.

But this should not neccessarily cause your field to not show at all. I recommend using Chrome devtools with the Vue extension to see if there maybe are some error messages you oversaw.

Feel free to fork my package and start from there or grab anything you need from it.

Umm, I wasn't asking you to help me debug anything. It was only that you asked for a repo that I posted it here to give a view what would be in in it. I think you misunderstood.

I have tried multiple things (including doing something with the imports). As a matter of fact I used your package as a starting point, and that's why I reached out to you, since you may be the most knowledgeable guy when it comes to integrating tiptap into nova. I understand that you've not run into any issues I'm running in to, so I will go on and try to figure out why it's not working.

Thanks for your time and your package!

[gavinhewitt]

BTW, I have to thank you. Checking Vue in devtools was not possible because the Nova vue instance was set to production and I did not realize I could open it up by rebuilding the nova files. I can now see errors which should take me a bit further.

EDIT: Fixed!! Works!

Thanks!