MsdfGenerator issue on AWS CodeBuild CI/CD platform

[tuncayyildirtanuk]

When configuring Vite via blitsVitePlugins, I encountered the following issue exclusively on the AWS CodeBuild platform.

As a workaround, I used only the preCompiler and temporarily removed the msdfGenerator.

import { defineConfig } from 'vite';
import blitsVitePlugins from '@lightningjs/blits/vite';

// Get the preCompiler plugin
// msdfGenerator not working as expected. Raised an issue on the Blits repo
const preCompilerPlugin = blitsVitePlugins.find((item) => item.name === 'preCompiler');

/* eslint-disable no-unused-vars */
export default defineConfig(({ command, mode, ssrBuild }) => {
  return {
    base: '/', // Set to your base path if you are deploying to a subdirectory (example: /myApp/)
    plugins: [preCompilerPlugin],
    resolve: {
      mainFields: ['browser', 'module', 'jsnext:main', 'jsnext'],
    },
   ....
  };
});

Should we include msdfGenerator when building a Blits app?

[michielvandergeest]

@tuncayyildirtanuk Thanks for this report. From what I can tell, this error seems to be generated by the msdf-generator package and not per se by Blits. Obviously the Blits provided vite plugin is your gateway into this package, so it's still a valid issue to be aware of from the Blits perspective.

As an immediate solution / workaround, you could place the generated msdf font files (png and json) into your publics/fonts folder and reference those in the launch settings. That way the msdf generation step is skipped all together.

As for the error itself, it seems like a similar one that's been reported here: lightning-js/msdf-generator#5
That one may be related to the node version used (16 whereas, 18 is marked as minimum). Could you verify the node version used in AWS CodeBuild platform?

[tuncayyildirtanuk]

Yes it is same issue like lightning-js/msdf-generator#5

Node version is 18.19.0

Also I guess minimum node version might be 20.9.0 for the renderer perspective?

[tuncayyildirtanuk]

I have updated and tried after the following change. Same issue.

[michielvandergeest]

You should be able to leave your font launch setting the same, just placing the generated json and png file in the correct location alongside your ttf should be enough.

Alternatively you can specify the location to the json file and the png file explicitly, like this:

{
      family: 'lato',
      type: 'msdf',
      png: 'fonts/lato.png',
      json: 'fonts/lato.json',
},

[tuncayyildirtanuk]

I have attempted the following scenarios, but the issue persists:

1. Copied the OpenSans-Medium.msdf.json and OpenSans-Medium.msdf.png files to the public/fonts folder.
2. Updated the launch configuration as follows:

[tuncayyildirtanuk]

Hi, I just tested via blits version 1.0.2.

I would like to share results.

CI/CD Result:

Public font files

Font files configuration.

[michielvandergeest]

Ah, I don't think you can have 2 families with the same name in your fonts config. If you rename the msdf font to a different family name, it should work I think.

[michielvandergeest]

As for the font generation error, it seems like this is related to the nodeJS version (lightning-js/msdf-generator#5 (comment))