Skip to content
Home

ESM and transpiling

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

Bundles

  • ESM bundle with modern JavaScript syntax
  • UMD bundle 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

Because the package is published with "type": "module", Node.js treats its .js files as ES modules by default. This means you should use import/export syntax, and require() will not work unless you target the /cjs build.

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' }
  }