Issue FAQ
As developers we may encounter some reoccuring issues/bugs during our time at BBC. This page is an attempt to to relieve some of the frustration and limit the fragmentation of who know how to fix which issue and collect them into one central list.
Showpad
For showpad, see the Troubleshooting page.
General
Unicode characters / special characters
Some clients that are multinationals require support for unicode characters (Asian alphabet, technical symbols, ...). Most of the (free) fonts don't provide support to display these characters. Then it is important to provide a close fallback font that has these includ like:
PDF generation
PDF libraries usually don't provide fallback logic form these situations. Making it incredibly difficult Most times the font isn't that important in PDF generation, so it may be safe to use unicode replacements for all values that may contain special characters.
If there is time, it might still be interesting to try to find a way to provide fallback support like the browsers do. We already tried to loop over characters and check for their presence in the fonts, the downside of this is that it breaks the word-break capacity as PDFKit sees every text() call as a seperate word/paragraph.
Kits
Front-end Kit
Starterkit
JS
Handlebars & Showpad config variables
Both HBS variables and our Showpad config path variables follow the same syntax. These worlds can collide quickly when we develop Showpad Apps that contains HBS templates. This can quickly be resolved by escaping config path variables in the templates and remove the escaping right after HBS has rendered so showpad config logic can kick in and not stumble over the escaped path variables.
Escape config path variables inside HBS templates with a simple back-slash \
const values = {
hbsVariable: 'value'
};
// render values in tpl and replace escaped variable in one line
const html = myHbsTpl(values).replaceAll('\\{', '{');
Css / Scss
CSS Backdrop filter does not work on transparant element
Make sure to avoid using opacity to determine the transparency of the element that is supposed to use the backdrop-filter property as this will actually disable the filter. Use a transparent color as background-color instead.
Position Fixed not Fixed
It can happen that when position of an element is set to fixed, it refuses to act as so and decides to act more like an element set as position: absolute. This can be caused by a transform property set on the element in question or one of its parents.
<div style="transform: translate(0, 0)">
<div style="position: fixed; top: 0; left: 0; right: 0;"></div>
</div>
Node
No version ID in project
We usually lock our node version in the repository of our project using a .nvmrc file. But it may happen that some older projects or projects we inherited from external developers dont have any id of the node version they were developed in. There are multiple approaches to follow in order to get a version working quickly.
- Trial en error: change node version and try running the project. If it fails, lower/increase the version number and re-run the project (make sure to also reinstall the node_modules!)
- By package version:
- Check the version of a package in the packas.json file (Works well with sass/node-sass as they have multiple braking changes throughout their release history)
- Find out the release date of that version on the repo of that package
- Check which whas the latest version of node that used to exist by the time that package was released
- Use that node version
Info
Be kind an provide the project with a .nvmrc file once the node version was determined.
Gulp
Gulp command not found
This may happen when you're using gulp in combination with nvm. Like our starterkit explains.
NVM provides completely separated node and npm environments that are not aware of what is and what is not installed in the other environments. If you installed gulp-cli in one version, it will not be present into another.
Solution
- Make sure to be on the right node version of your project. Every modern project come with a .nvmrc file so instantly match your node version with the one that was used when developing the project.
nvm use
- If the issue still persists, it means that the specific node version does not have gulp-cli installed. This is necessary for node to know how to interpret the Gulp commands. Install the package globally and things should work as expected.
npm install -g gulp-cli
Links activating other links
Browsersync may struggle to track clicks across different tabs running the project within varying media queries. This issue arises because different viewport sizes can lead to discrepancies in the DOM structure. Consequently, clicking a link on one tab might trigger a click on an incorrect link in another tab. This behavior can create the illusion of “spooky” actions, where a click on one link seemingly causes another link on the same page to be activated.
To avoid extended debugging sessions and frustration, ensure that all other tabs are closed before retrying. This precaution helps eliminate the misleading behavior, which typically leaves no trace in the codebase.
GitHub Actions / CI
npm ci fails with Git SSH errors
When a GitHub Actions workflow runs npm ci and the project has private npm dependencies referenced via SSH URLs (e.g. ssh://git@github.com/BBCnv/bbcdev.front-end-kit.git), the job will fail with:
npm ERR! code 128
npm ERR! fatal: Could not read from remote repository.
See the full setup and recovery guide: GitHub Actions: Private npm Dependencies over SSH
Vite
SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=706847ca' does not provide an export named 'default'
.vite contains caches of compiled files so that Vite is able to serve changes quicker. These files can have a tendency to be out of sync with the source files, causing this error. To solve this error:
- Stop the process
- run
rm -rf node_modules/.vite - Start the process again
As one command in the terminal using our gulp compiler
rm -rf node_modules/.vite && gulp serve
or for showpad installations
rm -rf node_modules/.vite && gulp serveShowpad