Skip to content
Home

Frequently Asked Questions (FAQ)

How to enable lint-staged?

Create a file called .env.local in the root of the repo (side-by-side to the .git folder), and put LINT_STAGED=1 inside:

# File: .env.local
LINT_STAGED=1

Dependency issues

Babel

Due to this bug: https://github.com/babel/babel/issues/11394 we add .png,.snap so they not get copied: --extensions '.js,.ts,.tsx,.png,.snap'

Yarn PnP

Currently, Eufemia uses yarn with node_modules.

When switching over to Yarn PnP, there are some issues:

  • Storybook: 
    ERROR in eufemia/.yarn/__virtual__/@dnb-eufemia-virtual-761b82657c/1/packages/dnb-eufemia/src/components/slider/style/dnb-range.scss (eufemia/.yarn/__virtual__/css-loader-virtual-37c5c374e4/0/cache/css-loader-npm-5.2.7-e1e8b8d16f-fb0742b30a.zip/node_modules/css-loader/dist/cjs.js!eufemia/.yarn/__virtual__/sass-loader-virtual-577853f541/0/cache/sass-loader-npm-10.2.0-91ed64638b-d53212e5d1.zip/node_modules/sass-loader/dist/cjs.js!eufemia/.yarn/__virtual__/@dnb-eufemia-virtual-761b82657c/1/packages/dnb-eufemia/src/components/slider/style/dnb-range.scss)
    Module build failed (from eufemia/.yarn/__virtual__/sass-loader-virtual-577853f541/0/cache/sass-loader-npm-10.2.0-91ed64638b-d53212e5d1.zip/node_modules/sass-loader/dist/cjs.js):
    SassError: File to import not found or unreadable: eufemia/.yarn/__virtual__/@dnb-eufemia-virtual-761b82657c/1/packages/dnb-eufemia/src/style/components/imports.scss.
            on line 6 of ../../.yarn/__virtual__/@dnb-eufemia-virtual-761b82657c/1/packages/dnb-eufemia/src/components/slider/style/dnb-range.scss
    >> @import '../../../style/components/imports.scss';
  • Gatsby 
    gatsby-plugin-mdx tried to access mkdirp, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Gatsby v4

In order to ensure defaults and supports es6-module is not targeting IE11, we run a newer version of browserslist.

{
  "resolutions": {
    "gatsby/browserslist": "4.21.4"
  }
}

Gatsby v4 uses socket.io v3 that has an issue when running all visual tests in a batch locally on a development build. To mitigate it, we have installed a newer version of socket.io:

{
  "resolutions": {
    "gatsby/socket.io": "4.6.1"
  }
}

svg2vectordrawable

svg2vectordrawable uses an very old version of svgo that did not work with newer versions of Node.js.

{
  "resolutions": {
    "svg2vectordrawable/svgo": "2.3.0"
  }
}

MDX v2

In MDX v1 the Portal used an MDX template (./templates/mdx.js) with the createPage API. This is currently not the case anymore. Instead, the "PortalLayout" is used to wrap .mdx pages inside the wrapPageElement API. This is due to the JavaScript heap out of memory error when using templates.

Visual tests and Playwright

Jest does start several works at the same time. When we simulate states on e.g. ToggleButton and Button – Playwright (v1.31.2) struggles to handle this. Some of the hover or focus tests will fail. To ensure Jest we never execute several workers as the same time, we set --maxWorkers=1.

Installing screenshot browser

For running screenshot tests (visual tests), a headless Firefox browser is needed.

In normal circumstances, the browser will be installed automatically via yarn install – but to either upgrade to a newer version, or to wipe out existing versions and run the install manually, you can run this commands, depending on your needs:

yarn workspace @dnb/eufemia playwright uninstall --all
yarn workspace @dnb/eufemia add -D @playwright/test
yarn workspace @dnb/eufemia playwright install firefox


yarn workspace dnb-design-system-portal playwright uninstall --all
yarn workspace dnb-design-system-portal add -D @playwright/test
yarn workspace dnb-design-system-portal playwright install firefox

Alternative install: skip authentication

But, since Node.js and corporate proxy do not enjoy each other's company, this might fail with a Error: unable to get local issuer certificate. In that case, your only option might be to disable all authentication for this command.

NODE_TLS_REJECT_UNAUTHORIZED=0 yarn workspace @dnb/eufemia playwright install firefox

Alternative install: manually

Or, in the very worst case, you can manually download the zip file that yarn workspace @dnb/eufemia playwright install firefox attempts to download, and extract the file ("Nightly" for Firefox) to the folder indicated when yarn test:screenshots fails.

How can I make faster builds?

This is only meant for "setup testing" purposes! In order to make faster local builds, you can:

  • Inside gatsby-config.js rename all sourcing from /docs to /docs_dummy

Run yarn workspace dnb-design-system-portal build:visual-test

I get Gatsby 404 Not Found on the pages I work on

  • Try cleaning cache: yarn workspace dnb-design-system-portal gatsby clean
  • Try running yarn build again