EditorElement not loaded correctly

[giordanovi]

I've a problem with EditorElement that it's not loaded corrently with the versions later the 1.5.6.
How can i solve the problem?
Thanks

[adamberecz]

Are you sure the CSS is imported correctly? Check the imported theme file and the Tailwind plugin.

[giordanovi]

Everything seems correct, in fact the form looks correct and everything works correctly. The only thing that doesn't work is the EditorElement component as seen in the screenshot Il giorno gio 7 dic 2023 alle ore 21:30 Adam Berecz < ***@***.***> ha scritto:

…

Are you sure the CSS is imported correctly? Check the imported theme file and the Tailwind plugin. — Reply to this email directly, view it on GitHub <#93 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABMQA4VG6L4XYXK4LSOSAI3YIIRMTAVCNFSM6AAAAABALAJIU2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TOOJTGU3DE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[adamberecz]

I don't know what could be the issue. I'd check Vueform Installation steps to make sure everything is configured properly. If nothing works, try replicating it in our sandbox and post the link here.

[giordanovi]

The installation steps are all correct.
Seems to be something related to imported scss styles. All components work except those that use scss styles in the vue template. Components that do not import styles are:
EditorElement
DateElement
LocationElement

[adamberecz]

Could you please copy your tailwind.config.js?

[giordanovi]

Sure. Here it is:

export default {
   content: [
        './templates/**/*.twig',
        './vendor/symfony/twig-bridge/Resources/**/*.twig',

        './assets/**/*.{js,ts,vue}',

        "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}",

        './vueform.config.ts',
        './node_modules/@vueform/vueform/themes/tailwind/**/*.vue',
        './node_modules/@vueform/vueform/themes/tailwind/**/*.js',
    ],
    darkMode: 'class',
    theme: {
        container: {
            center: true
        },
        extend: {
            fontFamily: {
                body: ['"Rubik"', 'sans-serif']
            },
            fontSize: {
                '2xs': ['0.65rem', {lineHeight: '0.75rem'}],
            },
            spacing: {
                '0.75': '0.20rem',
            },
            maxWidth: {
                '2xs': '18rem'
            },
        },
    },
    variants: {
        extend: {
            textColor: ['active', 'is-active'],
            translate: ['is-active'],
        },
    },
    plugins: [
        require('./assets/tailwind/variants/is-active'),
        require('./assets/tailwind/variants/is-role'),
        require('@tailwindcss/typography'),
        require('@vueform/vueform/tailwind'),
    ],
}

[adamberecz]

I can't really say what's the issue here. The only thing common in the three elements (Editor, Date, Location) is that they are the only ones that define non-Tailwind styles in their templates:
https://github.com/vueform/vueform/blob/main/themes/tailwind/templates/elements/LocationElement.vue#L11
https://github.com/vueform/vueform/blob/main/themes/tailwind/templates/wrappers/DatepickerWrapper.vue#L11
https://github.com/vueform/vueform/blob/main/themes/tailwind/templates/wrappers/EditorWrapper.vue#L11

It seems like these styles are not being included in your project for some reason. Any chance you can create a reproduction?

[giordanovi]

I tried but I can't reproduce it in the sandbox. The strange thing is that with version 1.5.6 everything works correctly. There must be something from the later version onwards that creates the problem. Il giorno mar 12 dic 2023 alle ore 22:57 Adam Berecz < ***@***.***> ha scritto:

…

I can't really say what's the issue here. The only thing common in the three elements (Editor, Date, Location) is that they are the only ones that define non-Tailwind styles in their templates: https://github.com/vueform/vueform/blob/main/themes/tailwind/templates/elements/LocationElement.vue#L11 https://github.com/vueform/vueform/blob/main/themes/tailwind/templates/wrappers/DatepickerWrapper.vue#L11 https://github.com/vueform/vueform/blob/main/themes/tailwind/templates/wrappers/EditorWrapper.vue#L11 It seems like these styles are not being included in your project for some reason. Any chance you can create a reproduction <https://codesandbox.io/p/sandbox/github/vueform/sandbox/tree/main>? — Reply to this email directly, view it on GitHub <#93 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABMQA4QIBM3KUNEOLLU5LZLYJDHNLAVCNFSM6AAAAABALAJIU2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TQMZVHAYDO> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[adamberecz]

Quite a few things were changed in package.json in 1.5.7. Could a package-lock.json remove and a full node_modules reinstall help maybe?

[giordanovi]

Nothing changed removing package-lock.json and node_modules Il giorno mar 12 dic 2023 alle ore 23:22 Adam Berecz < ***@***.***> ha scritto:

…

Quite a few things were changed in package.json in 1.5.7. Could a package-lock.json remove and a full node_modules reinstall help maybe? — Reply to this email directly, view it on GitHub <#93 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABMQA4QGW25SRNYUM4PVEVDYJDKKJAVCNFSM6AAAAABALAJIU2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TQMZVHE4DK> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[adamberecz]

@giordanovi - found the source of the issue. A fix is released in 1.6.6.

[giordanovi]

Perfect! That's work! Thanks Il giorno mer 10 gen 2024 alle ore 17:00 Adam Berecz < ***@***.***> ha scritto:

…

@giordanovi <https://github.com/giordanovi> - found the source of the issue. A fix is released in 1.6.6. — Reply to this email directly, view it on GitHub <#93 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABMQA4QPPUT34L33D24ULVLYN23K7AVCNFSM6AAAAABALAJIU2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DAOBSGQ3TQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[giordanovi]

Hi,
the problem appears again in the latest release!
How can we solve?
Thanks

[adamberecz]

Yes, sideEffects changed in 1.9.4 though I'm not able to reproduce your issue in any environment. Happy to create a reproduction?

[giordanovi]

Same as before, I tried but I can't reproduce it in the sandbox. All work correctly on version 1.9.3
What's did you changed from version 1.9.3 to the latest one?
How can I solve this?
Thanks

[adamberecz]

Try disabling tree-shake in your bundler temporarily (it might cause bigger build size if you are using tree-shaking anywhere else). The best would be to end up with some kind of reproduction so that I could eliminate the issue once and for all. What’s the closes spec you can give about your app that might help reproduce this issue? Framework, bundler, package.json as a start would be useful.

[giordanovi]

It's a symfony app so i'm using @symfony/encore as webpack wrapper. I attach my package.json, webpack.config.js, tailwind.config.ts and vueform.config.ts

app_files.zip