[Svelte] Warning / suggested configuration when installing via composer

[daniels0056]

Installing ux-svelte via composer require symfony/ux-svelte have warning / missing webpack config entry. I'm not sure though if this is related to Svelte or UX, since it does not export the path ./internal when adding conditionNames to the Webpack configuration.

The problem

• Create a new project by symfony new --webapp my-app
• Add Svelte to project composer require symfony/ux-svelte
• Build dependencies using yarn yarn install && yarn build

Dependencies added and installed:

{
    "devDependencies": {
        ...
        "@symfony/stimulus-bridge": "^3.2.0",
        "@symfony/ux-svelte": "file:vendor/symfony/ux-svelte/assets",
        ...
        "svelte": "^3.0",
        "svelte-loader": "^3.1.9",
        ...
    },
   ...
}

This produces a warning, but still build successfully:

WARNING: You should add "svelte" to the "resolve.conditionNames" array in your webpack config. See https://github.com/sveltejs/svelte-loader#resolveconditionnames for more information

Attempting to fix the warning by changing default webpack configuration:

let config = Encore.getWebpackConfig();
config.resolve.conditionNames = ["svelte"];
module.exports = config;

This will produce, if attempting to build again by yarn build, the following error message:

ERROR  Failed to compile with 1 errors                                                                                                                                                                                                   
error  in ./assets/svelte/controllers/Hello.svelte                                                                                                                                                                                       

Module not found: Error: Package path ./internal is not exported from package ./node_modules/svelte (see exports field in ./node_modules/svelte/package.json)

Which can be fixed by updating Svelte to ^4.0 in packages.json, this is however probably a "solution" unless ux-svelte can increment Svelte version without breaks:

{
    "devDependencies": {
        ...
        "svelte": "^3.0",
        ...
    },
   ...
}

With a single dependency warning from ux-svelte:

warning " > @symfony/[email protected]" has incorrect peer dependency "svelte@^3.0".

[weaverryan]

Hi!

Yea, it looks like we need to:

A) Allow for svelte 3 or 4 in https://github.com/symfony/ux/blob/2.x/src/Svelte/assets/package.json - assuming there are no BC breaks in how you initialize Svelte, it will be as simple as changing that number. If there ARE changes, then we'll need to see about it. But ideally we would still support Svelte 3 and 4 to avoid a BC break.

B) In https://github.com/symfony/webpack-encore, we also need to allow svelte v 4 there - which would be done in https://github.com/symfony/webpack-encore/blob/4b2511268a1c22a0f4b3fe404028c4cf7f0b3978/package.json#L93 (and if the tests pass, then we're good!). Also, we can add the config.resolve.conditionNames = ["svelte"]; automatically in Encore when Svelte is being used (it sounds like this is a v4 only thing, but if it doesn't break anything on v3, we could add it always - else we may need to figure out if the user has svelte 3 or 4 and conditionally add it).

Volunteer for someone to make a set of PR's? Maybe @ChqThomas or @zairigimad (who added ux-svelte and svelte support to Encore).

[ChqThomas]

Hello! Thanks for the detailed issue :)

A)
Here is the migration guide: https://svelte.dev/docs/v4-migration-guide
There are no BC breaks for us! 🎉

It's recommended to replace the type SvelteComponent with SvelteComponent<any> in the typescript files.
I'll open a PR for that + allow both versions in the package.json of ux-svelte

B)
I did some tests: config.resolve.conditionNames = ["svelte"]; works with both v3 et v4 👍

But to get rid of the Module not found: Error: Package path ./internal is not exported from package ./node_modules/svelte (see exports field in ./node_modules/svelte/package.json) error in v3, you need to add another config line to webpack:

config.resolve.alias.svelte = path.resolve('node_modules', 'svelte')

But adding this line doesn't work with v4 so we have to add it conditionally

This is related to the webpack svelte-loader : sveltejs/svelte-loader#234 (comment)

[matfire]

I can confirm this issue: the warning appears and a components is rendered like this:

The svelte component is called like this:
{{svelte_component('Hello', {'name': "world"})}}
Do you have a workaround ? Even going back to svelte 3 does not seem to help...

[weaverryan]

Make sure you render that into an element :)

<div {{svelte_component('Hello', {'name': "world"})}}></div>