Solving ESLint errors

If you are like us and use a linter (if you don’t, please do), you’ll end up with many errors/warnings when running your application…

✖ 1066 problems (1066 errors, 0 warnings)

Most of those errors in our case, I bet also in yours, were because of the ember/new-module-imports rule.

Since RFC #176 Javascript Modules was accepted and merged early last year, amongst other things, the way we import libraries in ember was changed substantially, enabling tree-shaking which prevents unused code from being packed in your build. This reduces your build size, as well as the loading time of your application, so I wouldn’t recommend you to just ignore the warnings.

Awesome! But I don’t want to change everything by hand!!!

Here’s where ember-modules-codemod comes to play.

This codemod uses jscodeshift to update an Ember application to import framework code using module syntax, as proposed in RFC 176: JavaScript Module API. It can update apps that use the global Ember , and will eventually also support apps using ember-cli-shims.

Edit 10/2018

Now you can also use ember-cli-update which will download and run all available codemods for your version. Neat huh?

ember-cli-update --run-codemods

Or just run the modules codemod

npm install ember-modules-codemod -g

cd my-ember-app

ember-modules-codemod

Or if you use npx

npx ember-modules-codemod

Check MODULE_REPORT.md to see what couldn’t be changed automatically

You can now run ESLint again and you’ll see most, if not all, of the errors gone.

Congratulations, you have successfully upgraded Ember!

At this point, you can run your application and test if everything works as expected. Good luck!