---
title: How to Upgrade to StealJS 1
description: Learn how to upgrade a Angular 2, CanJS, jQuery, React, or Vue project from StealJS 0.16.x to 1.x!
image: http://www.bitovi.com/hubfs/stealbkg.png
---
- 
[AI implementation](https://www.bitovi.com/services/ai-consulting)
- 
[Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting)
- 
[Project Management](https://www.bitovi.com/services/agile-project-management-consulting)
- 
[Product Design](https://www.bitovi.com/services/product-design-consulting)
- 
[Frontend development](https://www.bitovi.com/services/frontend-development-consulting)
- [View more
→
](https://www.bitovi.com/digital-consulting-services)
We're Experts in...
- [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting)
- [AI training](https://www.bitovi.com/ai-training-for-software-engineers)
- [Angular](https://www.bitovi.com/services/frontend/angular-consulting)
- [Design systems](https://www.bitovi.com/services/axure-figma-migration)
- [React](https://www.bitovi.com/services/frontend/react-consulting)
- [Temporal](https://www.bitovi.com/services/backend/temporal-consulting)
- [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native)
- [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting)
Showcase
[View case study](https://www.bitovi.com/en/bitovi-yum-case-study)
More Projects
- [](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign)
- [](https://design.bitovi.com/christies)
- [](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp)
- [View more
→
](https://www.bitovi.com/our-software-consulting-work)
Open Source Tools
We build powerful tools and open source them to support the community.
[See what we've built →](https://www.bitovi.com/open-source)
- [
BlogWe post about delivering products and solving problems.
](https://www.bitovi.com/blog)
- [
PartnershipsLearn about Bitovi's technology partners
](https://www.bitovi.com/partnerships)
- [.svg)
AcademyFree courses to build delivery skills
](https://www.bitovi.com/academy)
- [
Open source toolsUse or contribute to our community
](https://www.bitovi.com/open-source)
Let's Connect
- [
Discord
](https://discord.gg/J7ejFsZnJ4)
- [
LinkedIn
](https://www.linkedin.com/company/bitovi/)
- [
GitHub
](https://github.com/bitovi/)
Name *
Work Email *
Phone
What's your project?
Send
### Contact Us
(312) 620-0386contact@bitovi.com
January 20, 2017
# How to Upgrade to StealJS 1
Learn how to upgrade a Angular 2, CanJS, jQuery, React, or Vue project from StealJS 0.16.x to 1.x!
Chasen Le Hara
Share:
[ ](https://twitter.com/intent/tweet?text=) [ ](http://reddit.com/submit?url=)
StealJS 1 has been [released](https://www.bitovi.com/blog/stealjs-1.0-release)! It’s a major new version with some breaking changes, but our [migration guide](https://stealjs.com/docs/StealJS.topics.migrating-one.html) has everything you need to upgrade your app or plugin today.
It is so easy to upgrade a StealJS 0.16.x project to StealJS 1.x that in this post we’re going to upgrade *five* projects:
- [Quick Start example (with just jQuery)](https://www.bitovi.com/blog/how-to-upgrade-to-stealjs-1#quick-start-example)
- [Angular 2 example](https://www.bitovi.com/blog/how-to-upgrade-to-stealjs-1#angular-2-example)
- [CanJS example](https://www.bitovi.com/blog/how-to-upgrade-to-stealjs-1#canjs-example)
- [React example](https://www.bitovi.com/blog/how-to-upgrade-to-stealjs-1#react-example)
- [Vue.js example](https://www.bitovi.com/blog/how-to-upgrade-to-stealjs-1#vuejs-example)
## Quick Start example
We’ll start with a [really simple example](https://github.com/stealjs/quick-start) that shows using StealJS to load jQuery and some CSS.
Because both steal and steal-tools are devDependencies in package.json, we’ll run the following to [upgrade both packages](https://stealjs.com/docs/StealJS.topics.migrating-one.html#getting-stealjs-1):
```
npm install steal@1 steal-tools@1 --save-dev
```
Now the latest 1.x versions of [steal](https://www.npmjs.com/package/steal) and [steal-tools](https://www.npmjs.com/package/steal-tools) are installed!
This project uses npm run build to create the distributable files; after running that command, we get the following error:
```
ERROR: Error loading "stealjs@1.0.0#styles.css" at file:/quick-start/styles.css.js
Error loading "stealjs@1.0.0#styles.css" from "stealjs@1.0.0#index" at file:/quick-start/index.js
ENOTDIR: not a directory, open '/quick-start/styles.css/index.js'
ERROR:
Build failed
```
StealJS 1 no longer includes the [steal-css](https://www.npmjs.com/package/steal-css) plugin in the steal npm package, so we’ll need to install it as a dev-dependency and use the [new plugins configuration](https://stealjs.com/docs/StealJS.topics.migrating-one.html#plugins-configuration).
First, let’s install steal-css from npm:
```
npm install steal-css --save-dev
```
Next, we’ll [add the plugins configuration](https://github.com/stealjs/steal-angular2-example/blob/83fcb1bcbf6bd3b25a4ef5c3995cfdfc696c9db9/package.json#L13) to package.json (and [use steal instead of system](https://github.com/stealjs/steal-angular2-example/blob/83fcb1bcbf6bd3b25a4ef5c3995cfdfc696c9db9/package.json#L8)):
```
{
...
"steal": {
...
"plugins": ["steal-css"]
}
}
```
The last thing we’ll do to take advantage of StealJS 1 is use the [pre-configured](https://stealjs.com/docs/StealJS.topics.migrating-one.html#easier-production-use) steal.production.js file.
In our index.html, we’ll replace this:
```
```
With this:
```
```
Less code and configuration, hurrah!
For this simple example, those are the only changes required to upgrade our project to StealJS 1. You can see all of these changes in [a pull request in the quick-start project](https://github.com/stealjs/quick-start/pull/8).
## Angular 2 example
The [StealJS Angular 2 example](https://github.com/stealjs/steal-angular2-example) includes steal ^0.16.12 in its package.json dependencies, so we’ll [upgrade](https://stealjs.com/docs/StealJS.topics.migrating-one.html#getting-stealjs-1) it to 1.x:
```
npm install steal@1 --save
```
Now that the latest 1.x version of [steal](https://www.npmjs.com/package/steal) is installed, if we load the index.html page in a browser, we’ll see this error in the console: `Error loading "styles.less" from "main"`
StealJS 1 no longer includes the [steal-less](https://www.npmjs.com/package/steal-less) plugin in [the steal npm package](https://www.npmjs.com/package/steal), so we’ll need to install it as a dev-dependency and use the [new plugins configuration](https://stealjs.com/docs/StealJS.topics.migrating-one.html#plugins-configuration).
First, let’s install steal-less from npm:
```
npm install steal-less --save-dev
```
Next, we’ll [add the plugins configuration](https://github.com/stealjs/steal-angular2-example/blob/83fcb1bcbf6bd3b25a4ef5c3995cfdfc696c9db9/package.json#L13) to package.json (and [use steal instead of system](https://github.com/stealjs/steal-angular2-example/blob/83fcb1bcbf6bd3b25a4ef5c3995cfdfc696c9db9/package.json#L8)):
```
{
...
"steal": {
...
"plugins": ["steal-less"]
}
}
```
After those changes, our project will load correctly! You can see all of these changes as part of [a pull request](https://github.com/stealjs/steal-angular2-example/pull/2) that upgraded the project to the latest version of Angular 2 and StealJS.
## CanJS example
The [StealJS CanJS example](https://github.com/stealjs/steal-canjs-example) also includes steal ^0.16.12 in its package.json dependencies, so we’ll [upgrade](https://stealjs.com/docs/StealJS.topics.migrating-one.html#getting-stealjs-1) it to 1.x:
```
npm install steal@1 --save
```
Now that the latest 1.x version of [steal](https://www.npmjs.com/package/steal) is installed, if we load the index.html page in a browser, we’ll see this error in the console: `Error loading "index.stache!stache" from "app"`
When we [migrated to CanJS 3](http://canjs.com/doc/migrate-3.html), we installed steal-stache as a dependency, and in StealJS 1 we need to use the [new plugins configuration](https://stealjs.com/docs/StealJS.topics.migrating-one.html#plugins-configuration) for it to work correctly. StealJS 1 also no longer includes the [steal-less](https://www.npmjs.com/package/steal-less) plugin in [the steal npm package](https://www.npmjs.com/package/steal), so we’ll need to install it as a dev-dependency.
First, let’s install steal-less from npm:
```
npm install steal-less --save-dev
```
Next, we’ll [add the plugins configuration](https://github.com/stealjs/steal-angular2-example/blob/83fcb1bcbf6bd3b25a4ef5c3995cfdfc696c9db9/package.json#L13) to package.json (and [use steal instead of system](https://github.com/stealjs/steal-angular2-example/blob/83fcb1bcbf6bd3b25a4ef5c3995cfdfc696c9db9/package.json#L8)):
```
{
...
"steal": {
...
"plugins": ["steal-less", "steal-stache"]
}
}
```
After those changes, our project will load correctly! You can see all of these changes in [a single pull request](https://github.com/stealjs/steal-canjs-example/pull/5).
## React example
The [StealJS React example](https://github.com/stealjs/react-example) includes steal ^0.16.4 in its package.json dependencies, so we’ll [upgrade](https://stealjs.com/docs/StealJS.topics.migrating-one.html#getting-stealjs-1) it to 1.x:
```
npm install steal@1 --save
```
Now that the latest 1.x version of [steal](https://www.npmjs.com/package/steal) is installed, if we load the index.html page in a browser, we’ll see this error in the console: `Error loading "steal-react-example@1.0.0#world.jsx"`
Previous versions of StealJS would load the package.json files for all of a project’s immediate dependencies, which isn’t as efficient as the [new plugins configuration](https://stealjs.com/docs/StealJS.topics.migrating-one.html#plugins-configuration). In StealJS 1, we’ll [add the plugins configuration](https://github.com/stealjs/react-example/blob/0a9f24c1145f626972584c979d9a317d3601bf66/package.json#L22) with [steal-jsx](https://www.npmjs.com/package/steal-jsx) to package.json (and [use steal instead of system](https://github.com/stealjs/react-example/blob/0a9f24c1145f626972584c979d9a317d3601bf66/package.json#L17)):
```
{
...
"steal": {
...
"plugins": ["steal-jsx"]
}
}
```
After those changes, our project will load correctly! You can see all of these changes as part of [a single commit](https://github.com/stealjs/react-example/commit/56fcba6cfa975bd81518661a3e1029bde4a873ca).
## Vue.js example
The [StealJS Vue.js example](https://github.com/stealjs/vuejs-example) includes StealJS 0.16.x in its package.json dependencies, so we’ll [upgrade](https://stealjs.com/docs/StealJS.topics.migrating-one.html#getting-stealjs-1) to 1.x:
```
npm install steal@1 steal-tools@1 --save
```
Now that the latest 1.x version of [steal](https://www.npmjs.com/package/steal) is installed, if we load the index.html page in a browser, we’ll see this error in the console: `Error loading "steal-vuejs-example@1.0.0#styles.less"`
StealJS 1 no longer includes the [steal-less](https://www.npmjs.com/package/steal-less) plugin in [the steal npm package](https://www.npmjs.com/package/steal), so we’ll need to install it as a dev-dependency and use the [new plugins configuration](https://stealjs.com/docs/StealJS.topics.migrating-one.html#plugins-configuration).
First, let’s install steal-less from npm:
```
npm install steal-less --save-dev
```
Next, we’ll [add the plugins configuration](https://github.com/stealjs/vuejs-example/blob/3936c6512d632e9a0a41f57b32f0b2d306ca7296/package.json#L18-L20) to package.json (and [use steal instead of system](https://github.com/stealjs/vuejs-example/blob/3936c6512d632e9a0a41f57b32f0b2d306ca7296/package.json#L11)):
```
{
...
"steal": {
...
"plugins": ["steal-less"]
}
}
```
After those changes, our project will load correctly! You can see all of these changes as part of [a pull request](https://github.com/stealjs/vuejs-example/pull/1) that upgraded the project to the latest version of Vue.js 2 and StealJS.
## Migrate today
The [migration guide](https://stealjs.com/docs/StealJS.topics.migrating-one.html) is a great resource for upgrading your project to StealJS 1 today. In it, you’ll find all of the information that was used in this blog post, and more!
If you have any questions about migrating, please post in our [forums](http://forums.donejs.com/c/stealjs) or [Gitter chat](https://gitter.im/stealjs/steal)!
[ open source ](https://www.bitovi.com/blog/topic/open-source)[ development ](https://www.bitovi.com/blog/topic/development)[ stealjs ](https://www.bitovi.com/blog/topic/stealjs)
Previous Post
 [ 3 Ways Knitting and Web Design Go Hand-in-Hand ](https://www.bitovi.com/blog/3-ways-knitting-and-web-design-go-hand-in-hand)
Next Post
 [ How To Conditionally Load Modules with StealJS ](https://www.bitovi.com/blog/how-to-conditionally-load-modules-with-stealjs)
```json
{
"@context" : "http://schema.org",
"@type" : "Organization",
"address" : {
"@type" : "PostalAddress",
"addressCountry" : "United States",
"addressLocality" : "Libertyville",
"addressRegion" : "IL",
"postalCode" : "60048",
"streetAddress" : "1134 Pine Tree Lane "
},
"alternateName" : "Bitovi",
"areaServed" : {
"@type" : "GeoCircle",
"geoMidpoint" : {
"@type" : "GeoCoordinates",
"latitude" : "41.8781",
"longitude" : "87.6298"
},
"geoRadius" : "5000 km"
},
"description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company",
"email" : "contact@bitovi.com",
"image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png",
"logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg",
"mainEntityOfPage" : {
"@id" : "https://www.bitovi.com/blog/how-to-upgrade-to-stealjs-1",
"@type" : "WebPage",
"description" : "Learn how to upgrade a Angular 2, CanJS, jQuery, React, or Vue project from StealJS 0.16.x to 1.x!"
},
"naics" : "541511",
"name" : "Bitovi Web App Consulting",
"sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ],
"telephone" : "312-620-0386",
"url" : "http://bitovi.com"
}
```
```json
{
"@context" : "http://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Chasen Le Hara"
},
"dateModified" : "January 24, 2017, 10:46:18 PM",
"datePublished" : "2017-01-20 23:37:02",
"description" : "Learn how to upgrade a Angular 2, CanJS, jQuery, React, or Vue project from StealJS 0.16.x to 1.x!",
"headline" : "How to Upgrade to StealJS 1",
"image" : {
"@type" : "ImageObject",
"url" : "http://www.bitovi.com/hubfs/stealbkg.png"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg"
},
"name" : "Bitovi"
}
}
```