---
# System prepended metadata

title: Lumos Migration Guide

---

# Lumos Migration Guide
We have done some major pipeline rewrite to Lumos package output, as a result, we now support both ESM and CJS output and targeting ES2017 as the output JavaScript version. In addition, one benefit of using bundlers are we are able to set any wanted dependencies as the external resource which helps us to remove some boilerplate from the initial setup to use Lumos in the project. 

## What does it mean to the existing projects using Lumos?

### Import more strict
If you have been using Lumos strictly stick to the top level reference, there shouldn't be anything that needed to fix. 

```jsx=
// Correct - no change needed from upgrading Lumos
import { Button } from '@lumos/core';
```

If you happen to use some Lumos internal typings or object references, you need to remove them, and either manually create those typings in your project or make a pull request to expose them to the public Lumos API and make sure to write down the reason from an API stand of point instead of just because the project needs it. 

```jsx=
// Breaking - AlertTypes is no longer accessible from this path as we are not serving 
// bundle files. You need to make a pull request and explain why this type is good
// to have. 
import { AlertTypes } from '@lumos/core/lib/components/Alert/Alert.styles';
```

### Boilerplate removed

Previous Lumos version, we must ask Jest to transpile Lumos from ESM to CJS in order for it to be able to load any Lumos source file. Now we also support CJS output from Lumos, we could safely remove this configuration from jest if your existing project has it:

```json=
// No longer needed
"transformIgnorePatterns": [
  "/node_modules/(?!@lumos/core)"
],
```

As we now use bundlers, we it take cares of any CSS and external dependencies referencing even during the test runtime. We could safely remove the mock files and jest mocks:


```
# You could now remove this following directory and file from the project.
|--__mocks__
  |--fileMock.js
```
```json=
// You could now remove these settings from the jest setup
"moduleNameMapper": {
  "\\.(css)$": "<rootDir>/__mocks__/fileMock.js",
},
"transform": {
  "^.+\\.tsx?$": "ts-jest"
}
```

