Comments (10)
@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.
from skeleton.
@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.
from skeleton.
@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!
from skeleton.
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!
from skeleton.
FYI: #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.
from skeleton.
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.
from skeleton.
Sounds like a plan! Thanks!
from skeleton.
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!
from skeleton.
@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!
from skeleton.
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:
from skeleton.
Related Issues (20)
- Svelte v5 RC: InputChip component produces errors HOT 9
- v3 React AppBar does not follow export conventions HOT 1
- v3 - consistency -D and --save-dev HOT 7
- TreeView - Custom Icons. HOT 1
- Carousel seems broken on doc page HOT 1
- Refactor React components to fall more inline with existing React libraries HOT 4
- RFC: Remove return types from React components
- A little bit of white peeking out on the progress bars (styling issue) HOT 4
- InputChips does not have restProps HOT 2
- Table of Contents: support setting scrollTarget, scrollOffset HOT 1
- AppRailTile on:click not working (v2.10.1) HOT 1
- Revert missing on:click event for App Rail Anchor Tile component
- NEXT: component consistency pass
- Missing import of popup HOT 3
- Carousels example HOT 2
- v3 Component API Revisions
- NEXT: Revisit Tab Component and API
- NEXT: Accordion missing a11y HOT 1
- NEXT: Dependency updates
- NEXT: Introduce the skeleton-a11y package
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skeleton.