Problem with using Govuk-Frontend npm package in Oracle JET Application

Question

Problem with 'Get started' (https://frontend.design-system.service.gov.uk/get-started/)

I am trying to use Govuk-Frontend npm package in Oracle JET Application. I have included the package in path_mapping.json and main.js. When I try to use them in js file I am getting an error saying "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'initAll')".

js file to be called from the package in node modules is all.js ..Directory structure in node modules for the package is Govuk-Frontend/govuk/all.js I have renamed all.js inside the package to govuk.js.

Error=>

path_mapping.json =>

main.js in requirejs.config=>

dashboard.js =>

How can I call initAll() function from Govuk-Frontend npm package?

Answer 1

Change your path_mapping.json to:

"govuk": {
  "cdn": "3rdparty",
  "cwd": "node_modules/govuk-frontend/govuk",
  "debug": {
    "src": ["**"],
    "path": "libs/govuk",
    "cdnPath": "govuk"
  },
  "release": {
    "src": ["**"],
    "path": "libs/govuk",
    "cdnPath": "govuk"
  }
}

add in your index.html

<script src="js/libs/govuk/all.js"></script>
<script>
    window.GOVUKFrontend.initAll()
</script>