Support for Webpack Encore

[YummYume]

Hello,

I am currently working on a template using Webpack Encore with Svelte. After following the installation instructions, I encountered a few issues when trying to run Webpack. I also found #68 and the errors seem to be the same for the most part ($app/env and $app/stores).

Here are the errors encountered when running Webpack :

Module build failed: Module not found:
"./node_modules/@brainandbones/skeleton/LightSwitch/LightSwitch.svelte" contains a reference to the file "$app/env".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@brainandbones/skeleton/Menu/Menu.svelte" contains a reference to the file "$app/stores".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@brainandbones/skeleton/index.js" contains a reference to the file "./Filters/filter".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@brainandbones/skeleton/index.js" contains a reference to the file "./Notifications/Stores".
This file can not be found, please check it for typos or update it if the file got moved.

Also worth mentioning that Tailwindcss works fine on its own. This is certainly not a priority but I thought I'd share the errors I encountered to help with non-SvelteKit apps.

[endigo9740]

Hi @YummYume thanks for reporting this issue. I'm not familiar with Webpack Encore. A quick search tells me it's related to Symfony, which is new to me as well. Would you mind providing a quick summary of what this is? That context might be useful to know what this is and whether or not we would like debug and add support going forward.

Additionally, yeah the errors look to align with other reports we've had when using Skeleton outside a SvelteKit application. Namely the first two of the four. However, Filters and the Notification Store is new, so definitely something that will need a dedicated review.

Note that per #68 we're currently only planning to expand support for Vite/Astro/Routify currently. This will occur in that order given the bigger reach of the former versus the latter. Though I do foresee more introduced over time.

You can track progress of Vite/Svelte support in #83. Per that, you'll see it's a pretty heavy lift to test and document the process for each new stack introduced. If you're willing and able to help to handle us do this for Symfony then this may go a lot faster! Otherwise please be aware we may not return to this for a while!

[endigo9740]

FYI: https://github.com/Brain-Bones/skeleton/issues/86

CodeBlock will be disabled from the next release until further notice. We'll revisit a different way to implement this and reintroduce in a future update.

[YummYume]

@endigo9740 Thanks for the quick response! Webpack Encore is the Symfony version of Webpack which comes in default with Symfony apps (a PHP Framework). It allows for straightforward configuration and compiling of javascript assets. There is effectively growing support for Vite with Symfony, which I could give a try, the configuration is pretty similar to Webpack (although simplified).

If the first 2 errors get fixed for Vite it will probably also fix them for Webpack. I would be glad to try and take a look at what is causing the last 2 errors. Fixing them for Webpack Encore will most likely fix them for every Webpack-like compilers (like Mix for Laravel).

If that helps, my current Setup is using Webpack Encore with Inertia js, to use Svelte as my SPA without leaving the comfort of Symfony as a back-end service (and without having to build an API).

For reference, you can check out here how a Webpack Encore configuration looks like. The most important part is .addEntry('app', './assets/app.js'), which is where your app basically starts. The rest is totally up to you and allows you to use pretty much any js framework, pre-render css, and much more.

[endigo9740]

Ahh a PHP framework, got it. Thank you for explaining. It sounded vaguely familiar but I couldn't place it. Probably because I haven't touched PHP in like 10+ years :)

I might advise we wait until #68, #83, and #86 are resolved, then test again. Could be that issues with the CodeBlock/Menu/Lightswitch are causing some spillage, so to speak. I'd expect this should be possible when the next release drops. We're waiting on testing to wrap on #41 before that can occur though.

[YummYume]

@endigo9740 Sounds fine to me! I might try to switch to a Vite configuration in the meantime in case Webpack doesn't work after those issues are resolved, but I'll also happily try to find what is causing those issues with Webpack.

[endigo9740]

Sounds like a plan! Thanks!

[endigo9740]

@YummYume FYI the new update dropped today: View the Changelog

One of the major changes with this release is we've dropped SvelteKit-only features in components like Menus, LightSwich, and temporarily removed the CodeBlock. Those were the three main culprits preventing support in Vite and Astro.

If you are willing and able, please try v0.32.19 and let us know if it improves support for Symphony. Thanks!

[YummYume]

Hey @endigo9740 ! First of all, amazing job on the quick release!

As said before, I made a Vite version of my app in the meantime and after this release, everything works like a charm!

For the Webpack version, however, the 2 first errors related to Svelte Kit are indeed gone, but I was still met with the 2 other errors :

ERROR in ./node_modules/@brainandbones/skeleton/index.js 37:0-42

Module not found: Error: Can't resolve './Filters/filter' in '/app/node_modules/@brainandbones/skeleton'
Did you mean 'filter.js'?

and

ERROR in ./node_modules/@brainandbones/skeleton/index.js 48:0-53

Module not found: Error: Can't resolve './Notifications/Stores' in '/app/node_modules/@brainandbones/skeleton'
Did you mean 'Stores.js'?

It is essential to notice that both of these are met with another error :

BREAKING CHANGE: The request './Notifications/Stores' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

This is all caused because Webpack cannot resolve the filenames as the imports do not specify .js. This can be easily fixed by adding a rule to the Webpack config :

Webpack Encore

Encore
  // ...
  .addRule({
    test: /\.js/,
    resolve: {
      fullySpecified: false
    }
  });

Normal Webpack

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.js/,
        resolve: {
          fullySpecified: false
        }
      },
    ],
  },
};

Or if you want to be more specific and target only this bundle, something like test: /@brainandbones\/[a-zA-Z0-9/]{1,}\.js/, will do. With this, the bundle now works perfectly, and I already love it!

Cheers!

[endigo9740]

@YummYume I'm thrilled to hear it's working for both versions now! I can't thank you enough for the detailed instruction above. I'm not sure how I want to present this yet, as we probably won't make Symphony a primary target of the library, however this is valuable knowledge all the same.

I'm thinking about leaning more generalized instruction for using Skeleton within "micro-frameworks" like this, where a server-side app utilizes Svelte, React, Vue, etc., but only to handle client-side. Not the entire app structure. But some of this instruction may be valid for anyone taking this approach. Imagine someone building a Django or Flask app with Python for example - those users may run into similar issues. I'll review with our core team members and decide how to proceed.

In the meantime, thanks again for the help! It sounds like you may be one of the first people making extensive use of the library within Vite, so please let us know if you run into any issues! We would be happy to tailor instructions or add guides as needed. Thanks!

[endigo9740]

Since the primary issues are resolved and this issue is linked on the "decoupling" ticket, I'm going to go ahead and close this. For anyone looking to continue this conversation, please do so here:

https://github.com/Brain-Bones/skeleton/issues/68