Skip to content
Home

ESM and transpiling

To support every modern front end environment, the @dnb/eufemia supports different transpiled module formats:

Bundles

  • ESM with modern JavaScript syntax
  • UMD with modern JavaScript syntax

Default module format

The @dnb/eufemia uses ESM as the default module format:

// Imports only the code needed for the button
import { Button } from '@dnb/eufemia' // ESM transpiled for broad browser compatibility
import { Button } from '@dnb/eufemia/es' // Modern JavaScript syntax version

CommonJS (CJS)

Node.js may use RequireJS and has CommonJS as their default module format, depending on your version and flags.

SSR

In case you are using the @dnb/eufemia in a environment that cant use ESM, you can import or require everything from the /cjs subfolder:

// Components
import { Button } from '@dnb/eufemia/cjs'
const { Button } = require('@dnb/eufemia/cjs/components')
const Button = require('@dnb/eufemia/cjs/components/Button')


// Styles
import '@dnb/eufemia/cjs/style'
require('@dnb/eufemia/cjs/style')

Jest and ESM (Node testing environments)

Older Jest versions uses still CommonJS as the default module format. If you use the default @dnb/eufemia imports, then you get a mismatch between ES module and CommonJS formats. To ensure that Jest transforms your code in to CJS, you can use the following Jest configuration --moduleNameMapper

jest --moduleNameMapper '{"@dnb/eufemia(.*)":"@dnb/eufemia/cjs$1"}'

or in a jest.config.js or jest.preset.js file:

  module.exports = {
    ...
    moduleNameMapper: { '@dnb/eufemia(.*)': '@dnb/eufemia/cjs$1' }
  }