vite build failed with 'SyntaxError: Unexpected token'

Flow
1

Since today morning, my Vaadin24 build failed with the following trace:

10:22:14  INFO       using 'node node_modules/npm/bin/npm-cli.js --no-update-notifier --no-audit --scripts-prepend-node-path=true --ignore-scripts install' for frontend package installation
10:22:14  WARN c.v.f.s.frontend.TaskUpdatePackages      package-lock.json is missing from this project. This may cause the npm package installation to take several minutes. It is recommended to keep the package-lock.json file persistently in your project. Please stand by...
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
10:25:07  INFO c.v.f.s.frontend.TaskUpdatePackages      Frontend dependencies resolved successfully.
10:25:08  INFO c.v.f.s.frontend.TaskCopyFrontendFiles   Copying frontend resources from jar files ...
10:25:08  INFO c.v.f.s.frontend.TaskCopyFrontendFiles   Visited 24 resources. Took 17 ms.
10:25:10  INFO c.v.f.s.frontend.TaskRunDevBundleBuild   Creating a new express mode bundle. This can take a while but will only run when the project setup is changed, addons are added or frontend files are modified
error during build:
SyntaxError: Unexpected token } in JSON at position 78
    at JSON.parse (<anonymous>)
    at getThemeProperties (vite.config.ts:524:15)
    at handleThemes (vite.config.ts:498:29)
    at findThemeFolderAndHandleTheme (vite.config.ts:467:23)
    at processThemeResources (vite.config.ts:454:5)
    at config (vite.config.ts:1027:7)
    at runConfigHook (file://node_modules/vite/dist/node/chunks/dep-ae3fae1b.js:62364:31)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolveConfig (file:///node_modules/vite/dist/node/chunks/dep-ae3fae1b.js:61865:14)
    at async build (file://node_modules/vite/dist/node/chunks/dep-ae3fae1b.js:44501:20)
2

What does your theme.json contain?

3

{
“lumoImports” : [ “typography”, “color”, “spacing”, “badge”, “utility” ],
}

4

Does it work if you remove the trailing , ?

5

yeah, I also see that comma immediately :slightly_smiling_face:

6

without it works

7

maybe a hint in the error message for the errorneous file would be helpful

8

But the main reason was this error:

java.lang.IllegalStateException: Asset '/line-awesome/dist/line-awesome/css/line-awesome.min.css' is not found in project frontend directory, default development bundle or in the application bundle 'src/main/dev-bundle/assets/'.
Verify that the asset is available in 'frontend/themes/hwgleer-we/' directory and is added into the 'assets' block of the 'theme.json' file.
Else verify that the dependency 'com.vaadin:vaadin-dev-bundle' is added to your project.
9

There a try to tweak theme.json…

10

I use line awesome icons in mainlayout / AppNavItem and include them with @NpmPackage(value = "line-awesome", version = "1.3.0")in my root application class…

11

Yeah you need something like

  "assets": {
    "line-awesome": {
      "dist/line-awesome/css/**": "line-awesome/dist/line-awesome/css",
      "dist/line-awesome/fonts/**": "line-awesome/dist/line-awesome/fonts"
    }
  }

in theme.json

12

Alternatively you can check out a new start.vaadin.com project and use the addon it uses instead. Then the icons are unrelated to the theme