webpack support

[nmocruz]

I believe that people may have like me old projects that has legacy code tie to webpack, or like me, vite is not working like webpack.

when I tried to migrate from Vite to webpack, and use this tool I am getting this issue

[plugin:solid-devtools] G:\Projects\eRostering\Softworks.Rosterwise.WebSite\ClientApp\controllers\tasks\details\duty-dependencies.ts: Support for the experimental syntax 'decorators' isn't currently enabled (14:5):

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
G:/Projects/eRostering/Softworks.Rosterwise.WebSite/ClientApp/controllers/tasks/details/duty-dependencies.ts:14:4
12 |      startTime: ko.Observable<number> = ko.observable(null);
13 |      endTime: ko.Observable<number> = ko.observable(null);
14 |      @observable name: string = null;
   |                   ^
15 |      constructor(dependencyId: number=0, startTime: number = 0, endTime: number= 0) {
16 |

wondering if it not be possible to add support to webpack to facilitate the usage of devtools

[nmocruz]

The issue seems to be related to typescript and Babel, even with webpack I have to use ts-loader because Babel typescript-preset is not able to deal with some of the stuff sued on typescript, specify the declaration of properties.

A way to solvide this is maybe a way to integrate with the devtools with babel

[thetarnav]

Are you trying to use the vite plugin in a webpack project? I would be supprised if that worked.
For now, only the runtime functionality is available there, where the debugger script import is added to the app entry file. See https://github.com/thetarnav/solid-devtools/tree/main/packages/debugger
But supporting webpack and other bundlers shouldn't be too hard considering the plugin is very simple, and as you mentioned, the babel plugin could be exported separately.

[nmocruz]

No, I am not using the vite plugin with webpack.

what I was trying to say is I cannot use vite + solid-devtools because I get the error on Babel trying to do things that are not supposed.

My original setup works with webpack with ts-loader and babel, if I use just babel it fails.
It also fails when I try to use solid-devtools on vite (maybe lack of babel compliance)

My point is not blaming solid-devtools for making my integration fails, the problem is for legacy reason I have to stay with webpack, and so not devtools.
And I presume that not having devtools on solidjs supporting webpack is an issue (at least to me)

[Allen-Bayern]

also to me

[nmocruz]

@thetarnav I have finally migrated the project to use vite and is not webpack anymore, but the problem is the same, some components are rendering knockout templates and these files are using decorators on classes and fields. Seems like the plugins try to do something to this code using babel, but the babel transformation of these files are causing problems