diff --git a/.eslintignore b/.eslintignore
index 0c9a563ff9..f81c07db10 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,3 +3,4 @@ dist/
 dist-es5-module/
 docs/
 dev/app.js
+scripts/karma.conf.js
diff --git a/.eslintrc b/.eslintrc
index 27b9cf8651..cffc9a674e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,6 +1,10 @@
 {
   "extends": "algolia",
   "rules": {
-    "no-var": 2
+    "no-var": 2,
+    "algolia/relative-require": 2,
+    "algolia/force-import-root": 2,
+    "algolia/no-require": 1,
+    "algolia/no-module-exports": 2
   }
 }
diff --git a/dev/app.js b/dev/app.js
index a80309bf9b..47e8e80d56 100644
--- a/dev/app.js
+++ b/dev/app.js
@@ -1,5 +1,5 @@
 // force using index because package 'main' is dist-es5-module/
-var instantsearch = require('../index');
+var instantsearch = require('../index.js');
 
 var search = instantsearch({
   appId: 'latency',
diff --git a/index.js b/index.js
index 722965fcef..6181086430 100644
--- a/index.js
+++ b/index.js
@@ -1 +1 @@
-module.exports = require('./src/lib/main');
+export default require('./src/lib/main.js');
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 92272b84ae..ff2e27cfc7 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -3747,8 +3747,12 @@
       "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-0.1.0.tgz"
     },
     "eslint-config-algolia": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-algolia/-/eslint-config-algolia-4.2.0.tgz"
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-algolia/-/eslint-config-algolia-4.5.0.tgz"
+    },
+    "eslint-plugin-algolia": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-algolia/-/eslint-plugin-algolia-1.5.0.tgz"
     },
     "eslint-plugin-react": {
       "version": "3.6.3",
diff --git a/package.json b/package.json
index fb8b06cf8e..70abcef2c7 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,8 @@
     "doctoc": "^0.15.0",
     "eslint": "^1.7.3",
     "eslint-config-airbnb": "^0.1.0",
-    "eslint-config-algolia": "^4.2.0",
+    "eslint-config-algolia": "^4.5.0",
+    "eslint-plugin-algolia": "^1.5.0",
     "eslint-plugin-react": "^3.6.3",
     "expect": "^1.13.0",
     "expect-jsx": "^2.1.0",
diff --git a/scripts/bump-package-version.js b/scripts/bump-package-version.js
index 19d4446539..52a27af2bf 100644
--- a/scripts/bump-package-version.js
+++ b/scripts/bump-package-version.js
@@ -1,14 +1,14 @@
-let fs = require('fs');
-let path = require('path');
+import fs from 'fs';
+import path from 'path';
 
-let mversion = require('mversion');
+import mversion from 'mversion';
+
+import semver from 'semver';
+import currentVersion from '../src/lib/version.js';
 
 if (!process.env.VERSION) {
   throw new Error('release: Usage is VERSION=MAJOR.MINOR.PATCH npm run release');
 }
-
-let semver = require('semver');
-let currentVersion = require('../src/lib/version');
 let newVersion = process.env.VERSION;
 
 if (!semver.valid(newVersion)) {
@@ -24,7 +24,7 @@ console.log('Releasing ' + newVersion);
 console.log('..Updating src/lib/version.js');
 
 let versionFile = path.join(__dirname, '../src/lib/version.js');
-let newContent = "module.exports = '" + newVersion + "';\n";
+let newContent = "export default '" + newVersion + "';\n";
 fs.writeFileSync(versionFile, newContent);
 
 console.log('..Updating package.json, npm-shrinwrap.json');
diff --git a/scripts/docs/gen-widget-doc.js b/scripts/docs/gen-widget-doc.js
index aa59abafa7..febc718f63 100644
--- a/scripts/docs/gen-widget-doc.js
+++ b/scripts/docs/gen-widget-doc.js
@@ -1,10 +1,10 @@
-let jsdoc2md = require('jsdoc-to-markdown');
-let dmd = require('dmd');
-let fs = require('fs');
-let util = require('util');
-let path = require('path');
-let rimraf = require('rimraf');
-let mkdirp = require('mkdirp');
+import jsdoc2md from 'jsdoc-to-markdown';
+import dmd from 'dmd';
+import fs from 'fs';
+import util from 'util';
+import path from 'path';
+import rimraf from 'rimraf';
+import mkdirp from 'mkdirp';
 
 /* paths used by this script */
 let p = {
diff --git a/src/components/ClearAll/ClearAll.js b/src/components/ClearAll/ClearAll.js
index 648b4cbb06..671d205a04 100644
--- a/src/components/ClearAll/ClearAll.js
+++ b/src/components/ClearAll/ClearAll.js
@@ -1,8 +1,6 @@
-let React = require('react');
-
-let Template = require('../Template');
-
-let {isSpecialClick} = require('../../lib/utils');
+import React from 'react';
+import Template from '../Template.js';
+import {isSpecialClick} from '../../lib/utils.js';
 
 class ClearAll extends React.Component {
   handleClick(e) {
@@ -46,4 +44,4 @@ ClearAll.propTypes = {
   url: React.PropTypes.string.isRequired
 };
 
-module.exports = ClearAll;
+export default ClearAll;
diff --git a/src/components/CurrentRefinedValues/CurrentRefinedValues.js b/src/components/CurrentRefinedValues/CurrentRefinedValues.js
index 18e998fc97..f30e529051 100644
--- a/src/components/CurrentRefinedValues/CurrentRefinedValues.js
+++ b/src/components/CurrentRefinedValues/CurrentRefinedValues.js
@@ -1,10 +1,10 @@
-let React = require('react');
+import React from 'react';
 
-let Template = require('../Template.js');
+import Template from '../Template.js';
 
-let {isSpecialClick} = require('../../lib/utils.js');
-let map = require('lodash/collection/map');
-let cloneDeep = require('lodash/lang/cloneDeep');
+import {isSpecialClick} from '../../lib/utils.js';
+import map from 'lodash/collection/map';
+import cloneDeep from 'lodash/lang/cloneDeep';
 
 class CurrentRefinedValues extends React.Component {
   _clearAllElement(position, requestedPosition) {
@@ -129,4 +129,4 @@ CurrentRefinedValues.propTypes = {
   templateProps: React.PropTypes.object.isRequired
 };
 
-module.exports = CurrentRefinedValues;
+export default CurrentRefinedValues;
diff --git a/src/components/Hits.js b/src/components/Hits.js
index 87e7586cdf..373b3d1b95 100644
--- a/src/components/Hits.js
+++ b/src/components/Hits.js
@@ -1,7 +1,7 @@
-let React = require('react');
-let map = require('lodash/collection/map');
+import React from 'react';
+import map from 'lodash/collection/map';
 
-let Template = require('./Template');
+import Template from './Template.js';
 
 class Hits extends React.Component {
   renderWithResults() {
@@ -54,4 +54,4 @@ Hits.defaultProps = {
   results: {hits: []}
 };
 
-module.exports = Hits;
+export default Hits;
diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
index 324b25a438..7d2444c8b5 100644
--- a/src/components/Pagination/Pagination.js
+++ b/src/components/Pagination/Pagination.js
@@ -1,12 +1,12 @@
-let React = require('react');
-let forEach = require('lodash/collection/forEach');
-let defaultsDeep = require('lodash/object/defaultsDeep');
-let {isSpecialClick} = require('../../lib/utils');
+import React from 'react';
+import forEach from 'lodash/collection/forEach';
+import defaultsDeep from 'lodash/object/defaultsDeep';
+import {isSpecialClick} from '../../lib/utils.js';
 
-let Paginator = require('./Paginator');
-let PaginationLink = require('./PaginationLink');
+import Paginator from './Paginator.js';
+import PaginationLink from './PaginationLink.js';
 
-let cx = require('classnames');
+import cx from 'classnames';
 
 class Pagination extends React.Component {
   constructor(props) {
@@ -168,4 +168,4 @@ Pagination.defaultProps = {
   nbPages: 0
 };
 
-module.exports = Pagination;
+export default Pagination;
diff --git a/src/components/Pagination/PaginationLink.js b/src/components/Pagination/PaginationLink.js
index 117edb19c3..761e790bc6 100644
--- a/src/components/Pagination/PaginationLink.js
+++ b/src/components/Pagination/PaginationLink.js
@@ -1,4 +1,4 @@
-let React = require('react');
+import React from 'react';
 
 class PaginationLink extends React.Component {
   render() {
@@ -35,4 +35,4 @@ PaginationLink.propTypes = {
   url: React.PropTypes.string
 };
 
-module.exports = PaginationLink;
+export default PaginationLink;
diff --git a/src/components/Pagination/Paginator.js b/src/components/Pagination/Paginator.js
index 1b9ce8c96c..c0f53370a5 100644
--- a/src/components/Pagination/Paginator.js
+++ b/src/components/Pagination/Paginator.js
@@ -1,4 +1,4 @@
-let range = require('lodash/utility/range');
+import range from 'lodash/utility/range';
 
 class Paginator {
   constructor(params) {
@@ -47,4 +47,4 @@ class Paginator {
   }
 }
 
-module.exports = Paginator;
+export default Paginator;
diff --git a/src/components/PoweredBy/PoweredBy.js b/src/components/PoweredBy/PoweredBy.js
index 4e2c45a14f..8ea1d9a325 100644
--- a/src/components/PoweredBy/PoweredBy.js
+++ b/src/components/PoweredBy/PoweredBy.js
@@ -1,4 +1,4 @@
-let React = require('react');
+import React from 'react';
 
 class PoweredBy extends React.Component {
   render() {
@@ -18,4 +18,4 @@ PoweredBy.propTypes = {
   })
 };
 
-module.exports = PoweredBy;
+export default PoweredBy;
diff --git a/src/components/PriceRanges/PriceRanges.js b/src/components/PriceRanges/PriceRanges.js
index ee1a382191..5115a937d7 100644
--- a/src/components/PriceRanges/PriceRanges.js
+++ b/src/components/PriceRanges/PriceRanges.js
@@ -1,8 +1,8 @@
-let React = require('react');
+import React from 'react';
 
-let Template = require('../Template');
-let PriceRangesForm = require('./PriceRangesForm');
-let cx = require('classnames');
+import Template from '../Template.js';
+import PriceRangesForm from './PriceRangesForm.js';
+import cx from 'classnames';
 
 class PriceRanges extends React.Component {
   getForm() {
@@ -94,4 +94,4 @@ PriceRanges.defaultProps = {
   cssClasses: {}
 };
 
-module.exports = PriceRanges;
+export default PriceRanges;
diff --git a/src/components/PriceRanges/PriceRangesForm.js b/src/components/PriceRanges/PriceRangesForm.js
index d135fcf6c3..3fc7880ae7 100644
--- a/src/components/PriceRanges/PriceRangesForm.js
+++ b/src/components/PriceRanges/PriceRangesForm.js
@@ -1,4 +1,4 @@
-let React = require('react');
+import React from 'react';
 
 class PriceRangesForm extends React.Component {
   getInput(type) {
@@ -55,5 +55,5 @@ PriceRangesForm.defaultProps = {
 };
 
 
-module.exports = PriceRangesForm;
+export default PriceRangesForm;
 
diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
index 5617b51c10..0aa1f93fae 100644
--- a/src/components/RefinementList/RefinementList.js
+++ b/src/components/RefinementList/RefinementList.js
@@ -1,10 +1,8 @@
-let React = require('react');
+import React from 'react';
+import cx from 'classnames';
+import {isSpecialClick} from '../../lib/utils.js';
 
-let cx = require('classnames');
-
-let Template = require('../Template');
-
-let {isSpecialClick} = require('../../lib/utils');
+import Template from '../Template.js';
 
 class RefinementList extends React.Component {
   refine(value) {
@@ -140,4 +138,4 @@ RefinementList.defaultProps = {
   attributeNameKey: 'name'
 };
 
-module.exports = RefinementList;
+export default RefinementList;
diff --git a/src/components/Selector.js b/src/components/Selector.js
index f7276b4353..dfce2e5d63 100644
--- a/src/components/Selector.js
+++ b/src/components/Selector.js
@@ -1,4 +1,4 @@
-let React = require('react');
+import React from 'react';
 
 class Selector extends React.Component {
   handleChange(event) {
@@ -51,4 +51,4 @@ Selector.propTypes = {
   setValue: React.PropTypes.func.isRequired
 };
 
-module.exports = Selector;
+export default Selector;
diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js
index f7620da4d6..32ef383c58 100644
--- a/src/components/Slider/Slider.js
+++ b/src/components/Slider/Slider.js
@@ -1,6 +1,6 @@
-let React = require('react');
+import React from 'react';
 
-let Nouislider = require('react-nouislider');
+import Nouislider from 'react-nouislider';
 
 let cssPrefix = 'ais-range-slider--';
 
@@ -58,4 +58,4 @@ Slider.propTypes = {
   ])
 };
 
-module.exports = Slider;
+export default Slider;
diff --git a/src/components/Slider/__tests__/Slider-test.js b/src/components/Slider/__tests__/Slider-test.js
index 648e4cd4f8..bfed044118 100644
--- a/src/components/Slider/__tests__/Slider-test.js
+++ b/src/components/Slider/__tests__/Slider-test.js
@@ -20,7 +20,7 @@ describe('Slider', () => {
     renderer = createRenderer();
 
     // need to be required AFTER jsdom has initialized global.window/navigator
-    Slider = require('../Slider');
+    Slider = require('../Slider.js');
     Nouislider = require('react-nouislider');
   });
 
diff --git a/src/components/Stats/Stats.js b/src/components/Stats/Stats.js
index f8d15e1fb8..7d6e079314 100644
--- a/src/components/Stats/Stats.js
+++ b/src/components/Stats/Stats.js
@@ -1,6 +1,6 @@
-let React = require('react');
+import React from 'react';
 
-let Template = require('../Template');
+import Template from '../Template.js';
 
 class Stats extends React.Component {
   render() {
@@ -36,4 +36,4 @@ Stats.propTypes = {
   templateProps: React.PropTypes.object.isRequired
 };
 
-module.exports = Stats;
+export default Stats;
diff --git a/src/components/Template.js b/src/components/Template.js
index 3bdbab513c..b545be65ef 100644
--- a/src/components/Template.js
+++ b/src/components/Template.js
@@ -1,8 +1,8 @@
-let React = require('react');
-let mapValues = require('lodash/object/mapValues');
-let curry = require('lodash/function/curry');
-let cloneDeep = require('lodash/lang/cloneDeep');
-let hogan = require('hogan.js');
+import React from 'react';
+import mapValues from 'lodash/object/mapValues';
+import curry from 'lodash/function/curry';
+import cloneDeep from 'lodash/lang/cloneDeep';
+import hogan from 'hogan.js';
 
 class Template extends React.Component {
   render() {
@@ -122,4 +122,4 @@ function transformHelpersToHogan(helpers, compileOptions, data) {
   });
 }
 
-module.exports = Template;
+export default Template;
diff --git a/src/decorators/__tests__/TestComponent.js b/src/decorators/__tests__/TestComponent.js
index 702397bb5d..9739da13d7 100644
--- a/src/decorators/__tests__/TestComponent.js
+++ b/src/decorators/__tests__/TestComponent.js
@@ -1,4 +1,4 @@
-let React = require('react');
+import React from 'react';
 
 // This component is only used in tests, as a placeholder
 class TestComponent extends React.Component {
@@ -8,4 +8,4 @@ class TestComponent extends React.Component {
 }
 
 
-module.exports = TestComponent;
+export default TestComponent;
diff --git a/src/decorators/autoHideContainer.js b/src/decorators/autoHideContainer.js
index 4d35048a6d..a1dff0e0b0 100644
--- a/src/decorators/autoHideContainer.js
+++ b/src/decorators/autoHideContainer.js
@@ -1,8 +1,8 @@
 // Issue with eslint + high-order components like decorators
 /* eslint react/prop-types: 0 */
 
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 function autoHideContainer(ComposedComponent) {
   class AutoHide extends React.Component {
@@ -38,4 +38,4 @@ function autoHideContainer(ComposedComponent) {
   return AutoHide;
 }
 
-module.exports = autoHideContainer;
+export default autoHideContainer;
diff --git a/src/decorators/headerFooter.js b/src/decorators/headerFooter.js
index ddacfdc857..f965e2e007 100644
--- a/src/decorators/headerFooter.js
+++ b/src/decorators/headerFooter.js
@@ -1,11 +1,11 @@
 // Issue with eslint + high-order components like decorators
 /* eslint react/prop-types: 0 */
 
-let React = require('react');
+import React from 'react';
 
-let cx = require('classnames');
+import cx from 'classnames';
 
-let Template = require('../components/Template');
+import Template from '../components/Template.js';
 
 function headerFooter(ComposedComponent) {
   class HeaderFooter extends React.Component {
@@ -65,4 +65,4 @@ function headerFooter(ComposedComponent) {
   return HeaderFooter;
 }
 
-module.exports = headerFooter;
+export default headerFooter;
diff --git a/src/lib/InstantSearch.js b/src/lib/InstantSearch.js
index 22e3245746..67026c53a6 100644
--- a/src/lib/InstantSearch.js
+++ b/src/lib/InstantSearch.js
@@ -1,14 +1,14 @@
-let algoliasearch = require('algoliasearch');
-let algoliasearchHelper = require('algoliasearch-helper');
+import algoliasearch from 'algoliasearch';
+import algoliasearchHelper from 'algoliasearch-helper';
 
-let forEach = require('lodash/collection/forEach');
-let merge = require('lodash/object/merge');
-let union = require('lodash/array/union');
+import forEach from 'lodash/collection/forEach';
+import merge from 'lodash/object/merge';
+import union from 'lodash/array/union';
 
 let EventEmitter = require('events').EventEmitter;
 
-let urlSyncWidget = require('./url-sync');
-let version = require('./version');
+import urlSyncWidget from './url-sync.js';
+import version from './version.js';
 
 function defaultCreateURL() { return '#'; }
 
@@ -59,7 +59,7 @@ Usage: instantsearch({
     this.searchParameters = searchParameters || {};
     this.widgets = [];
     this.templatesConfig = {
-      helpers: require('./helpers')({numberLocale}),
+      helpers: require('./helpers.js')({numberLocale}),
       compileOptions: {}
     };
     this.urlSync = urlSync;
@@ -158,4 +158,4 @@ function enhanceConfiguration(configuration, widgetDefinition) {
   );
 }
 
-module.exports = InstantSearch;
+export default InstantSearch;
diff --git a/src/lib/helpers.js b/src/lib/helpers.js
index fbc9256aa5..cf150519ee 100644
--- a/src/lib/helpers.js
+++ b/src/lib/helpers.js
@@ -1,7 +1,7 @@
-module.exports = function({numberLocale}) {
+export default function({numberLocale}) {
   return {
     formatNumber(number, render) {
       return Number(render(number)).toLocaleString(numberLocale);
     }
   };
-};
+}
diff --git a/src/lib/main.js b/src/lib/main.js
index 7919469e69..2a9579e501 100644
--- a/src/lib/main.js
+++ b/src/lib/main.js
@@ -1,34 +1,34 @@
 // required for browsers not supporting this
-require('../shams/Object.freeze');
+import '../shams/Object.freeze.js';
 
-let toFactory = require('to-factory');
+import toFactory from 'to-factory';
 
-let InstantSearch = require('./InstantSearch');
+import InstantSearch from './InstantSearch.js';
 let instantsearch = toFactory(InstantSearch);
-let algoliasearchHelper = require('algoliasearch-helper');
+import algoliasearchHelper from 'algoliasearch-helper';
 
 instantsearch.widgets = {
-  clearAll: require('../widgets/clear-all/clear-all'),
-  currentRefinedValues: require('../widgets/current-refined-values/current-refined-values'),
-  hierarchicalMenu: require('../widgets/hierarchical-menu/hierarchical-menu'),
-  hits: require('../widgets/hits/hits'),
-  hitsPerPageSelector: require('../widgets/hits-per-page-selector/hits-per-page-selector'),
-  menu: require('../widgets/menu/menu'),
-  refinementList: require('../widgets/refinement-list/refinement-list'),
-  numericRefinementList: require('../widgets/numeric-refinement-list/numeric-refinement-list'),
-  numericSelector: require('../widgets/numeric-selector/numeric-selector'),
-  pagination: require('../widgets/pagination/pagination'),
-  priceRanges: require('../widgets/price-ranges/price-ranges'),
-  searchBox: require('../widgets/search-box/search-box'),
-  rangeSlider: require('../widgets/range-slider/range-slider'),
-  sortBySelector: require('../widgets/sort-by-selector/sort-by-selector'),
-  starRating: require('../widgets/star-rating/star-rating'),
-  stats: require('../widgets/stats/stats'),
-  toggle: require('../widgets/toggle/toggle')
+  clearAll: require('../widgets/clear-all/clear-all.js'),
+  currentRefinedValues: require('../widgets/current-refined-values/current-refined-values.js'),
+  hierarchicalMenu: require('../widgets/hierarchical-menu/hierarchical-menu.js'),
+  hits: require('../widgets/hits/hits.js'),
+  hitsPerPageSelector: require('../widgets/hits-per-page-selector/hits-per-page-selector.js'),
+  menu: require('../widgets/menu/menu.js'),
+  refinementList: require('../widgets/refinement-list/refinement-list.js'),
+  numericRefinementList: require('../widgets/numeric-refinement-list/numeric-refinement-list.js'),
+  numericSelector: require('../widgets/numeric-selector/numeric-selector.js'),
+  pagination: require('../widgets/pagination/pagination.js'),
+  priceRanges: require('../widgets/price-ranges/price-ranges.js'),
+  searchBox: require('../widgets/search-box/search-box.js'),
+  rangeSlider: require('../widgets/range-slider/range-slider.js'),
+  sortBySelector: require('../widgets/sort-by-selector/sort-by-selector.js'),
+  starRating: require('../widgets/star-rating/star-rating.js'),
+  stats: require('../widgets/stats/stats.js'),
+  toggle: require('../widgets/toggle/toggle.js')
 };
 
 instantsearch.version = require('./version.js');
 
 instantsearch.createQueryString = algoliasearchHelper.url.getQueryStringFromState;
 
-module.exports = instantsearch;
+export default instantsearch;
diff --git a/src/lib/url-sync.js b/src/lib/url-sync.js
index ab6ac3418d..7e959f253f 100644
--- a/src/lib/url-sync.js
+++ b/src/lib/url-sync.js
@@ -1,9 +1,9 @@
-let algoliasearchHelper = require('algoliasearch-helper');
+import algoliasearchHelper from 'algoliasearch-helper';
 let AlgoliaSearchHelper = algoliasearchHelper.AlgoliaSearchHelper;
-let majorVersionNumber = require('../lib/version').split('.')[0];
+let majorVersionNumber = require('../lib/version.js').split('.')[0];
 
-let isEqual = require('lodash/lang/isEqual');
-let merge = require('lodash/object/merge');
+import isEqual from 'lodash/lang/isEqual';
+import merge from 'lodash/object/merge';
 
 function timerMaker(t0) {
   let t = t0;
@@ -177,4 +177,4 @@ function urlSync(options = {}) {
 }
 
 
-module.exports = urlSync;
+export default urlSync;
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 15c14e2f78..10d6063bee 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -1,8 +1,8 @@
-let reduce = require('lodash/collection/reduce');
-let forEach = require('lodash/collection/forEach');
-let find = require('lodash/collection/find');
-let get = require('lodash/object/get');
-let isEmpty = require('lodash/lang/isEmpty');
+import reduce from 'lodash/collection/reduce';
+import forEach from 'lodash/collection/forEach';
+import find from 'lodash/collection/find';
+import get from 'lodash/object/get';
+import isEmpty from 'lodash/lang/isEmpty';
 
 let utils = {
   getContainerNode,
@@ -214,4 +214,4 @@ function clearRefinementsAndSearch(helper, attributeNames) {
   helper.setState(clearRefinementsFromState(helper.state, attributeNames)).search();
 }
 
-module.exports = utils;
+export default utils;
diff --git a/src/lib/version.js b/src/lib/version.js
index 96994008f4..7b0b49cd7e 100644
--- a/src/lib/version.js
+++ b/src/lib/version.js
@@ -1 +1 @@
-module.exports = '1.2.0-beta.0';
+export default '1.2.0-beta.0';
diff --git a/src/widgets/clear-all/__tests__/clear-all-test.js b/src/widgets/clear-all/__tests__/clear-all-test.js
index a30a7631b9..06573c0889 100644
--- a/src/widgets/clear-all/__tests__/clear-all-test.js
+++ b/src/widgets/clear-all/__tests__/clear-all-test.js
@@ -59,7 +59,7 @@ describe('clearAll()', () => {
       hasRefinements: false,
       shouldAutoHideContainer: true,
       templateProps: {
-        templates: require('../defaultTemplates'),
+        templates: require('../defaultTemplates.js'),
         templatesConfig: undefined,
         transformData: undefined,
         useCustomCompileOptions: {header: false, footer: false, link: false}
diff --git a/src/widgets/clear-all/clear-all.js b/src/widgets/clear-all/clear-all.js
index f8866060a6..871452d303 100644
--- a/src/widgets/clear-all/clear-all.js
+++ b/src/widgets/clear-all/clear-all.js
@@ -1,21 +1,22 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let {
+import {
   bemHelper,
   getContainerNode,
   prepareTemplateProps,
   getRefinements,
   clearRefinementsFromState,
   clearRefinementsAndSearch
-} = require('../../lib/utils');
-let bem = bemHelper('ais-clear-all');
-let cx = require('classnames');
+} from '../../lib/utils.js';
+import cx from 'classnames';
+
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
 
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
-let headerFooterHOC = require('../../decorators/headerFooter');
+import defaultTemplates from './defaultTemplates.js';
 
-let defaultTemplates = require('./defaultTemplates');
+let bem = bemHelper('ais-clear-all');
 
 /**
  * Allows to clear all refinements at once
@@ -52,7 +53,7 @@ function clearAll({
   }
 
   let containerNode = getContainerNode(container);
-  let ClearAll = headerFooterHOC(require('../../components/ClearAll/ClearAll'));
+  let ClearAll = headerFooterHOC(require('../../components/ClearAll/ClearAll.js'));
   if (autoHideContainer === true) {
     ClearAll = autoHideContainerHOC(ClearAll);
   }
@@ -94,4 +95,4 @@ function clearAll({
   };
 }
 
-module.exports = clearAll;
+export default clearAll;
diff --git a/src/widgets/clear-all/defaultTemplates.js b/src/widgets/clear-all/defaultTemplates.js
index a0f7448bc7..a174fdd5b0 100644
--- a/src/widgets/clear-all/defaultTemplates.js
+++ b/src/widgets/clear-all/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   header: '',
   link: 'Clear all',
   footer: ''
diff --git a/src/widgets/current-refined-values/current-refined-values.js b/src/widgets/current-refined-values/current-refined-values.js
index 1cd30d019c..36c4a8ddb9 100644
--- a/src/widgets/current-refined-values/current-refined-values.js
+++ b/src/widgets/current-refined-values/current-refined-values.js
@@ -1,7 +1,7 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let {
+import {
   bemHelper,
   isDomElement,
   getContainerNode,
@@ -9,27 +9,28 @@ let {
   getRefinements,
   clearRefinementsFromState,
   clearRefinementsAndSearch
-} = require('../../lib/utils.js');
+} from '../../lib/utils.js';
 
-let bem = bemHelper('ais-current-refined-values');
-let cx = require('classnames');
+import cx from 'classnames';
+
+import isUndefined from 'lodash/lang/isUndefined';
+import isBoolean from 'lodash/lang/isBoolean';
+import isString from 'lodash/lang/isString';
+import isArray from 'lodash/lang/isArray';
+import isPlainObject from 'lodash/lang/isPlainObject';
+import isFunction from 'lodash/lang/isFunction';
+import isEmpty from 'lodash/lang/isEmpty';
 
-let isUndefined = require('lodash/lang/isUndefined');
-let isBoolean = require('lodash/lang/isBoolean');
-let isString = require('lodash/lang/isString');
-let isArray = require('lodash/lang/isArray');
-let isPlainObject = require('lodash/lang/isPlainObject');
-let isFunction = require('lodash/lang/isFunction');
-let isEmpty = require('lodash/lang/isEmpty');
+import map from 'lodash/collection/map';
+import reduce from 'lodash/collection/reduce';
+import filter from 'lodash/collection/filter';
 
-let map = require('lodash/collection/map');
-let reduce = require('lodash/collection/reduce');
-let filter = require('lodash/collection/filter');
+import headerFooterHOC from '../../decorators/headerFooter.js';
+import autoHideContainerHOC from '../../decorators/autoHideContainer';
 
-let headerFooterHOC = require('../../decorators/headerFooter.js');
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
+import defaultTemplates from './defaultTemplates';
 
-let defaultTemplates = require('./defaultTemplates');
+let bem = bemHelper('ais-current-refined-values');
 
 /**
  * Instantiate a list of current refinements with the possibility to clear them
@@ -243,4 +244,4 @@ function clearRefinement(helper, refinement) {
   helper.setState(clearRefinementFromState(helper.state, refinement)).search();
 }
 
-module.exports = currentRefinedValues;
+export default currentRefinedValues;
diff --git a/src/widgets/current-refined-values/defaultTemplates.js b/src/widgets/current-refined-values/defaultTemplates.js
index d2342c02ad..6590e4fd25 100644
--- a/src/widgets/current-refined-values/defaultTemplates.js
+++ b/src/widgets/current-refined-values/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   header: '',
   item: '' +
     '{{#label}}' +
diff --git a/src/widgets/hierarchical-menu/defaultTemplates.js b/src/widgets/hierarchical-menu/defaultTemplates.js
index 46c884dd29..81c1139223 100644
--- a/src/widgets/hierarchical-menu/defaultTemplates.js
+++ b/src/widgets/hierarchical-menu/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   header: '',
   item: `<a class="{{cssClasses.link}}" href="{{url}}">{{name}} <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></a>`,
   footer: ''
diff --git a/src/widgets/hierarchical-menu/hierarchical-menu.js b/src/widgets/hierarchical-menu/hierarchical-menu.js
index 95fd46bce2..bb434c921e 100644
--- a/src/widgets/hierarchical-menu/hierarchical-menu.js
+++ b/src/widgets/hierarchical-menu/hierarchical-menu.js
@@ -1,13 +1,13 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
+import utils from '../../lib/utils.js';
 let bem = utils.bemHelper('ais-hierarchical-menu');
-let cx = require('classnames');
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
-let headerFooterHOC = require('../../decorators/headerFooter');
+import cx from 'classnames';
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
 
-let defaultTemplates = require('./defaultTemplates');
+import defaultTemplates from './defaultTemplates.js';
 
 /**
  * Create a hierarchical menu using multiple attributes
@@ -72,7 +72,7 @@ function hierarchicalMenu({
 
   let containerNode = utils.getContainerNode(container);
 
-  let RefinementList = headerFooterHOC(require('../../components/RefinementList/RefinementList'));
+  let RefinementList = headerFooterHOC(require('../../components/RefinementList/RefinementList.js'));
   if (autoHideContainer === true) {
     RefinementList = autoHideContainerHOC(RefinementList);
   }
@@ -157,4 +157,4 @@ function sliceFacetValues(values, limit) {
     });
 }
 
-module.exports = hierarchicalMenu;
+export default hierarchicalMenu;
diff --git a/src/widgets/hits-per-page-selector/hits-per-page-selector.js b/src/widgets/hits-per-page-selector/hits-per-page-selector.js
index a94144a715..4bb76e8079 100644
--- a/src/widgets/hits-per-page-selector/hits-per-page-selector.js
+++ b/src/widgets/hits-per-page-selector/hits-per-page-selector.js
@@ -1,11 +1,11 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
-let any = require('lodash/collection/any');
+import utils from '../../lib/utils.js';
+import any from 'lodash/collection/any';
 let bem = utils.bemHelper('ais-hits-per-page-selector');
-let cx = require('classnames');
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
+import cx from 'classnames';
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
 
 /**
  * Instantiate a dropdown element to choose the number of hits to display per page
@@ -39,7 +39,7 @@ function hitsPerPageSelector({
   }
 
   let containerNode = utils.getContainerNode(container);
-  let Selector = require('../../components/Selector');
+  let Selector = require('../../components/Selector.js');
   if (autoHideContainer === true) {
     Selector = autoHideContainerHOC(Selector);
   }
@@ -96,4 +96,4 @@ function hitsPerPageSelector({
   };
 }
 
-module.exports = hitsPerPageSelector;
+export default hitsPerPageSelector;
diff --git a/src/widgets/hits/defaultTemplates.js b/src/widgets/hits/defaultTemplates.js
index 364fd86c83..a507724520 100644
--- a/src/widgets/hits/defaultTemplates.js
+++ b/src/widgets/hits/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   empty: 'No results',
   item: function(data) {
     return JSON.stringify(data, null, 2);
diff --git a/src/widgets/hits/hits.js b/src/widgets/hits/hits.js
index 6849317a48..225b097cbf 100644
--- a/src/widgets/hits/hits.js
+++ b/src/widgets/hits/hits.js
@@ -1,12 +1,12 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
+import utils from '../../lib/utils.js';
 let bem = utils.bemHelper('ais-hits');
-let cx = require('classnames');
+import cx from 'classnames';
 
-let Hits = require('../../components/Hits');
-let defaultTemplates = require('./defaultTemplates');
+import Hits from '../../components/Hits.js';
+import defaultTemplates from './defaultTemplates.js';
 
 /**
  * Display the list of results (hits) from the current search
@@ -74,4 +74,4 @@ function hits({
   };
 }
 
-module.exports = hits;
+export default hits;
diff --git a/src/widgets/menu/defaultTemplates.js b/src/widgets/menu/defaultTemplates.js
index 8004875d8b..be2d9d653a 100644
--- a/src/widgets/menu/defaultTemplates.js
+++ b/src/widgets/menu/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   header: '',
   item: `<a class="{{cssClasses.link}}" href="{{url}}">{{name}} <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span></a>`,
   footer: ''
diff --git a/src/widgets/menu/menu.js b/src/widgets/menu/menu.js
index bdac48d9eb..6e610ed689 100644
--- a/src/widgets/menu/menu.js
+++ b/src/widgets/menu/menu.js
@@ -1,13 +1,13 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
+import utils from '../../lib/utils.js';
 let bem = utils.bemHelper('ais-menu');
-let cx = require('classnames');
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
-let headerFooterHOC = require('../../decorators/headerFooter');
+import cx from 'classnames';
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
 
-let defaultTemplates = require('./defaultTemplates');
+import defaultTemplates from './defaultTemplates.js';
 
 /**
  * Create a menu out of a facet
@@ -60,7 +60,7 @@ function menu({
   }
 
   let containerNode = utils.getContainerNode(container);
-  let RefinementList = headerFooterHOC(require('../../components/RefinementList/RefinementList'));
+  let RefinementList = headerFooterHOC(require('../../components/RefinementList/RefinementList.js'));
   if (autoHideContainer === true) {
     RefinementList = autoHideContainerHOC(RefinementList);
   }
@@ -127,4 +127,4 @@ function getFacetValues(results, hierarchicalFacetName, sortBy, limit) {
   return values.data && values.data.slice(0, limit) || [];
 }
 
-module.exports = menu;
+export default menu;
diff --git a/src/widgets/numeric-refinement-list/__tests__/numeric-refinement-list-test.js b/src/widgets/numeric-refinement-list/__tests__/numeric-refinement-list-test.js
index afa61bed5b..906e38ea9f 100644
--- a/src/widgets/numeric-refinement-list/__tests__/numeric-refinement-list-test.js
+++ b/src/widgets/numeric-refinement-list/__tests__/numeric-refinement-list-test.js
@@ -10,7 +10,7 @@ expect.extend(expectJSX);
 
 describe('numericRefinementList call', () => {
   jsdom({useEach: true});
-  const numericRefinementList = require('../numeric-refinement-list');
+  const numericRefinementList = require('../numeric-refinement-list.js');
 
   it('throws an exception when no container', () => {
     const attributeName = '';
@@ -47,8 +47,8 @@ describe('numericRefinementList()', () => {
   let results;
 
   beforeEach(() => {
-    numericRefinementList = require('../numeric-refinement-list');
-    RefinementList = require('../../../components/RefinementList/RefinementList');
+    numericRefinementList = require('../numeric-refinement-list.js');
+    RefinementList = require('../../../components/RefinementList/RefinementList.js');
     ReactDOM = {render: sinon.spy()};
     numericRefinementList.__Rewire__('ReactDOM', ReactDOM);
     autoHideContainer = sinon.stub().returns(RefinementList);
diff --git a/src/widgets/numeric-refinement-list/defaultTemplates.js b/src/widgets/numeric-refinement-list/defaultTemplates.js
index e6437fb2b7..577d889d14 100644
--- a/src/widgets/numeric-refinement-list/defaultTemplates.js
+++ b/src/widgets/numeric-refinement-list/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   header: '',
   item: `<label class="{{cssClasses.label}}">
   <input type="radio" class="{{cssClasses.checkbox}}" name="{{attributeName}}" {{#isRefined}}checked{{/isRefined}} />{{name}}
diff --git a/src/widgets/numeric-refinement-list/numeric-refinement-list.js b/src/widgets/numeric-refinement-list/numeric-refinement-list.js
index bd7974cd4a..6213b54cea 100644
--- a/src/widgets/numeric-refinement-list/numeric-refinement-list.js
+++ b/src/widgets/numeric-refinement-list/numeric-refinement-list.js
@@ -1,16 +1,16 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
+import utils from '../../lib/utils.js';
 let bem = utils.bemHelper('ais-refinement-list');
-let cx = require('classnames');
-let find = require('lodash/collection/find');
-let includes = require('lodash/collection/includes');
+import cx from 'classnames';
+import find from 'lodash/collection/find';
+import includes from 'lodash/collection/includes';
 
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
-let headerFooterHOC = require('../../decorators/headerFooter');
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
 
-let defaultTemplates = require('./defaultTemplates');
+import defaultTemplates from './defaultTemplates.js';
 
 /**
  * Instantiate a list of refinements based on a facet
@@ -62,7 +62,7 @@ function numericRefinementList({
   }
 
   let containerNode = utils.getContainerNode(container);
-  let RefinementList = headerFooterHOC(require('../../components/RefinementList/RefinementList'));
+  let RefinementList = headerFooterHOC(require('../../components/RefinementList/RefinementList.js'));
   if (autoHideContainer === true) {
     RefinementList = autoHideContainerHOC(RefinementList);
   }
@@ -198,4 +198,4 @@ function hasNumericRefinement(currentRefinements, operator, value) {
   return hasOperatorRefinements && includesValue;
 }
 
-module.exports = numericRefinementList;
+export default numericRefinementList;
diff --git a/src/widgets/numeric-selector/numeric-selector.js b/src/widgets/numeric-selector/numeric-selector.js
index 58a3da7611..a3c2d9c23b 100644
--- a/src/widgets/numeric-selector/numeric-selector.js
+++ b/src/widgets/numeric-selector/numeric-selector.js
@@ -1,10 +1,10 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
-let cx = require('classnames');
-let find = require('lodash/collection/find');
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
+import utils from '../../lib/utils.js';
+import cx from 'classnames';
+import find from 'lodash/collection/find';
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
 
 let bem = utils.bemHelper('ais-numeric-selector');
 
@@ -34,7 +34,7 @@ function numericSelector({
   let containerNode = utils.getContainerNode(container);
   let usage = 'Usage: numericSelector({container, attributeName, options[, cssClasses.{root,item}, autoHideContainer]})';
 
-  let Selector = require('../../components/Selector');
+  let Selector = require('../../components/Selector.js');
   if (autoHideContainer === true) {
     Selector = autoHideContainerHOC(Selector);
   }
@@ -89,4 +89,4 @@ function numericSelector({
   };
 }
 
-module.exports = numericSelector;
+export default numericSelector;
diff --git a/src/widgets/pagination/pagination.js b/src/widgets/pagination/pagination.js
index 5eb2ce0e2d..b1cf5d7454 100644
--- a/src/widgets/pagination/pagination.js
+++ b/src/widgets/pagination/pagination.js
@@ -1,12 +1,12 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
-let defaults = require('lodash/object/defaults');
-let cx = require('classnames');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import defaults from 'lodash/object/defaults';
+import cx from 'classnames';
 
-let utils = require('../../lib/utils');
+import utils from '../../lib/utils.js';
 let bem = utils.bemHelper('ais-pagination');
 
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
 let defaultLabels = {
   previous: '‹',
   next: '›',
@@ -72,7 +72,7 @@ function pagination({
 
   let containerNode = utils.getContainerNode(container);
   let scrollToNode = scrollTo !== false ? utils.getContainerNode(scrollTo) : false;
-  let Pagination = require('../../components/Pagination/Pagination');
+  let Pagination = require('../../components/Pagination/Pagination.js');
   if (autoHideContainer === true) {
     Pagination = autoHideContainerHOC(Pagination);
   }
@@ -129,4 +129,4 @@ function pagination({
   };
 }
 
-module.exports = pagination;
+export default pagination;
diff --git a/src/widgets/price-ranges/__tests__/price-ranges-test.js b/src/widgets/price-ranges/__tests__/price-ranges-test.js
index 0db738bb02..7dae1802f2 100644
--- a/src/widgets/price-ranges/__tests__/price-ranges-test.js
+++ b/src/widgets/price-ranges/__tests__/price-ranges-test.js
@@ -102,7 +102,7 @@ describe('priceRanges()', () => {
         },
         refine() {},
         templateProps: {
-          templates: require('../defaultTemplates'),
+          templates: require('../defaultTemplates.js'),
           templatesConfig: undefined,
           transformData: undefined,
           useCustomCompileOptions: {header: false, footer: false, item: false}
diff --git a/src/widgets/price-ranges/defaultTemplates.js b/src/widgets/price-ranges/defaultTemplates.js
index 8a736570a2..d3a422645a 100644
--- a/src/widgets/price-ranges/defaultTemplates.js
+++ b/src/widgets/price-ranges/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   header: ``,
   item: `
     {{#from}}
diff --git a/src/widgets/price-ranges/generate-ranges.js b/src/widgets/price-ranges/generate-ranges.js
index a9f4d46c03..4a9e07c8ff 100644
--- a/src/widgets/price-ranges/generate-ranges.js
+++ b/src/widgets/price-ranges/generate-ranges.js
@@ -75,4 +75,4 @@ function generateRanges(stats) {
   return facetValues;
 }
 
-module.exports = generateRanges;
+export default generateRanges;
diff --git a/src/widgets/price-ranges/price-ranges.js b/src/widgets/price-ranges/price-ranges.js
index 33ee9f8e0b..1957a44587 100644
--- a/src/widgets/price-ranges/price-ranges.js
+++ b/src/widgets/price-ranges/price-ranges.js
@@ -1,16 +1,16 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
+import utils from '../../lib/utils.js';
 
-let generateRanges = require('./generate-ranges');
+import generateRanges from './generate-ranges.js';
 
-let defaultTemplates = require('./defaultTemplates');
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
-let headerFooterHOC = require('../../decorators/headerFooter');
+import defaultTemplates from './defaultTemplates.js';
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
 
 let bem = utils.bemHelper('ais-price-ranges');
-let cx = require('classnames');
+import cx from 'classnames';
 
 /**
  * Instantiate a price ranges on a numerical facet
@@ -67,7 +67,7 @@ function priceRanges({
   }
 
   let containerNode = utils.getContainerNode(container);
-  let PriceRanges = headerFooterHOC(require('../../components/PriceRanges/PriceRanges'));
+  let PriceRanges = headerFooterHOC(require('../../components/PriceRanges/PriceRanges.js'));
   if (autoHideContainer === true) {
     PriceRanges = autoHideContainerHOC(PriceRanges);
   }
@@ -182,4 +182,4 @@ function priceRanges({
   };
 }
 
-module.exports = priceRanges;
+export default priceRanges;
diff --git a/src/widgets/range-slider/__tests__/range-slider-test.js b/src/widgets/range-slider/__tests__/range-slider-test.js
index d1e1a53178..a33e4b9c24 100644
--- a/src/widgets/range-slider/__tests__/range-slider-test.js
+++ b/src/widgets/range-slider/__tests__/range-slider-test.js
@@ -12,7 +12,7 @@ import AlgoliasearchHelper from 'algoliasearch-helper';
 
 describe('rangeSlider call', () => {
   jsdom({useEach: true});
-  const rangeSlider = require('../range-slider');
+  const rangeSlider = require('../range-slider.js');
 
   it('throws an exception when no container', () => {
     const attributeName = '';
@@ -40,8 +40,8 @@ describe('rangeSlider()', () => {
   let rangeSlider;
 
   beforeEach(() => {
-    rangeSlider = require('../range-slider');
-    Slider = require('../../../components/Slider/Slider');
+    rangeSlider = require('../range-slider.js');
+    Slider = require('../../../components/Slider/Slider.js');
     ReactDOM = {render: sinon.spy()};
     rangeSlider.__Rewire__('ReactDOM', ReactDOM);
     autoHideContainer = sinon.stub().returns(Slider);
diff --git a/src/widgets/range-slider/range-slider.js b/src/widgets/range-slider/range-slider.js
index 827155c0c4..f23b79b755 100644
--- a/src/widgets/range-slider/range-slider.js
+++ b/src/widgets/range-slider/range-slider.js
@@ -1,10 +1,10 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
-let find = require('lodash/collection/find');
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
-let headerFooterHOC = require('../../decorators/headerFooter');
+import utils from '../../lib/utils.js';
+import find from 'lodash/collection/find';
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
 
 let defaultTemplates = {
   header: '',
@@ -60,7 +60,7 @@ function rangeSlider({
   }
 
   let containerNode = utils.getContainerNode(container);
-  let Slider = headerFooterHOC(require('../../components/Slider/Slider'));
+  let Slider = headerFooterHOC(require('../../components/Slider/Slider.js'));
   if (autoHideContainer === true) {
     Slider = autoHideContainerHOC(Slider);
   }
@@ -138,4 +138,4 @@ function rangeSlider({
   };
 }
 
-module.exports = rangeSlider;
+export default rangeSlider;
diff --git a/src/widgets/refinement-list/__tests__/refinement-list-test.js b/src/widgets/refinement-list/__tests__/refinement-list-test.js
index 901761a296..e554900590 100644
--- a/src/widgets/refinement-list/__tests__/refinement-list-test.js
+++ b/src/widgets/refinement-list/__tests__/refinement-list-test.js
@@ -12,7 +12,7 @@ expect.extend(expectJSX);
 import refinementList from '../refinement-list';
 import Template from '../../../components/Template';
 
-const helpers = require('../../../lib/helpers')('en-US');
+const helpers = require('../../../lib/helpers.js')('en-US');
 
 describe('refinementList()', () => {
   let autoHideContainer;
@@ -190,7 +190,7 @@ describe('refinementList()', () => {
     it('formats counts', () => {
       const props = {
         templatesConfig: {helpers},
-        templates: require('../defaultTemplates')
+        templates: require('../defaultTemplates.js')
       };
       renderer.render(<Template data={{count: 1000}} {...props} templateKey="item" />);
       let out = renderer.getRenderOutput();
diff --git a/src/widgets/refinement-list/defaultTemplates.js b/src/widgets/refinement-list/defaultTemplates.js
index 9e8e03e074..86f6202788 100644
--- a/src/widgets/refinement-list/defaultTemplates.js
+++ b/src/widgets/refinement-list/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   header: '',
   item: `<label class="{{cssClasses.label}}">
   <input type="checkbox" class="{{cssClasses.checkbox}}" value="{{name}}" {{#isRefined}}checked{{/isRefined}} />{{name}}
diff --git a/src/widgets/refinement-list/refinement-list.js b/src/widgets/refinement-list/refinement-list.js
index d4d9942e63..f4b5c57658 100644
--- a/src/widgets/refinement-list/refinement-list.js
+++ b/src/widgets/refinement-list/refinement-list.js
@@ -1,14 +1,14 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
+import utils from '../../lib/utils.js';
 let bem = utils.bemHelper('ais-refinement-list');
-let cx = require('classnames');
+import cx from 'classnames';
 
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
-let headerFooterHOC = require('../../decorators/headerFooter');
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
 
-let defaultTemplates = require('./defaultTemplates');
+import defaultTemplates from './defaultTemplates.js';
 
 /**
  * Instantiate a list of refinements based on a facet
@@ -60,7 +60,7 @@ function refinementList({
     transformData,
     autoHideContainer = true
   }) {
-  let RefinementList = require('../../components/RefinementList/RefinementList');
+  let RefinementList = require('../../components/RefinementList/RefinementList.js');
 
   if (!container || !attributeName) {
     throw new Error(usage);
@@ -138,4 +138,4 @@ function refinementList({
   };
 }
 
-module.exports = refinementList;
+export default refinementList;
diff --git a/src/widgets/search-box/search-box.js b/src/widgets/search-box/search-box.js
index edbf6f41b4..24d4b842a9 100644
--- a/src/widgets/search-box/search-box.js
+++ b/src/widgets/search-box/search-box.js
@@ -1,9 +1,9 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
-let utils = require('../../lib/utils');
-let forEach = require('lodash/collection/forEach');
-let bem = require('../../lib/utils').bemHelper('ais-search-box');
-let cx = require('classnames');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import utils from '../../lib/utils.js';
+import forEach from 'lodash/collection/forEach';
+let bem = require('../../lib/utils.js').bemHelper('ais-search-box');
+import cx from 'classnames';
 
 const KEY_ENTER = 13;
 const KEY_SUPPRESS = 8;
@@ -94,7 +94,7 @@ function searchBox({
       input.classList.add(cx(bem('input'), cssClasses.input));
     },
     addPoweredBy: function(input) {
-      let PoweredBy = require('../../components/PoweredBy/PoweredBy');
+      let PoweredBy = require('../../components/PoweredBy/PoweredBy.js');
       let poweredByContainer = document.createElement('div');
       input.parentNode.insertBefore(poweredByContainer, input.nextSibling);
       let poweredByCssClasses = {
@@ -173,4 +173,4 @@ function searchBox({
   };
 }
 
-module.exports = searchBox;
+export default searchBox;
diff --git a/src/widgets/sort-by-selector/sort-by-selector.js b/src/widgets/sort-by-selector/sort-by-selector.js
index d454b52fcf..174925ef94 100644
--- a/src/widgets/sort-by-selector/sort-by-selector.js
+++ b/src/widgets/sort-by-selector/sort-by-selector.js
@@ -1,12 +1,12 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let findIndex = require('lodash/array/findIndex');
-let map = require('lodash/collection/map');
-let utils = require('../../lib/utils');
+import findIndex from 'lodash/array/findIndex';
+import map from 'lodash/collection/map';
+import utils from '../../lib/utils.js';
 let bem = utils.bemHelper('ais-sort-by-selector');
-let cx = require('classnames');
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
+import cx from 'classnames';
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
 
 /**
  * Instantiate a dropdown element to choose the current targeted index
@@ -39,7 +39,7 @@ function sortBySelector({
   }
 
   let containerNode = utils.getContainerNode(container);
-  let Selector = require('../../components/Selector');
+  let Selector = require('../../components/Selector.js');
   if (autoHideContainer === true) {
     Selector = autoHideContainerHOC(Selector);
   }
@@ -85,4 +85,4 @@ function sortBySelector({
   };
 }
 
-module.exports = sortBySelector;
+export default sortBySelector;
diff --git a/src/widgets/star-rating/__tests__/star-rating-test.js b/src/widgets/star-rating/__tests__/star-rating-test.js
index a8228f8781..489f178251 100644
--- a/src/widgets/star-rating/__tests__/star-rating-test.js
+++ b/src/widgets/star-rating/__tests__/star-rating-test.js
@@ -8,8 +8,8 @@ import jsdom from 'mocha-jsdom';
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
 
-let defaultTemplates = require('../defaultTemplates');
-let defaultLabels = require('../defaultLabels');
+import defaultTemplates from '../defaultTemplates.js';
+import defaultLabels from '../defaultLabels.js';
 
 describe('starRating()', () => {
   jsdom({useEach: true});
@@ -26,8 +26,8 @@ describe('starRating()', () => {
   let results;
 
   beforeEach(() => {
-    starRating = require('../star-rating');
-    RefinementList = require('../../../components/RefinementList/RefinementList');
+    starRating = require('../star-rating.js');
+    RefinementList = require('../../../components/RefinementList/RefinementList.js');
     ReactDOM = {render: sinon.spy()};
     starRating.__Rewire__('ReactDOM', ReactDOM);
     autoHideContainer = sinon.stub().returns(RefinementList);
diff --git a/src/widgets/star-rating/defaultLabels.js b/src/widgets/star-rating/defaultLabels.js
index d408031724..06311fdaee 100644
--- a/src/widgets/star-rating/defaultLabels.js
+++ b/src/widgets/star-rating/defaultLabels.js
@@ -1,3 +1,3 @@
-module.exports = {
+export default {
   andUp: '& Up'
 };
diff --git a/src/widgets/star-rating/defaultTemplates.js b/src/widgets/star-rating/defaultTemplates.js
index de555a47d2..185e671f8b 100644
--- a/src/widgets/star-rating/defaultTemplates.js
+++ b/src/widgets/star-rating/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   header: '',
   item: `<a class="{{cssClasses.link}}{{^count}} {{cssClasses.disabledLink}}{{/count}}" {{#count}}href="{{href}}"{{/count}}>
   {{#stars}}<span class="{{#.}}{{cssClasses.star}}{{/.}}{{^.}}{{cssClasses.emptyStar}}{{/.}}"></span>{{/stars}}
diff --git a/src/widgets/star-rating/star-rating.js b/src/widgets/star-rating/star-rating.js
index 80c3bcd794..a0d5e57355 100644
--- a/src/widgets/star-rating/star-rating.js
+++ b/src/widgets/star-rating/star-rating.js
@@ -1,15 +1,15 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
+import utils from '../../lib/utils.js';
 let bem = utils.bemHelper('ais-star-rating');
-let cx = require('classnames');
+import cx from 'classnames';
 
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
-let headerFooterHOC = require('../../decorators/headerFooter');
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
 
-let defaultTemplates = require('./defaultTemplates');
-let defaultLabels = require('./defaultLabels');
+import defaultTemplates from './defaultTemplates.js';
+import defaultLabels from './defaultLabels.js';
 
 const usage = `Usage:
 starRating({
@@ -63,7 +63,7 @@ function starRating({
   autoHideContainer = true
   }) {
   let containerNode = utils.getContainerNode(container);
-  let RefinementList = headerFooterHOC(require('../../components/RefinementList/RefinementList'));
+  let RefinementList = headerFooterHOC(require('../../components/RefinementList/RefinementList.js'));
   if (autoHideContainer === true) {
     RefinementList = autoHideContainerHOC(RefinementList);
   }
@@ -175,4 +175,4 @@ function starRating({
   };
 }
 
-module.exports = starRating;
+export default starRating;
diff --git a/src/widgets/stats/defaultTemplates.js b/src/widgets/stats/defaultTemplates.js
index 3c20149356..ae13fd6bee 100644
--- a/src/widgets/stats/defaultTemplates.js
+++ b/src/widgets/stats/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   header: '',
   body: `{{#hasNoResults}}No results{{/hasNoResults}}
   {{#hasOneResult}}1 result{{/hasOneResult}}
diff --git a/src/widgets/stats/stats.js b/src/widgets/stats/stats.js
index c3cacef3c7..34541c292e 100644
--- a/src/widgets/stats/stats.js
+++ b/src/widgets/stats/stats.js
@@ -1,13 +1,13 @@
-let React = require('react');
-let ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
-let headerFooterHOC = require('../../decorators/headerFooter');
-let bem = require('../../lib/utils').bemHelper('ais-stats');
-let cx = require('classnames');
+import utils from '../../lib/utils.js';
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
+let bem = require('../../lib/utils.js').bemHelper('ais-stats');
+import cx from 'classnames';
 
-let defaultTemplates = require('./defaultTemplates');
+import defaultTemplates from './defaultTemplates.js';
 
 /**
  * Display various stats about the current search state
@@ -44,7 +44,7 @@ function stats({
   if (!container) throw new Error(usage);
   let containerNode = utils.getContainerNode(container);
 
-  let Stats = headerFooterHOC(require('../../components/Stats/Stats'));
+  let Stats = headerFooterHOC(require('../../components/Stats/Stats.js'));
   if (autoHideContainer === true) {
     Stats = autoHideContainerHOC(Stats);
   }
@@ -89,4 +89,4 @@ function stats({
   };
 }
 
-module.exports = stats;
+export default stats;
diff --git a/src/widgets/toggle/__tests__/toggle-test.js b/src/widgets/toggle/__tests__/toggle-test.js
index 8b7d36f8ff..e0df493444 100644
--- a/src/widgets/toggle/__tests__/toggle-test.js
+++ b/src/widgets/toggle/__tests__/toggle-test.js
@@ -13,7 +13,7 @@ import Template from '../../../components/Template';
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
 
-const helpers = require('../../../lib/helpers')('en-US');
+const helpers = require('../../../lib/helpers.js')('en-US');
 
 describe('toggle()', () => {
   jsdom({useEach: true});
@@ -84,7 +84,7 @@ describe('toggle()', () => {
       beforeEach(() => {
         templateProps = {
           templatesConfig: undefined,
-          templates: require('../defaultTemplates'),
+          templates: require('../defaultTemplates.js'),
           useCustomCompileOptions: {header: false, item: false, footer: false},
           transformData: undefined
         };
diff --git a/src/widgets/toggle/defaultTemplates.js b/src/widgets/toggle/defaultTemplates.js
index 9e8e03e074..86f6202788 100644
--- a/src/widgets/toggle/defaultTemplates.js
+++ b/src/widgets/toggle/defaultTemplates.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   header: '',
   item: `<label class="{{cssClasses.label}}">
   <input type="checkbox" class="{{cssClasses.checkbox}}" value="{{name}}" {{#isRefined}}checked{{/isRefined}} />{{name}}
diff --git a/src/widgets/toggle/toggle.js b/src/widgets/toggle/toggle.js
index 64b73dc3f1..853dec52b2 100644
--- a/src/widgets/toggle/toggle.js
+++ b/src/widgets/toggle/toggle.js
@@ -1,15 +1,15 @@
-let find = require('lodash/collection/find');
-let React = require('react');
-let ReactDOM = require('react-dom');
+import find from 'lodash/collection/find';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-let utils = require('../../lib/utils');
+import utils from '../../lib/utils.js';
 let bem = utils.bemHelper('ais-toggle');
-let cx = require('classnames');
+import cx from 'classnames';
 
-let autoHideContainerHOC = require('../../decorators/autoHideContainer');
-let headerFooterHOC = require('../../decorators/headerFooter');
+import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
+import headerFooterHOC from '../../decorators/headerFooter.js';
 
-let defaultTemplates = require('./defaultTemplates');
+import defaultTemplates from './defaultTemplates.js';
 
 /**
  * Instantiate the toggling of a boolean facet filter on and off.
@@ -67,7 +67,7 @@ function toggle({
   } = {}) {
   let containerNode = utils.getContainerNode(container);
 
-  let RefinementList = headerFooterHOC(require('../../components/RefinementList/RefinementList'));
+  let RefinementList = headerFooterHOC(require('../../components/RefinementList/RefinementList.js'));
   if (autoHideContainer === true) {
     RefinementList = autoHideContainerHOC(RefinementList);
   }
@@ -161,4 +161,4 @@ function toggle({
 }
 
 
-module.exports = toggle;
+export default toggle;