bug: npm run build raise error

JaneFeel commented 1 month ago

Describe the bug

npm run build

> windmill-components@1.405.5 build
> vite build

11:24:32 [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

svelte-carousel@1.0.25
svelte-tiny-virtual-list@2.0.5
@rgossiaux/svelte-headlessui@2.0.0
simple-svelte-autocomplete@2.5.2
svelte-range-slider-pips@2.3.1

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.
vite v5.4.0 building SSR bundle for production...
[plugin:vite:dynamic-import-vars] [plugin vite:dynamic-import-vars] src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte: invalid import "/api/w/${$workspaceStore}/raw_apps/get_data/${$page.params.version}/${$page.params.path}". Variable absolute imports are not supported, imports must start with ./ in the static part of the import. For example: import(`./foo/${bar}.js`).
transforming (176) src/lib/components/table/Cell.svelte11:24:35 [vite-plugin-svelte] /Users/x/Documents/windmill/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte:119:4 A11y: Avoid using autofocus
117:     {:else}
118:       <input
119:         autofocus={true}
             ^
120:         bind:value={formatExtension}
121:         class="!h-[32px] py-1 !text-xs !w-64"
transforming (260) src/lib/components/Dev.svelte
warn - The `@variants` directive has been deprecated in Tailwind CSS v3.0.
warn - Use `@layer utilities` or `@layer components` instead.
warn - https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer
transforming (350) node_modules/lucide-svelte/dist/svelte/icons/annoyed.svelte11:24:41 [vite-plugin-svelte] /Users/x/Documents/windmill/frontend/node_modules/simple-svelte-autocomplete/src/SimpleAutocomplete.svelte:1149:14 A11y: <span> with click, keypress handlers must have an ARIA role
1147:             <div class="tags has-addons">
1148:               <span class="tag">{safeLabelFunction(tagItem)}</span>
1149:               <span
                    ^
1150:                 class="tag is-delete"
1151:                 on:click|preventDefault={unselectItem(tagItem)}
11:24:41 [vite-plugin-svelte] /Users/x/Documents/windmill/frontend/node_modules/simple-svelte-autocomplete/src/SimpleAutocomplete.svelte:1136:8 A11y: <div> with dragstart, dragover, dragleave, drop handlers must have an ARIA role
1134:     {#if multiple && hasSelection}
1135:       {#each selectedItem as tagItem, i (valueFunction(tagItem, true))}
1136:         <div
              ^
1137:           draggable={true}
1138:           animate:flip={{ duration: 200 }}
11:24:41 [vite-plugin-svelte] /Users/x/Documents/windmill/frontend/node_modules/simple-svelte-autocomplete/src/SimpleAutocomplete.svelte:1186:6 A11y: <span> with click, keypress handlers must have an ARIA role
1184:     />
1185:     {#if clearable}
1186:       <span
            ^
1187:         on:click={clear}
1188:         on:keypress={(e) => {e.key == "Enter" && clear()}}
11:24:41 [vite-plugin-svelte] /Users/x/Documents/windmill/frontend/node_modules/simple-svelte-autocomplete/src/SimpleAutocomplete.svelte:1203:10 A11y: <div> with click, keypress handlers must have an ARIA role
1201:       {#each filteredListItems as listItem, i}
1202:         {#if listItem && (maxItemsToShowInList <= 0 || i < maxItemsToShowInList)}
1203:           <div
                ^
1204:             class="autocomplete-list-item"
1205:             class:selected={i === highlightIndex}
11:24:41 [vite-plugin-svelte] /Users/x/Documents/windmill/frontend/node_modules/simple-svelte-autocomplete/src/SimpleAutocomplete.svelte:1243:6 A11y: <div> with click, keypress handlers must have an ARIA role
1241:       </div>
1242:     {:else if create}
1243:       <div
            ^
1244:         class="autocomplete-list-item-create"
1245:         on:click={selectItem}
✓ 2333 modules transformed.
x Build failed in 15.27s
error during build:
src/lib/gen/services.gen.ts (10:0): Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead. (Note that you need plugins to import files that are not JavaScript)
file: /Users/x/Documents/windmill/frontend/src/lib/gen/services.gen.ts:10:0

 8: import type { BackendVersionResponse, BackendUptodateResponse, GetLicenseIdResponse, GetOpenApiYamlResponse, GetAudit...
 9: 
10: @Injectable({
    ^
11:     providedIn: 'root'
12: })

RollupError: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.
    at getRollupError (file:///Users/x/Documents/windmill/frontend/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
    at ParseError.initialise (file:///Users/x/Documents/windmill/frontend/node_modules/rollup/dist/es/shared/node-entry.js:11485:28)
    at convertNode (file:///Users/x/Documents/windmill/frontend/node_modules/rollup/dist/es/shared/node-entry.js:13181:10)
    at convertProgram (file:///Users/x/Documents/windmill/frontend/node_modules/rollup/dist/es/shared/node-entry.js:12525:12)
    at Module.setSource (file:///Users/x/Documents/windmill/frontend/node_modules/rollup/dist/es/shared/node-entry.js:14346:24)
    at async ModuleLoader.addModuleSource (file:///Users/x/Documents/windmill/frontend/node_modules/rollup/dist/es/shared/node-entry.js:19003:13)

To reproduce

Go to 'frontend'
run 'npm run build'
See error

Expected behavior

npm run build success

Screenshots

Browser information

chrome 129.0.6668.100

Application version

1.406.0

Additional Context

No response

trusktr commented 2 weeks ago

Hello. Where is the @Injectable({ code? No search results. I'm investigating the same error I have with latest SvelteKit which uses Vite and Rollup.

ubayzuhdan commented 2 weeks ago

Hello. Where is the @Injectable({ code? No search results. I'm investigating the same error I have with latest SvelteKit which uses Vite and Rollup.

The @injectable code is generated after running : npm run generate-backend-client

I also have same issue while running npm run build in frontend on 9 Nov 24 right now.

trusktr commented 5 days ago

@ubayzuhdan Yep, was able to reproduce it like so:

git clone git@github.com:windmill-labs/windmill.git
cd windmill/frontend/
git checkout e4583e9b2366b90f31eb015c4dfc21f07b0bc31e # commit at time of writing
npm clean-install
npm run generate-backend-client
npm run build # error

Here's the full output:

``` ❯ cd windmill/frontend/ ❯ npm ci added 1099 packages, and audited 1101 packages in 57s 215 packages are looking for funding run `npm fund` for details 14 vulnerabilities (3 low, 4 moderate, 7 high) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. ❯ npm run generate-backend-client > windmill-components@1.425.1 generate-backend-client > openapi-ts --input ../backend/windmill-api/openapi.yaml --output ./src/lib/gen --useOptions --enums javascript --format false ✨ Creating Angular client ⚠️ Dependencies used in generated client are missing: @angular/common @angular/core rxjs ✨ Done! Your client is located in: /Users/trusktr/src/windmill-labs+windmill/frontend/src/lib/gen ❯ npm run build > windmill-components@1.425.1 build > vite build 5:12:33 PM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte. svelte-carousel@1.0.25 svelte-tiny-virtual-list@2.0.5 @rgossiaux/svelte-headlessui@2.0.0 simple-svelte-autocomplete@2.5.2 svelte-range-slider-pips@2.3.1 Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details. vite v5.4.0 building SSR bundle for production... [plugin:vite:dynamic-import-vars] [plugin vite:dynamic-import-vars] src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte: invalid import "/api/w/${$workspaceStore}/raw_apps/get_data/${$page.params.version}/${$page.params.path}". Variable absolute imports are not supported, imports must start with ./ in the static part of the import. For example: import(`./foo/${bar}.js`). transforming (118) src/lib/components/apps/editor/AppPreview.svelte5:12:36 PM [vite-plugin-svelte] /Users/trusktr/src/windmill-labs+windmill/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte:37:4 A11y: Avoid using autofocus 35: bind:value={searchTerm} 36: autocomplete="off" 37: autofocus ^ 38: /> 39: {#if searchTerm !== '' && queryParseErrors && queryParseErrors.length > 0} transforming (197) src/lib/components/Toggle.svelte5:12:37 PM [vite-plugin-svelte] /Users/trusktr/src/windmill-labs+windmill/frontend/src/lib/components/schema/EditableSchemaWrapper.svelte:119:4 A11y: Avoid using autofocus 117: {:else} 118: with click, keypress handlers must have an ARIA role 1147:

1148: {safeLabelFunction(tagItem)} 1149: with dragstart, dragover, dragleave, drop handlers must have an ARIA role 1134: {#if multiple && hasSelection} 1135: {#each selectedItem as tagItem, i (valueFunction(tagItem, true))} 1136:

with click, keypress handlers must have an ARIA role 1184: /> 1185: {#if clearable} 1186: {e.key == "Enter" && clear()}} 5:12:42 PM [vite-plugin-svelte] /Users/trusktr/src/windmill-labs+windmill/frontend/node_modules/simple-svelte-autocomplete/src/SimpleAutocomplete.svelte:1203:10 A11y:

with click, keypress handlers must have an ARIA role 1201: {#each filteredListItems as listItem, i} 1202: {#if listItem && (maxItemsToShowInList <= 0 || i < maxItemsToShowInList)} 1203:

with click, keypress handlers must have an ARIA role 1241:

1242: {:else if create} 1243:

Looks like the same error I have here:

https://github.com/sveltejs/svelte/issues/14139

trusktr commented 5 days ago

Ah yeah, as in the linked issue, I can verify that the error is the same even if we convert all instances of code like this,

@Injectable({
    providedIn: 'root'
})
export class SettingsService {

to this (which should be valid),

export
@Injectable({
    providedIn: 'root'
})
class SettingsService {

I can then confirm that if we change the format to the following, the npm run build script will get past the decorator issue, but it will have an error on missing Angular dependencies:

export {SettingsService}; // Workaround: use an entirely separate statement for the export
@Injectable({
    providedIn: 'root'
})
class SettingsService {

After making that change (manually) to the generated service files, now I get the Angular missing error:

Missing angular error:

``` error during build: [vite]: Rollup failed to resolve import "@angular/core" from "/Users/trusktr/src/windmill-labs+windmill/frontend/src/lib/gen/services.gen.ts". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to `build.rollupOptions.external` at viteWarn (file:///Users/trusktr/src/windmill-labs+windmill/frontend/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:65463:17) at onRollupWarning (file:///Users/trusktr/src/windmill-labs+windmill/frontend/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:65495:5) at onwarn (file:///Users/trusktr/src/windmill-labs+windmill/frontend/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:65158:7) at file:///Users/trusktr/src/windmill-labs+windmill/frontend/node_modules/rollup/dist/es/shared/node-entry.js:18625:13 at Object.logger [as onLog] (file:///Users/trusktr/src/windmill-labs+windmill/frontend/node_modules/rollup/dist/es/shared/node-entry.js:20280:9) at ModuleLoader.handleInvalidResolvedId (file:///Users/trusktr/src/windmill-labs+windmill/frontend/node_modules/rollup/dist/es/shared/node-entry.js:19215:26) at file:///Users/trusktr/src/windmill-labs+windmill/frontend/node_modules/rollup/dist/es/shared/node-entry.js:19173:26 ```

I am willing to bet that if we add the missing @angular/core dependency, then npm run build will work, but npm run dev will not, just as is happening to me in https://github.com/sveltejs/svelte/issues/14139.

EDIT: After installing missing Angular dependencies (@angular/core and @angular/common), I now get this error:

src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte (41:10): "CancelablePromise" is not exported by "src/lib/gen/index.ts", imported by "src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte".

So even if decorator build issue is solved, the code that is importing the generated services is wrong (probably outdated, I'm guessing a previous version of the services exported CancelablePromise).

trusktr commented 5 days ago

Ok I finally found out, to properly solve all decorator build issue, make sure to set target in vite.config.js like so:

https://github.com/vitejs/vite/issues/18693#issuecomment-2481855364

As for the other issues, Angular deps need to be added, and the code that depends on the services needs to be adjusted.

windmill-labs / windmill