Migration guide: Updating npm packages to new @ongov namespace

Learn how to update your projects to reference the new @ongov namespace.

Introduction

The Ontario Design System’s npm namespace has transitioned from @ontario-digital-service to @ongov. This change is part of our ongoing efforts to improve package organization and provide a unified experience across our developer resources.

All packages previously published under @ontario-digital-service are now available under @ongov. This guide will walk you through the steps required to update your projects to use the new namespace.

Affected packages

All packages that were under the @ontario-digital-service namespace are now under the @ongov namespace. This includes:

• @ontario-digital-service/ontario-design-system-design-tokens
• @ontario-digital-service/ontario-design-system-global-styles
• @ontario-digital-service/ontario-design-system-complete-styles
• @ontario-digital-service/ontario-design-system-component-library
• @ontario-digital-service/ontario-design-system-component-library-angular
• @ontario-digital-service/ontario-design-system-component-library-react

Steps to migrate

1. Update dependencies in package.json

You need to update your package.json file to reflect the new namespace for all affected dependencies.

Before:

{
    "dependencies": {
        "@ontario-digital-service/ontario-design-system-design-tokens": "^4.1.0"
    }
}

After:

{
    "dependencies": {
        "@ongov/ontario-design-system-design-tokens": "^4.2.0"
    }
}

2. Re-install updated packages

After updating your package.json, re-install your dependencies to fetch the packages from the new namespace:

npm install

3. Update import statements in your code

All import statements and SASS references that reference the old namespace need to be updated.

JavaScript/TypeScript imports

Before:

import { ontario-button } from '@ontario-digital-service/ontario-design-system-component-library';

After:

import { ontario-button } from '@ongov/ontario-design-system-component-library';

SASS references

If your project uses SASS and references our packages, you’ll need to update any @use or @forward statements that include the old namespace.

Before:

@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@forward '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/theme.scss';

After:

@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/theme.scss';

5. Run your test suite

Execute your project’s tests to ensure that everything is working as expected.

npm test

6. Update configuration files

If you have configuration files (e.g., Webpack, Babel, ESLint) that reference the old namespace, update them as well.

Webpack alias example

Before:

alias: {
  '@ontario-digital-service': path.resolve(__dirname, 'node_modules/@ontario-digital-service')
}

After:

alias: {
  '@ongov': path.resolve(__dirname, 'node_modules/@ongov')
}

Troubleshooting

• Missing packages: If you encounter errors about missing packages, double-check that all instances of @ontario-digital-service have been updated.

• Cache issues: Try clearing your npm cache: npm cache clean --force

• Stale modules in node_modules directory: If you are experiencing unexpected behaviour or errors after updating the namespace, it might be due to outdated modules in your node_modules folder. Removing the node_modules directory and reinstalling all packages can resolve these issues.

  rm -rf node_modules
  npm install

Getting help

If you need assistance, please reach out through the following channels:

• Email: design.system@ontario.ca
• GitHub Issues: @ongov/ods-web-components