From 5aa8035254b14d99f62652b9b8ddb248208bb988 Mon Sep 17 00:00:00 2001
From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Date: Wed, 1 Feb 2023 14:21:22 -0800
Subject: [PATCH] chore: run `npm run eslint -- --fix`
---
.eslintrc.cjs | 1 +
src/App.js | 18 +-
src/bundles/analytics.js | 12 +-
src/bundles/analytics.test.js | 2 +-
src/bundles/config-save.js | 4 +-
src/bundles/experiments.js | 2 +-
src/bundles/files.test.js | 2 +-
src/bundles/files/actions.js | 8 +-
src/bundles/files/index.js | 8 +-
src/bundles/files/selectors.js | 4 +-
src/bundles/files/utils.js | 6 +-
src/bundles/gateway.js | 2 +-
src/bundles/index.js | 50 +--
src/bundles/ipfs-provider.js | 6 +-
src/bundles/ipns.js | 2 +-
src/bundles/node-bandwidth-chart.test.js | 8 +-
src/bundles/notify.js | 4 +-
src/bundles/notify.test.js | 4 +-
src/bundles/peer-bandwidth.test.js | 10 +-
src/bundles/peer-locations.test.js | 2 +-
src/bundles/pinning.js | 4 +-
src/bundles/retry-init.js | 2 +-
src/bundles/routes.js | 20 +-
src/components/about-ipfs/AboutIpfs.js | 2 +-
src/components/about-webui/AboutWebUI.js | 2 +-
.../analytics-banner/AnalyticsBanner.js | 2 +-
.../analytics-toggle/AnalyticsToggle.js | 4 +-
.../api-address-form/ApiAddressForm.js | 4 +-
src/components/box/Box.js | 2 +-
src/components/button/Button.stories.js | 2 +-
src/components/checkbox/Checkbox.js | 2 +-
src/components/checkbox/Checkbox.stories.js | 2 +-
src/components/cid/Cid.js | 2 +-
src/components/cid/Cid.stories.js | 2 +-
src/components/cli-tutor-mode/CliTutorMode.js | 14 +-
src/components/context-menu/ContextMenu.js | 2 +-
src/components/error/ErrorBoundary.js | 2 +-
.../experiments/ExperimentsPanel.js | 6 +-
src/components/identicon/Identicon.stories.js | 2 +-
src/components/ipns-manager/IpnsManager.js | 24 +-
.../generate-key-modal/GenerateKeyModal.js | 4 +-
.../remove-key-modal/RemoveKeyModal.js | 6 +-
.../rename-key-modal/RenameKeyModal.js | 4 +-
src/components/is-connected/IsConnected.js | 4 +-
.../is-not-connected/IsNotConnected.js | 6 +-
.../language-selector/LanguageSelector.js | 8 +-
.../LanguageSelector.stories.js | 4 +-
.../language-modal/LanguageModal.js | 8 +-
.../loading-animation/LoadingAnimation.js | 6 +-
src/components/modal/Modal.js | 2 +-
src/components/notify/Notify.js | 2 +-
src/components/notify/Toast.js | 2 +-
src/components/notify/Toast.stories.js | 2 +-
.../pinning-manager/PinningManager.js | 24 +-
.../pinning-manager/PinningManager.stories.js | 6 +-
.../auto-upload-modal/AutoUploadModal.js | 4 +-
.../PinningManagerModal.js | 8 +-
.../PinningManagerServiceModal.js | 4 +-
.../progress-bar/ProgressBar.stories.js | 2 +-
.../public-gateway-form/PublicGatewayForm.js | 4 +-
src/components/radio/Radio.stories.js | 2 +-
.../text-input-modal/TextInputModal.js | 6 +-
src/dnd-decorator.js | 2 +-
src/env.test.js | 2 +-
src/explore/ExploreContainer.js | 2 +-
src/explore/StartExploringContainer.js | 2 +-
src/files/FilesPage.js | 20 +-
src/files/breadcrumbs/Breadcrumbs.js | 2 +-
src/files/breadcrumbs/Breadcrumbs.stories.js | 2 +-
src/files/context-menu/ContextMenu.js | 22 +-
src/files/context-menu/ContextMenu.stories.js | 2 +-
src/files/dropdown/Dropdown.js | 2 +-
src/files/explore-form/FilesExploreForm.js | 6 +-
.../explore-form/FilesExploreForm.stories.js | 2 +-
src/files/file-icon/FileIcon.js | 18 +-
.../file-import-status/FileImportStatus.js | 16 +-
.../FileImportStatus.stories.js | 6 +-
src/files/file-input/FileInput.js | 16 +-
src/files/file-preview/FilePreview.js | 4 +-
src/files/file/File.js | 12 +-
src/files/files-list/FilesList.js | 12 +-
src/files/files-list/FilesList.stories.js | 6 +-
src/files/header/Header.js | 12 +-
src/files/info-boxes/InfoBoxes.js | 4 +-
src/files/info-boxes/InfoBoxes.stories.js | 2 +-
.../info-boxes/add-files-info/AddFilesInfo.js | 2 +-
.../add-files-info/AddFilesInfo.stories.js | 4 +-
.../companion-info/CompanionInfo.js | 2 +-
.../companion-info/CompanionInfo.stories.js | 2 +-
src/files/modals/Modals.js | 22 +-
.../add-by-path-modal/AddByPathModal.js | 6 +-
.../AddByPathModal.stories.js | 4 +-
.../modals/new-folder-modal/NewFolderModal.js | 4 +-
.../NewFolderModal.stories.js | 4 +-
.../modals/pinning-modal/PinningModal.js | 14 +-
.../pinning-modal/PinningModal.stories.js | 4 +-
.../modals/publish-modal/PublishModal.js | 14 +-
.../publish-modal/PublishModal.stories.js | 4 +-
src/files/modals/remove-modal/RemoveModal.js | 8 +-
.../remove-modal/RemoveModal.stories.js | 2 +-
src/files/modals/rename-modal/RenameModal.js | 4 +-
.../rename-modal/RenameModal.stories.js | 4 +-
src/files/modals/share-modal/ShareModal.js | 6 +-
.../modals/share-modal/ShareModal.stories.js | 4 +-
src/files/pin-icon/PinIcon.js | 4 +-
src/files/selected-actions/SelectedActions.js | 16 +-
.../SelectedActions.stories.js | 4 +-
src/files/type-from-ext/index.js | 2 +-
src/i18n-decorator.js | 2 +-
src/icons/hocs/GlyphPinCloud.js | 4 +-
src/icons/index.js | 290 +++++++++---------
src/index.js | 10 +-
src/lib/count-dirs.test.js | 2 +-
src/lib/dnd-backend.test.js | 2 +-
src/lib/files.test.js | 2 +-
src/lib/i18n.js | 2 +-
src/loader/AsyncRequestLoader.js | 2 +-
src/loader/AsyncRequestLoader.test.js | 2 +-
src/loader/ComponentLoader.stories.js | 2 +-
src/navigation/NavBar.js | 10 +-
src/navigation/NavBar.stories.js | 4 +-
src/peers/AddConnection/AddConnection.js | 12 +-
src/peers/PeersPage.js | 18 +-
src/peers/PeersTable/PeersTable.js | 4 +-
src/peers/WorldMap/WorldMap.js | 6 +-
src/pins/PinsPage.js | 2 +-
src/pins/PinsStatuses.js | 4 +-
src/pins/PinsStatuses.stories.js | 4 +-
src/settings/AnalyticsPage.js | 6 +-
src/settings/SettingsPage.js | 38 +--
src/settings/SettingsPage.stories.js | 6 +-
src/settings/editor/JsonEditor.js | 2 +-
src/settings/editor/JsonEditor.stories.js | 2 +-
src/status/BandwidthStatsDisabled.js | 4 +-
src/status/CountryChart.js | 2 +-
src/status/NetworkTraffic.js | 4 +-
src/status/NodeBandwidthChart.js | 2 +-
src/status/NodeInfo.js | 2 +-
src/status/NodeInfoAdvanced.js | 6 +-
src/status/PeerBandwidthTable.js | 6 +-
src/status/StatusConnected.js | 2 +-
src/status/StatusConnected.stories.js | 2 +-
src/status/StatusPage.js | 24 +-
src/welcome/WelcomePage.js | 14 +-
test/helpers/bandwidth.js | 2 +-
test/helpers/ip.js | 2 +-
146 files changed, 600 insertions(+), 599 deletions(-)
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 1f6522007..92946aeff 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -11,6 +11,7 @@ module.exports = {
// ignore .ts files because it fails to parse it.
ignorePatterns: 'src/**/*.ts',
rules: {
+ 'import/esm-extensions': 'error',
'react/prop-types': [0, { ignore: ['className'], customValidators: [], skipUndeclared: true }] // TODO: set this rule to error when all issues are resolved.
},
overrides: [
diff --git a/src/App.js b/src/App.js
index adc24d3c5..d585877b7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,20 +4,20 @@ import { connect } from 'redux-bundler-react'
import { getNavHelper } from 'internal-nav-helper'
import ReactJoyride from 'react-joyride'
import { withTranslation } from 'react-i18next'
-import { normalizeFiles } from './lib/files'
+import { normalizeFiles } from './lib/files.js'
// React DnD
import { DropTarget } from 'react-dnd'
import { NativeTypes } from 'react-dnd-html5-backend'
// Lib
-import { appTour } from './lib/tours'
-import { getJoyrideLocales } from './helpers/i8n'
+import { appTour } from './lib/tours.js'
+import { getJoyrideLocales } from './helpers/i8n.js'
// Components
-import NavBar from './navigation/NavBar'
-import ComponentLoader from './loader/ComponentLoader'
-import Notify from './components/notify/Notify'
-import Connected from './components/connected/Connected'
-import TourHelper from './components/tour/TourHelper'
-import FilesExploreForm from './files/explore-form/FilesExploreForm'
+import NavBar from './navigation/NavBar.js'
+import ComponentLoader from './loader/ComponentLoader.js'
+import Notify from './components/notify/Notify.js'
+import Connected from './components/connected/Connected.js'
+import TourHelper from './components/tour/TourHelper.js'
+import FilesExploreForm from './files/explore-form/FilesExploreForm.js'
export class App extends Component {
static propTypes = {
diff --git a/src/bundles/analytics.js b/src/bundles/analytics.js
index 4f3f6e123..0f5ff47df 100644
--- a/src/bundles/analytics.js
+++ b/src/bundles/analytics.js
@@ -3,13 +3,13 @@
// @ts-ignore
import root from 'window-or-global'
import changeCase from 'change-case'
-import * as Enum from './enum'
+import * as Enum from './enum.js'
import { createSelector } from 'redux-bundler'
-import { ACTIONS as FILES } from './files/consts'
-import { ACTIONS as CONIFG } from './config-save'
-import { ACTIONS as INIT } from './ipfs-provider'
-import { ACTIONS as EXP } from './experiments'
-import { getDeploymentEnv } from '../env'
+import { ACTIONS as FILES } from './files/consts.js'
+import { ACTIONS as CONIFG } from './config-save.js'
+import { ACTIONS as INIT } from './ipfs-provider.js'
+import { ACTIONS as EXP } from './experiments.js'
+import { getDeploymentEnv } from '../env.js'
/**
* @typedef {import('./ipfs-provider').Init} Init
diff --git a/src/bundles/analytics.test.js b/src/bundles/analytics.test.js
index 6b1f76015..aa82bc2ae 100644
--- a/src/bundles/analytics.test.js
+++ b/src/bundles/analytics.test.js
@@ -1,6 +1,6 @@
/* global describe, it, expect, beforeEach, afterEach, jest */
import { composeBundlesRaw } from 'redux-bundler'
-import createAnalyticsBundle from './analytics'
+import createAnalyticsBundle from './analytics.js'
beforeEach(() => {
global.Countly = {
diff --git a/src/bundles/config-save.js b/src/bundles/config-save.js
index 76ccda8c9..1c6a32c90 100644
--- a/src/bundles/config-save.js
+++ b/src/bundles/config-save.js
@@ -1,7 +1,7 @@
// @ts-check
-import * as Enum from './enum'
-import { perform } from './task'
+import * as Enum from './enum.js'
+import { perform } from './task.js'
/**
* @typedef {import('./task').Perform<'CONFIG_SAVE', Error, void, void>} ConfigSave
diff --git a/src/bundles/experiments.js b/src/bundles/experiments.js
index de5815672..550b02e60 100644
--- a/src/bundles/experiments.js
+++ b/src/bundles/experiments.js
@@ -1,5 +1,5 @@
import { createSelector } from 'redux-bundler'
-import * as Enum from './enum'
+import * as Enum from './enum.js'
export const ACTIONS = Enum.from([
'EXPERIMENTS_TOGGLE',
'EXPERIMENTS_UPDATE_STATE'
diff --git a/src/bundles/files.test.js b/src/bundles/files.test.js
index 97eb0e811..8aa6aef32 100644
--- a/src/bundles/files.test.js
+++ b/src/bundles/files.test.js
@@ -1,6 +1,6 @@
/* global it, expect, jest */
import { composeBundlesRaw } from 'redux-bundler'
-import createFilesBundle from './files'
+import createFilesBundle from './files/index.js'
import CID from 'cids'
const iterate = async function * (items) {
diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 1d164e192..7b9e56231 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -1,16 +1,16 @@
/* eslint-disable require-yield */
import { join, dirname, basename } from 'path'
-import { getDownloadLink, getShareableLink, getCarLink } from '../../lib/files'
-import countDirs from '../../lib/count-dirs'
+import { getDownloadLink, getShareableLink, getCarLink } from '../../lib/files.js'
+import countDirs from '../../lib/count-dirs.js'
import memoize from 'p-memoize'
import all from 'it-all'
import map from 'it-map'
import last from 'it-last'
import CID from 'cids'
-import { spawn, perform, send, ensureMFS, Channel, sortFiles, infoFromPath } from './utils'
-import { IGNORED_FILES, ACTIONS } from './consts'
+import { spawn, perform, send, ensureMFS, Channel, sortFiles, infoFromPath } from './utils.js'
+import { IGNORED_FILES, ACTIONS } from './consts.js'
/**
* @typedef {import('ipfs').IPFSService} IPFSService
diff --git a/src/bundles/files/index.js b/src/bundles/files/index.js
index fd75946f0..fd45fa221 100644
--- a/src/bundles/files/index.js
+++ b/src/bundles/files/index.js
@@ -1,7 +1,7 @@
-import { sortFiles } from './utils'
-import { DEFAULT_STATE, ACTIONS, SORTING } from './consts'
-import selectors from './selectors'
-import actions from './actions'
+import { sortFiles } from './utils.js'
+import { DEFAULT_STATE, ACTIONS, SORTING } from './consts.js'
+import selectors from './selectors.js'
+import actions from './actions.js'
export { ACTIONS }
diff --git a/src/bundles/files/selectors.js b/src/bundles/files/selectors.js
index aa29eb1f5..2806c6384 100644
--- a/src/bundles/files/selectors.js
+++ b/src/bundles/files/selectors.js
@@ -1,6 +1,6 @@
import { createSelector } from 'redux-bundler'
-import { ACTIONS } from './consts'
-import { infoFromPath } from './utils'
+import { ACTIONS } from './consts.js'
+import { infoFromPath } from './utils.js'
/**
* @typedef {import('./protocol').Model} Files
diff --git a/src/bundles/files/utils.js b/src/bundles/files/utils.js
index 2f4c8eaa8..58749d97d 100644
--- a/src/bundles/files/utils.js
+++ b/src/bundles/files/utils.js
@@ -1,6 +1,6 @@
-import { sortByName, sortBySize } from '../../lib/sort'
-import { IS_MAC, SORTING } from './consts'
-import * as Task from '../task'
+import { sortByName, sortBySize } from '../../lib/sort.js'
+import { IS_MAC, SORTING } from './consts.js'
+import * as Task from '../task.js'
/**
* @typedef {import('ipfs').IPFSService} IPFSService
diff --git a/src/bundles/gateway.js b/src/bundles/gateway.js
index 18cfa6197..08e54b4bc 100644
--- a/src/bundles/gateway.js
+++ b/src/bundles/gateway.js
@@ -1,4 +1,4 @@
-import { readSetting, writeSetting } from './local-storage'
+import { readSetting, writeSetting } from './local-storage.js'
export const DEFAULT_GATEWAY = 'https://ipfs.io' // TODO: switch to dweb.link when https://github.com/ipfs/kubo/issues/7318
const IMG_ARRAY = [
diff --git a/src/bundles/index.js b/src/bundles/index.js
index a4d288a75..ca11ce5ff 100644
--- a/src/bundles/index.js
+++ b/src/bundles/index.js
@@ -1,30 +1,30 @@
import { composeBundles, createCacheBundle } from 'redux-bundler'
-import ipfsProvider from './ipfs-provider'
+import ipfsProvider from './ipfs-provider.js'
import { exploreBundle } from 'ipld-explorer-components'
-import appIdle from './app-idle'
-import nodeBandwidthChartBundle from './node-bandwidth-chart'
-import nodeBandwidthBundle from './node-bandwidth'
-import peersBundle from './peers'
-import peerLocationsBundle from './peer-locations'
-import pinningBundle from './pinning'
-import routesBundle from './routes'
-import redirectsBundle from './redirects'
-import filesBundle from './files'
-import configBundle from './config'
-import configSaveBundle from './config-save'
-import toursBundle from './tours'
-import notifyBundle from './notify'
-import connectedBundle from './connected'
-import retryInitBundle from './retry-init'
-import identityBundle from './identity'
-import bundleCache from '../lib/bundle-cache'
-import ipfsDesktop from './ipfs-desktop'
-import repoStats from './repo-stats'
-import createAnalyticsBundle from './analytics'
-import experimentsBundle from './experiments'
-import cliTutorModeBundle from './cli-tutor-mode'
-import gatewayBundle from './gateway'
-import ipnsBundle from './ipns'
+import appIdle from './app-idle.js'
+import nodeBandwidthChartBundle from './node-bandwidth-chart.js'
+import nodeBandwidthBundle from './node-bandwidth.js'
+import peersBundle from './peers.js'
+import peerLocationsBundle from './peer-locations.js'
+import pinningBundle from './pinning.js'
+import routesBundle from './routes.js'
+import redirectsBundle from './redirects.js'
+import filesBundle from './files/index.js'
+import configBundle from './config.js'
+import configSaveBundle from './config-save.js'
+import toursBundle from './tours.js'
+import notifyBundle from './notify.js'
+import connectedBundle from './connected.js'
+import retryInitBundle from './retry-init.js'
+import identityBundle from './identity.js'
+import bundleCache from '../lib/bundle-cache.js'
+import ipfsDesktop from './ipfs-desktop.js'
+import repoStats from './repo-stats.js'
+import createAnalyticsBundle from './analytics.js'
+import experimentsBundle from './experiments.js'
+import cliTutorModeBundle from './cli-tutor-mode.js'
+import gatewayBundle from './gateway.js'
+import ipnsBundle from './ipns.js'
export default composeBundles(
createCacheBundle({
diff --git a/src/bundles/ipfs-provider.js b/src/bundles/ipfs-provider.js
index 71ee4648d..a1f6399eb 100644
--- a/src/bundles/ipfs-provider.js
+++ b/src/bundles/ipfs-provider.js
@@ -5,9 +5,9 @@ import multiaddr from 'multiaddr'
import { getIpfs, providers } from 'ipfs-provider'
import first from 'it-first'
import last from 'it-last'
-import * as Enum from './enum'
-import { perform } from './task'
-import { readSetting, writeSetting } from './local-storage'
+import * as Enum from './enum.js'
+import { perform } from './task.js'
+import { readSetting, writeSetting } from './local-storage.js'
/* TODO: restore when no longer bundle standalone ipld with ipld-explorer
* context: https://github.com/ipfs/ipld-explorer-components/pull/289
diff --git a/src/bundles/ipns.js b/src/bundles/ipns.js
index 10546118a..d05b8bd1a 100644
--- a/src/bundles/ipns.js
+++ b/src/bundles/ipns.js
@@ -1,5 +1,5 @@
import all from 'it-all'
-import { readSetting, writeSetting } from './local-storage'
+import { readSetting, writeSetting } from './local-storage.js'
const init = () => ({
keys: [],
diff --git a/src/bundles/node-bandwidth-chart.test.js b/src/bundles/node-bandwidth-chart.test.js
index fdde458a2..dd599acc1 100644
--- a/src/bundles/node-bandwidth-chart.test.js
+++ b/src/bundles/node-bandwidth-chart.test.js
@@ -1,9 +1,9 @@
/* global it, expect */
import { composeBundlesRaw, createReactorBundle } from 'redux-bundler'
-import createNodeBandwidthChartBundle from './node-bandwidth-chart'
-import { randomInt } from '../../test/helpers/random'
-import sleep from '../../test/helpers/sleep'
-import { fakeBandwidth } from '../../test/helpers/bandwidth'
+import createNodeBandwidthChartBundle from './node-bandwidth-chart.js'
+import { randomInt } from '../../test/helpers/random.js'
+import sleep from '../../test/helpers/sleep.js'
+import { fakeBandwidth } from '../../test/helpers/bandwidth.js'
const mockNodeBandwidthBundle = {
name: 'nodeBandwidth',
diff --git a/src/bundles/notify.js b/src/bundles/notify.js
index 24d44aad4..2df4d5339 100644
--- a/src/bundles/notify.js
+++ b/src/bundles/notify.js
@@ -1,6 +1,6 @@
import { createSelector } from 'redux-bundler'
-import { ACTIONS as EXP_ACTIONS } from './experiments'
-import { ACTIONS as FILES_ACTIONS } from './files'
+import { ACTIONS as EXP_ACTIONS } from './experiments.js'
+import { ACTIONS as FILES_ACTIONS } from './files/index.js'
/*
# Notify
diff --git a/src/bundles/notify.test.js b/src/bundles/notify.test.js
index b3e212846..00eda5c3b 100644
--- a/src/bundles/notify.test.js
+++ b/src/bundles/notify.test.js
@@ -1,7 +1,7 @@
/* global it, expect */
import { composeBundlesRaw, createReactorBundle } from 'redux-bundler'
-import notifyBundle from './notify'
-import sleep from '../../test/helpers/sleep'
+import notifyBundle from './notify.js'
+import sleep from '../../test/helpers/sleep.js'
const appTimeBundle = {
name: 'appTime',
diff --git a/src/bundles/peer-bandwidth.test.js b/src/bundles/peer-bandwidth.test.js
index 9862d9501..7e9962239 100644
--- a/src/bundles/peer-bandwidth.test.js
+++ b/src/bundles/peer-bandwidth.test.js
@@ -1,10 +1,10 @@
/* global it, expect */
import { composeBundlesRaw, createReactorBundle } from 'redux-bundler'
-import createPeerBandwidthBundle from './peer-bandwidth'
-import { fakeCid } from '../../test/helpers/cid'
-import { randomInt } from '../../test/helpers/random'
-import sleep from '../../test/helpers/sleep'
-import { fakeBandwidth } from '../../test/helpers/bandwidth'
+import createPeerBandwidthBundle from './peer-bandwidth.js'
+import { fakeCid } from '../../test/helpers/cid.js'
+import { randomInt } from '../../test/helpers/random.js'
+import sleep from '../../test/helpers/sleep.js'
+import { fakeBandwidth } from '../../test/helpers/bandwidth.js'
async function fakePeer () {
const peer = (await fakeCid()).toBaseEncodedString('base58btc')
diff --git a/src/bundles/peer-locations.test.js b/src/bundles/peer-locations.test.js
index 9e3e0a33b..c41f990fd 100644
--- a/src/bundles/peer-locations.test.js
+++ b/src/bundles/peer-locations.test.js
@@ -1,5 +1,5 @@
import { createSelector } from 'redux-bundler'
-import createPeersLocationBundle from './peer-locations'
+import createPeersLocationBundle from './peer-locations.js'
jest.mock('redux-bundler', () => ({
createAsyncResourceBundle: (args) => ({ ...args }),
diff --git a/src/bundles/pinning.js b/src/bundles/pinning.js
index abcdfc7de..1b06e1aa5 100644
--- a/src/bundles/pinning.js
+++ b/src/bundles/pinning.js
@@ -1,10 +1,10 @@
// @ts-check
-import { pinningServiceTemplates } from '../constants/pinning'
+import { pinningServiceTemplates } from '../constants/pinning.js'
import memoize from 'p-memoize'
import CID from 'cids'
import all from 'it-all'
-import { readSetting, writeSetting } from './local-storage'
+import { readSetting, writeSetting } from './local-storage.js'
// This bundle leverages createCacheBundle and persistActions for
// the persistence layer that keeps pins in IndexDB store
diff --git a/src/bundles/retry-init.js b/src/bundles/retry-init.js
index f67741010..fb837e7d9 100644
--- a/src/bundles/retry-init.js
+++ b/src/bundles/retry-init.js
@@ -1,5 +1,5 @@
import { createSelector } from 'redux-bundler'
-import { ACTIONS } from './ipfs-provider'
+import { ACTIONS } from './ipfs-provider.js'
/**
* @typedef {import('./ipfs-provider').Message} Message
diff --git a/src/bundles/routes.js b/src/bundles/routes.js
index 897a66f54..b3c632ef4 100644
--- a/src/bundles/routes.js
+++ b/src/bundles/routes.js
@@ -1,14 +1,14 @@
import { createRouteBundle } from 'redux-bundler'
-import StatusPage from '../status/LoadableStatusPage'
-import FilesPage from '../files/LoadableFilesPage'
-import PinsPage from '../pins/LoadablePinsPage'
-import StartExploringPage from '../explore/LoadableStartExploringPage'
-import ExplorePage from '../explore/LoadableExplorePage'
-import PeersPage from '../peers/LoadablePeersPage'
-import SettingsPage from '../settings/LoadableSettingsPage'
-import AnalyticsPage from '../settings/AnalyticsPage'
-import WelcomePage from '../welcome/LoadableWelcomePage'
-import BlankPage from '../blank/BlankPage'
+import StatusPage from '../status/LoadableStatusPage.js'
+import FilesPage from '../files/LoadableFilesPage.js'
+import PinsPage from '../pins/LoadablePinsPage.js'
+import StartExploringPage from '../explore/LoadableStartExploringPage.js'
+import ExplorePage from '../explore/LoadableExplorePage.js'
+import PeersPage from '../peers/LoadablePeersPage.js'
+import SettingsPage from '../settings/LoadableSettingsPage.js'
+import AnalyticsPage from '../settings/AnalyticsPage.js'
+import WelcomePage from '../welcome/LoadableWelcomePage.js'
+import BlankPage from '../blank/BlankPage.js'
export default createRouteBundle({
'/explore': StartExploringPage,
diff --git a/src/components/about-ipfs/AboutIpfs.js b/src/components/about-ipfs/AboutIpfs.js
index 65706ad98..623718378 100644
--- a/src/components/about-ipfs/AboutIpfs.js
+++ b/src/components/about-ipfs/AboutIpfs.js
@@ -1,6 +1,6 @@
import React from 'react'
import { withTranslation, Trans } from 'react-i18next'
-import Box from '../box/Box'
+import Box from '../box/Box.js'
export const AboutIpfs = ({ t }) => {
return (
diff --git a/src/components/about-webui/AboutWebUI.js b/src/components/about-webui/AboutWebUI.js
index 60c14d431..8bcb81a01 100644
--- a/src/components/about-webui/AboutWebUI.js
+++ b/src/components/about-webui/AboutWebUI.js
@@ -1,6 +1,6 @@
import React from 'react'
import { withTranslation, Trans } from 'react-i18next'
-import Box from '../box/Box'
+import Box from '../box/Box.js'
export const AboutWebUI = ({ t }) => {
return (
diff --git a/src/components/analytics-banner/AnalyticsBanner.js b/src/components/analytics-banner/AnalyticsBanner.js
index 96b909b47..818bae4f5 100644
--- a/src/components/analytics-banner/AnalyticsBanner.js
+++ b/src/components/analytics-banner/AnalyticsBanner.js
@@ -1,5 +1,5 @@
import React from 'react'
-import Button from '../button/Button'
+import Button from '../button/Button.js'
const AnalyticsBanner = ({ className, label, yesLabel, onYes }) => {
return (
diff --git a/src/components/analytics-toggle/AnalyticsToggle.js b/src/components/analytics-toggle/AnalyticsToggle.js
index 3bb6f4c33..22e5ec473 100644
--- a/src/components/analytics-toggle/AnalyticsToggle.js
+++ b/src/components/analytics-toggle/AnalyticsToggle.js
@@ -1,8 +1,8 @@
import React, { useState } from 'react'
import { Trans } from 'react-i18next'
import { connect } from 'redux-bundler-react'
-import Checkbox from '../checkbox/Checkbox'
-import Details from '../details/Details'
+import Checkbox from '../checkbox/Checkbox.js'
+import Details from '../details/Details.js'
const ExampleRequest = ({ url, method = 'GET' }) => {
return (
diff --git a/src/components/api-address-form/ApiAddressForm.js b/src/components/api-address-form/ApiAddressForm.js
index ad75735b9..de3841cee 100644
--- a/src/components/api-address-form/ApiAddressForm.js
+++ b/src/components/api-address-form/ApiAddressForm.js
@@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react'
import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
-import Button from '../button/Button'
-import { checkValidAPIAddress } from '../../bundles/ipfs-provider'
+import Button from '../button/Button.js'
+import { checkValidAPIAddress } from '../../bundles/ipfs-provider.js'
const ApiAddressForm = ({ t, doUpdateIpfsApiAddress, ipfsApiAddress, ipfsInitFailed }) => {
const [value, setValue] = useState(asAPIString(ipfsApiAddress))
diff --git a/src/components/box/Box.js b/src/components/box/Box.js
index a79f55dc4..2233b5fea 100644
--- a/src/components/box/Box.js
+++ b/src/components/box/Box.js
@@ -1,5 +1,5 @@
import React from 'react'
-import ErrorBoundary from '../error/ErrorBoundary'
+import ErrorBoundary from '../error/ErrorBoundary.js'
export const Box = ({
className = 'pa4',
diff --git a/src/components/button/Button.stories.js b/src/components/button/Button.stories.js
index cb5354f85..689dda9da 100644
--- a/src/components/button/Button.stories.js
+++ b/src/components/button/Button.stories.js
@@ -1,7 +1,7 @@
import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
-import Button from './Button'
+import Button from './Button.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
index f5e35bbba..6478449d0 100644
--- a/src/components/checkbox/Checkbox.js
+++ b/src/components/checkbox/Checkbox.js
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import Tick from '../../icons/GlyphSmallTick'
+import Tick from '../../icons/GlyphSmallTick.js'
import './Checkbox.css'
const Checkbox = ({ className, label, disabled, checked, onChange, ...props }) => {
diff --git a/src/components/checkbox/Checkbox.stories.js b/src/components/checkbox/Checkbox.stories.js
index d4222cda2..a3d1e8de1 100644
--- a/src/components/checkbox/Checkbox.stories.js
+++ b/src/components/checkbox/Checkbox.stories.js
@@ -1,7 +1,7 @@
import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
-import Checkbox from './Checkbox'
+import Checkbox from './Checkbox.js'
const bigPicture = {
transform: 'scale(5)',
diff --git a/src/components/cid/Cid.js b/src/components/cid/Cid.js
index 392e28078..409b02f69 100644
--- a/src/components/cid/Cid.js
+++ b/src/components/cid/Cid.js
@@ -1,5 +1,5 @@
import React from 'react'
-import Identicon from '../identicon/Identicon'
+import Identicon from '../identicon/Identicon.js'
export function cidStartAndEnd (value) {
const chars = value.split('')
diff --git a/src/components/cid/Cid.stories.js b/src/components/cid/Cid.stories.js
index 790cb37d2..6f02de7cf 100644
--- a/src/components/cid/Cid.stories.js
+++ b/src/components/cid/Cid.stories.js
@@ -1,4 +1,4 @@
-import Cid from './Cid'
+import Cid from './Cid.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/components/cli-tutor-mode/CliTutorMode.js b/src/components/cli-tutor-mode/CliTutorMode.js
index 6d2530db2..cca503806 100644
--- a/src/components/cli-tutor-mode/CliTutorMode.js
+++ b/src/components/cli-tutor-mode/CliTutorMode.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types'
import { connect } from 'redux-bundler-react'
// Components
-import { Modal, ModalBody, ModalActions } from '../modal/Modal'
-import StrokeCode from '../../icons/StrokeCode'
-import Button from '../button/Button'
-import Overlay from '../overlay/Overlay'
-import Shell from '../shell/Shell'
-import StrokeDownload from '../../icons/StrokeDownload'
-import { cliCmdKeys, cliCommandList, cliCmdPrefixes } from '../../bundles/files/consts'
+import { Modal, ModalBody, ModalActions } from '../modal/Modal.js'
+import StrokeCode from '../../icons/StrokeCode.js'
+import Button from '../button/Button.js'
+import Overlay from '../overlay/Overlay.js'
+import Shell from '../shell/Shell.js'
+import StrokeDownload from '../../icons/StrokeDownload.js'
+import { cliCmdKeys, cliCommandList, cliCmdPrefixes } from '../../bundles/files/consts.js'
export const CliTutorialModal = ({ command, t, onLeave, className, downloadConfig, ...props }) => {
const onClickCopyToClipboard = (cmd) => {
diff --git a/src/components/context-menu/ContextMenu.js b/src/components/context-menu/ContextMenu.js
index 50ed61e8c..f79151abf 100644
--- a/src/components/context-menu/ContextMenu.js
+++ b/src/components/context-menu/ContextMenu.js
@@ -2,7 +2,7 @@ import React, { useRef, useState, useLayoutEffect, useEffect } from 'react'
import classNames from 'classnames'
import PropTypes from 'prop-types'
import { DropdownMenu } from '@tableflip/react-dropdown'
-import Portal from '../../helpers/Portal'
+import Portal from '../../helpers/Portal.js'
/**
* Shows a context menu with specified children elements relative to a target element
diff --git a/src/components/error/ErrorBoundary.js b/src/components/error/ErrorBoundary.js
index e32409562..43cb91ac7 100644
--- a/src/components/error/ErrorBoundary.js
+++ b/src/components/error/ErrorBoundary.js
@@ -1,5 +1,5 @@
import React from 'react'
-import ErrorIcon from '../../icons/GlyphSmallCancel'
+import ErrorIcon from '../../icons/GlyphSmallCancel.js'
import root from 'window-or-global'
class ErrorBoundary extends React.Component {
diff --git a/src/components/experiments/ExperimentsPanel.js b/src/components/experiments/ExperimentsPanel.js
index 3853e1969..d95dd1506 100644
--- a/src/components/experiments/ExperimentsPanel.js
+++ b/src/components/experiments/ExperimentsPanel.js
@@ -1,8 +1,8 @@
import React from 'react'
import { connect } from 'redux-bundler-react'
-import Checkbox from '../checkbox/Checkbox'
-import Box from '../box/Box'
-import Title from '../../settings/Title'
+import Checkbox from '../checkbox/Checkbox.js'
+import Box from '../box/Box.js'
+import Title from '../../settings/Title.js'
const Experiments = ({ doExpToggleAction, experiments, t }) => {
// if there are no experiments to show don't render
diff --git a/src/components/identicon/Identicon.stories.js b/src/components/identicon/Identicon.stories.js
index ddaf62ba3..b9bdf0683 100644
--- a/src/components/identicon/Identicon.stories.js
+++ b/src/components/identicon/Identicon.stories.js
@@ -1,5 +1,5 @@
// @ts-check
-import IdenticonEl from './Identicon'
+import IdenticonEl from './Identicon.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/components/ipns-manager/IpnsManager.js b/src/components/ipns-manager/IpnsManager.js
index 19ee628ed..871b99a6a 100644
--- a/src/components/ipns-manager/IpnsManager.js
+++ b/src/components/ipns-manager/IpnsManager.js
@@ -1,20 +1,20 @@
import React, { Fragment, useState, useRef, useMemo, useEffect } from 'react'
import { connect } from 'redux-bundler-react'
-import { sortByProperty } from '../../lib/sort'
+import { sortByProperty } from '../../lib/sort.js'
import { AutoSizer, Table, Column, SortDirection } from 'react-virtualized'
// Components
-import Button from '../button/Button'
-import Overlay from '../overlay/Overlay'
-import GenerateKeyModal from './generate-key-modal/GenerateKeyModal'
-import RenameKeyModal from './rename-key-modal/RenameKeyModal'
-import RemoveKeyModal from './remove-key-modal/RemoveKeyModal'
-
-import ContextMenu from '../context-menu/ContextMenu'
-import ContextMenuItem from '../context-menu/ContextMenuItem'
-import GlyphDots from '../../icons/GlyphDots'
-import StrokePencil from '../../icons/StrokePencil'
-import StrokeCancel from '../../icons/StrokeCancel'
+import Button from '../button/Button.js'
+import Overlay from '../overlay/Overlay.js'
+import GenerateKeyModal from './generate-key-modal/GenerateKeyModal.js'
+import RenameKeyModal from './rename-key-modal/RenameKeyModal.js'
+import RemoveKeyModal from './remove-key-modal/RemoveKeyModal.js'
+
+import ContextMenu from '../context-menu/ContextMenu.js'
+import ContextMenuItem from '../context-menu/ContextMenuItem.js'
+import GlyphDots from '../../icons/GlyphDots.js'
+import StrokePencil from '../../icons/StrokePencil.js'
+import StrokeCancel from '../../icons/StrokeCancel.js'
const ROW_HEIGHT = 50
const HEADER_HEIGHT = 32
diff --git a/src/components/ipns-manager/generate-key-modal/GenerateKeyModal.js b/src/components/ipns-manager/generate-key-modal/GenerateKeyModal.js
index 3bc88f3b0..f23b4a3b0 100644
--- a/src/components/ipns-manager/generate-key-modal/GenerateKeyModal.js
+++ b/src/components/ipns-manager/generate-key-modal/GenerateKeyModal.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
-import Icon from '../../../icons/StrokeSpeaker'
-import TextInputModal from '../../../components/text-input-modal/TextInputModal'
+import Icon from '../../../icons/StrokeSpeaker.js'
+import TextInputModal from '../../text-input-modal/TextInputModal.js'
const GenerateKeyModal = ({ t, tReady, onCancel, onSubmit, className, ...props }) => {
return (
diff --git a/src/components/ipns-manager/remove-key-modal/RemoveKeyModal.js b/src/components/ipns-manager/remove-key-modal/RemoveKeyModal.js
index 0736ed3d3..9409daaba 100644
--- a/src/components/ipns-manager/remove-key-modal/RemoveKeyModal.js
+++ b/src/components/ipns-manager/remove-key-modal/RemoveKeyModal.js
@@ -1,8 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
-import TrashIcon from '../../../icons/StrokeTrash'
-import Button from '../../../components/button/Button'
-import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal'
+import TrashIcon from '../../../icons/StrokeTrash.js'
+import Button from '../../button/Button.js'
+import { Modal, ModalActions, ModalBody } from '../../modal/Modal.js'
import { Trans } from 'react-i18next'
const RemoveKeyModal = ({ t, tReady, name, onCancel, onRemove, className, ...props }) => {
diff --git a/src/components/ipns-manager/rename-key-modal/RenameKeyModal.js b/src/components/ipns-manager/rename-key-modal/RenameKeyModal.js
index f78e4b3b6..47121e7a2 100644
--- a/src/components/ipns-manager/rename-key-modal/RenameKeyModal.js
+++ b/src/components/ipns-manager/rename-key-modal/RenameKeyModal.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
-import Icon from '../../../icons/StrokePencil'
-import TextInputModal from '../../text-input-modal/TextInputModal'
+import Icon from '../../../icons/StrokePencil.js'
+import TextInputModal from '../../text-input-modal/TextInputModal.js'
import { Trans } from 'react-i18next'
const RenameKeyModal = ({ t, tReady, name, onCancel, onSubmit, className, ...props }) => {
diff --git a/src/components/is-connected/IsConnected.js b/src/components/is-connected/IsConnected.js
index 4ef9fdcd1..ca47f5c84 100644
--- a/src/components/is-connected/IsConnected.js
+++ b/src/components/is-connected/IsConnected.js
@@ -1,7 +1,7 @@
import React from 'react'
import { withTranslation } from 'react-i18next'
-import Box from '../box/Box'
-import GlyphTick from '../../icons/GlyphTick'
+import Box from '../box/Box.js'
+import GlyphTick from '../../icons/GlyphTick.js'
export const IsConnected = ({ t }) => {
return (
diff --git a/src/components/is-not-connected/IsNotConnected.js b/src/components/is-not-connected/IsNotConnected.js
index 82edefc54..cdc6f41cc 100644
--- a/src/components/is-not-connected/IsNotConnected.js
+++ b/src/components/is-not-connected/IsNotConnected.js
@@ -2,10 +2,10 @@ import React, { useState } from 'react'
import { connect } from 'redux-bundler-react'
import { withTranslation, Trans } from 'react-i18next'
import classNames from 'classnames'
-import ApiAddressForm from '../api-address-form/ApiAddressForm'
-import Box from '../box/Box'
+import ApiAddressForm from '../api-address-form/ApiAddressForm.js'
+import Box from '../box/Box.js'
import Shell from '../shell/Shell.js'
-import GlyphAttention from '../../icons/GlyphAttention'
+import GlyphAttention from '../../icons/GlyphAttention.js'
const TABS = {
UNIX: 'unix',
diff --git a/src/components/language-selector/LanguageSelector.js b/src/components/language-selector/LanguageSelector.js
index acedd3c62..b04bf3ffa 100644
--- a/src/components/language-selector/LanguageSelector.js
+++ b/src/components/language-selector/LanguageSelector.js
@@ -1,10 +1,10 @@
import React, { Component, Fragment } from 'react'
-import { getCurrentLanguage } from '../../lib/i18n'
+import { getCurrentLanguage } from '../../lib/i18n.js'
// Components
-import Button from '../button/Button'
-import Overlay from '../overlay/Overlay'
-import LanguageModal from './language-modal/LanguageModal'
+import Button from '../button/Button.js'
+import Overlay from '../overlay/Overlay.js'
+import LanguageModal from './language-modal/LanguageModal.js'
class LanguageSelector extends Component {
state = { isLanguageModalOpen: false }
diff --git a/src/components/language-selector/LanguageSelector.stories.js b/src/components/language-selector/LanguageSelector.stories.js
index ad2cae322..d694f4647 100644
--- a/src/components/language-selector/LanguageSelector.stories.js
+++ b/src/components/language-selector/LanguageSelector.stories.js
@@ -1,8 +1,8 @@
// @ts-check
import React from '@storybook/react'
-import i18n from '../../i18n'
-import LanguageSelectorEl from './LanguageSelector'
+import i18n from '../../i18n.js'
+import LanguageSelectorEl from './LanguageSelector.js'
const t = i18n.getFixedT('en', 'settings')
diff --git a/src/components/language-selector/language-modal/LanguageModal.js b/src/components/language-selector/language-modal/LanguageModal.js
index 7418243d7..ec1061d9e 100644
--- a/src/components/language-selector/language-modal/LanguageModal.js
+++ b/src/components/language-selector/language-modal/LanguageModal.js
@@ -1,12 +1,12 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'redux-bundler-react'
-import i18n, { localesList } from '../../../i18n'
+import i18n, { localesList } from '../../../i18n.js'
// Components
-import { Modal, ModalBody, ModalActions } from '../../modal/Modal'
-import SpeakerIcon from '../../../icons/StrokeSpeaker'
-import Button from '../../button/Button'
+import { Modal, ModalBody, ModalActions } from '../../modal/Modal.js'
+import SpeakerIcon from '../../../icons/StrokeSpeaker.js'
+import Button from '../../button/Button.js'
const LanguageModal = ({ t, tReady, onLeave, link, className, isIpfsDesktop, doDesktopUpdateLanguage, ...props }) => {
const handleClick = (lang) => {
diff --git a/src/components/loading-animation/LoadingAnimation.js b/src/components/loading-animation/LoadingAnimation.js
index 23cf98516..8e4070977 100644
--- a/src/components/loading-animation/LoadingAnimation.js
+++ b/src/components/loading-animation/LoadingAnimation.js
@@ -1,9 +1,9 @@
import React from 'react'
import { withTranslation } from 'react-i18next'
// Components
-import GlyphDots from '../../icons/GlyphDots'
-import Checkbox from '../../components/checkbox/Checkbox'
-import FileIcon from '../../files/file-icon/FileIcon'
+import GlyphDots from '../../icons/GlyphDots.js'
+import Checkbox from '../checkbox/Checkbox.js'
+import FileIcon from '../../files/file-icon/FileIcon.js'
// Styles
import './LoadingAnimation.css'
diff --git a/src/components/modal/Modal.js b/src/components/modal/Modal.js
index 67f608fd1..778d30ae2 100644
--- a/src/components/modal/Modal.js
+++ b/src/components/modal/Modal.js
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import CancelIcon from '../../icons/GlyphSmallCancel'
+import CancelIcon from '../../icons/GlyphSmallCancel.js'
export const ModalActions = ({ justify, className, children, ...props }) => (
diff --git a/src/components/notify/Notify.js b/src/components/notify/Notify.js
index eef7dd8cb..48f303441 100644
--- a/src/components/notify/Notify.js
+++ b/src/components/notify/Notify.js
@@ -1,7 +1,7 @@
import React from 'react'
import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
-import Toast from './Toast'
+import Toast from './Toast.js'
const Notify = ({ t, notify, notifyI18nKey, doNotifyDismiss }) => {
const { show, error, msgArgs } = notify
diff --git a/src/components/notify/Toast.js b/src/components/notify/Toast.js
index d9e169046..b4e9ea89e 100644
--- a/src/components/notify/Toast.js
+++ b/src/components/notify/Toast.js
@@ -1,5 +1,5 @@
import React from 'react'
-import CancelIcon from '../../icons/GlyphSmallCancel'
+import CancelIcon from '../../icons/GlyphSmallCancel.js'
const Toast = ({ error, children, onDismiss }) => {
const bg = error ? 'bg-yellow' : 'bg-green'
diff --git a/src/components/notify/Toast.stories.js b/src/components/notify/Toast.stories.js
index bce4db447..d67be907b 100644
--- a/src/components/notify/Toast.stories.js
+++ b/src/components/notify/Toast.stories.js
@@ -1,7 +1,7 @@
import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
-import Toast from './Toast'
+import Toast from './Toast.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/components/pinning-manager/PinningManager.js b/src/components/pinning-manager/PinningManager.js
index f16b26c7a..eeba56218 100644
--- a/src/components/pinning-manager/PinningManager.js
+++ b/src/components/pinning-manager/PinningManager.js
@@ -1,20 +1,20 @@
import React, { Fragment, useEffect, useState, useMemo, useRef } from 'react'
import { connect } from 'redux-bundler-react'
import { AutoSizer, Table, Column, SortDirection } from 'react-virtualized'
-import { sortByProperty } from '../../lib/sort'
+import { sortByProperty } from '../../lib/sort.js'
// Components
-import Button from '../button/Button'
-import Overlay from '../overlay/Overlay'
-import PinningModal from './pinning-manager-modal/PinningManagerModal'
-import AutoUploadModal from './auto-upload-modal/AutoUploadModal'
-import GlyphPin from '../../icons/GlyphPin'
-import ContextMenu from '../context-menu/ContextMenu'
-import ContextMenuItem from '../context-menu/ContextMenuItem'
-import GlyphDots from '../../icons/GlyphDots'
-import StrokeCancel from '../../icons/StrokeCancel'
-import StrokeExternalLink from '../../icons/StrokeExternalLink'
-import StrokeCloud from '../../icons/StrokeCloud'
+import Button from '../button/Button.js'
+import Overlay from '../overlay/Overlay.js'
+import PinningModal from './pinning-manager-modal/PinningManagerModal.js'
+import AutoUploadModal from './auto-upload-modal/AutoUploadModal.js'
+import GlyphPin from '../../icons/GlyphPin.js'
+import ContextMenu from '../context-menu/ContextMenu.js'
+import ContextMenuItem from '../context-menu/ContextMenuItem.js'
+import GlyphDots from '../../icons/GlyphDots.js'
+import StrokeCancel from '../../icons/StrokeCancel.js'
+import StrokeExternalLink from '../../icons/StrokeExternalLink.js'
+import StrokeCloud from '../../icons/StrokeCloud.js'
import './PinningManager.css'
diff --git a/src/components/pinning-manager/PinningManager.stories.js b/src/components/pinning-manager/PinningManager.stories.js
index e92abe0ca..25c1b06f3 100644
--- a/src/components/pinning-manager/PinningManager.stories.js
+++ b/src/components/pinning-manager/PinningManager.stories.js
@@ -1,8 +1,8 @@
import React from '@storybook/react'
-import i18n from '../../i18n'
-import PinningManager from './PinningManager'
-import PinningServicesMock from './fixtures/pinningServices'
+import i18n from '../../i18n.js'
+import PinningManager from './PinningManager.js'
+import PinningServicesMock from './fixtures/pinningServices.js'
const t = i18n.getFixedT('en', 'settings')
diff --git a/src/components/pinning-manager/auto-upload-modal/AutoUploadModal.js b/src/components/pinning-manager/auto-upload-modal/AutoUploadModal.js
index a49a50d47..601463355 100644
--- a/src/components/pinning-manager/auto-upload-modal/AutoUploadModal.js
+++ b/src/components/pinning-manager/auto-upload-modal/AutoUploadModal.js
@@ -4,8 +4,8 @@ import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
// Components
-import { Modal, ModalBody, ModalActions } from '../../modal/Modal'
-import Button from '../../button/Button'
+import { Modal, ModalBody, ModalActions } from '../../modal/Modal.js'
+import Button from '../../button/Button.js'
const AutoUploadModal = ({ name, service, t, onLeave, doSetAutoUploadForService, className, ...props }) => {
const onToggle = () => {
diff --git a/src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js b/src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js
index eb29ddd39..a87644f3d 100644
--- a/src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js
+++ b/src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js
@@ -2,13 +2,13 @@ import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'redux-bundler-react'
import { withTranslation, Trans } from 'react-i18next'
-import PinningServiceModal from '../pinning-manager-service-modal/PinningManagerServiceModal'
+import PinningServiceModal from '../pinning-manager-service-modal/PinningManagerServiceModal.js'
import './PinningManagerModal.css'
// Components
-import { Modal, ModalBody, ModalActions } from '../../modal/Modal'
-import Button from '../../button/Button'
-import Overlay from '../../overlay/Overlay'
+import { Modal, ModalBody, ModalActions } from '../../modal/Modal.js'
+import Button from '../../button/Button.js'
+import Overlay from '../../overlay/Overlay.js'
const PinningManagerModal = ({ t, tReady, onLeave, className, remoteServiceTemplates, pinningServicesDefaults, ...props }) => {
const [selectedService, setSelectedService] = useState(false)
diff --git a/src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js b/src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js
index d7b615dcc..bf1ea77fd 100644
--- a/src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js
+++ b/src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js
@@ -6,8 +6,8 @@ import { withTranslation, Trans } from 'react-i18next'
import { useForm } from 'react-hook-form'
// Components
-import { Modal, ModalBody, ModalActions } from '../../modal/Modal'
-import Button from '../../button/Button'
+import { Modal, ModalBody, ModalActions } from '../../modal/Modal.js'
+import Button from '../../button/Button.js'
import './PinningManagerServiceModal.css'
const PinningManagerServiceModal = ({ t, onLeave, onSuccess, className, service, tReady, doAddPinningService, nickname, apiEndpoint, visitServiceUrl, secretApiKey, complianceReportUrl, ...props }) => {
diff --git a/src/components/progress-bar/ProgressBar.stories.js b/src/components/progress-bar/ProgressBar.stories.js
index a240fbbee..aaaaafa8f 100644
--- a/src/components/progress-bar/ProgressBar.stories.js
+++ b/src/components/progress-bar/ProgressBar.stories.js
@@ -1,5 +1,5 @@
import React from '@storybook/react'
-import ProgressBar from './ProgressBar'
+import ProgressBar from './ProgressBar.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/components/public-gateway-form/PublicGatewayForm.js b/src/components/public-gateway-form/PublicGatewayForm.js
index a4467d465..f4e36dcb8 100644
--- a/src/components/public-gateway-form/PublicGatewayForm.js
+++ b/src/components/public-gateway-form/PublicGatewayForm.js
@@ -1,8 +1,8 @@
import React, { useState, useEffect } from 'react'
import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
-import Button from '../button/Button'
-import { checkValidHttpUrl, checkViaImgSrc, DEFAULT_GATEWAY } from '../../bundles/gateway'
+import Button from '../button/Button.js'
+import { checkValidHttpUrl, checkViaImgSrc, DEFAULT_GATEWAY } from '../../bundles/gateway.js'
const PublicGatewayForm = ({ t, doUpdatePublicGateway, publicGateway }) => {
const [value, setValue] = useState(publicGateway)
diff --git a/src/components/radio/Radio.stories.js b/src/components/radio/Radio.stories.js
index 5907a082d..cb30894a6 100644
--- a/src/components/radio/Radio.stories.js
+++ b/src/components/radio/Radio.stories.js
@@ -1,6 +1,6 @@
import React from 'react'
import { action } from '@storybook/addon-actions'
-import Radio from './Radio'
+import Radio from './Radio.js'
const bigPicture = {
transform: 'scale(5)',
diff --git a/src/components/text-input-modal/TextInputModal.js b/src/components/text-input-modal/TextInputModal.js
index 68bbab4c8..ba57c417f 100644
--- a/src/components/text-input-modal/TextInputModal.js
+++ b/src/components/text-input-modal/TextInputModal.js
@@ -1,8 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
-import Button from '../button/Button'
-import { Modal, ModalActions, ModalBody } from '../modal/Modal'
-import ComponentLoader from '../../loader/ComponentLoader'
+import Button from '../button/Button.js'
+import { Modal, ModalActions, ModalBody } from '../modal/Modal.js'
+import ComponentLoader from '../../loader/ComponentLoader.js'
import { withTranslation } from 'react-i18next'
class TextInputModal extends React.Component {
diff --git a/src/dnd-decorator.js b/src/dnd-decorator.js
index 950a4fa63..f614fd36c 100644
--- a/src/dnd-decorator.js
+++ b/src/dnd-decorator.js
@@ -1,5 +1,5 @@
import React from 'react'
-import DnDBackend from './lib/dnd-backend'
+import DnDBackend from './lib/dnd-backend.js'
import { DndProvider } from 'react-dnd'
export default function DndDecorator (fn) {
diff --git a/src/env.test.js b/src/env.test.js
index 602271ac2..5a2b6e07d 100644
--- a/src/env.test.js
+++ b/src/env.test.js
@@ -1,6 +1,6 @@
/* global describe, it, expect, afterEach, jest */
// @ts-check
-import { getDeploymentEnv } from './env'
+import { getDeploymentEnv } from './env.js'
describe('env.js', function () {
describe('getDeploymentEnv', function () {
diff --git a/src/explore/ExploreContainer.js b/src/explore/ExploreContainer.js
index 7a7af89bc..ba927f3cb 100644
--- a/src/explore/ExploreContainer.js
+++ b/src/explore/ExploreContainer.js
@@ -1,7 +1,7 @@
import React from 'react'
import { connect } from 'redux-bundler-react'
import { ExplorePage } from 'ipld-explorer-components'
-import withTour from '../components/tour/withTour'
+import withTour from '../components/tour/withTour.js'
const ExploreContainer = ({
toursEnabled,
diff --git a/src/explore/StartExploringContainer.js b/src/explore/StartExploringContainer.js
index 233d3e3d6..9d3e50afe 100644
--- a/src/explore/StartExploringContainer.js
+++ b/src/explore/StartExploringContainer.js
@@ -1,7 +1,7 @@
import React from 'react'
import { connect } from 'redux-bundler-react'
import { StartExploringPage } from 'ipld-explorer-components'
-import withTour from '../components/tour/withTour'
+import withTour from '../components/tour/withTour.js'
const StartExploringContainer = ({
toursEnabled,
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index 56aa2a077..9ccfd6f5f 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -5,19 +5,19 @@ import { connect } from 'redux-bundler-react'
import { withTranslation, Trans } from 'react-i18next'
import ReactJoyride from 'react-joyride'
// Lib
-import { filesTour } from '../lib/tours'
+import { filesTour } from '../lib/tours.js'
// Components
-import ContextMenu from './context-menu/ContextMenu'
-import withTour from '../components/tour/withTour'
-import InfoBoxes from './info-boxes/InfoBoxes'
-import FilePreview from './file-preview/FilePreview'
-import FilesList from './files-list/FilesList'
-import { getJoyrideLocales } from '../helpers/i8n'
+import ContextMenu from './context-menu/ContextMenu.js'
+import withTour from '../components/tour/withTour.js'
+import InfoBoxes from './info-boxes/InfoBoxes.js'
+import FilePreview from './file-preview/FilePreview.js'
+import FilesList from './files-list/FilesList.js'
+import { getJoyrideLocales } from '../helpers/i8n.js'
// Icons
-import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals'
-import Header from './header/Header'
-import FileImportStatus from './file-import-status/FileImportStatus'
+import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH, CLI_TUTOR_MODE, PINNING, PUBLISH } from './modals/Modals.js'
+import Header from './header/Header.js'
+import FileImportStatus from './file-import-status/FileImportStatus.js'
const FilesPage = ({
doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesAddPath, doUpdateHash,
diff --git a/src/files/breadcrumbs/Breadcrumbs.js b/src/files/breadcrumbs/Breadcrumbs.js
index c477a9103..630ecd81b 100644
--- a/src/files/breadcrumbs/Breadcrumbs.js
+++ b/src/files/breadcrumbs/Breadcrumbs.js
@@ -7,7 +7,7 @@ import { withTranslation } from 'react-i18next'
import { useDrop } from 'react-dnd'
import { NativeTypes } from 'react-dnd-html5-backend'
-import { normalizeFiles } from '../../lib/files'
+import { normalizeFiles } from '../../lib/files.js'
import './Breadcrumbs.css'
diff --git a/src/files/breadcrumbs/Breadcrumbs.stories.js b/src/files/breadcrumbs/Breadcrumbs.stories.js
index 3c52f6971..01cb29026 100644
--- a/src/files/breadcrumbs/Breadcrumbs.stories.js
+++ b/src/files/breadcrumbs/Breadcrumbs.stories.js
@@ -1,5 +1,5 @@
// @ts-check
-import Breadcrumbs from './Breadcrumbs'
+import Breadcrumbs from './Breadcrumbs.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/context-menu/ContextMenu.js b/src/files/context-menu/ContextMenu.js
index 687ae6915..0d3b3634b 100644
--- a/src/files/context-menu/ContextMenu.js
+++ b/src/files/context-menu/ContextMenu.js
@@ -2,17 +2,17 @@ import React from 'react'
import PropTypes from 'prop-types'
import { withTranslation } from 'react-i18next'
import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Dropdown, DropdownMenu, Option } from '../dropdown/Dropdown'
-import StrokeCopy from '../../icons/StrokeCopy'
-import StrokeShare from '../../icons/StrokeShare'
-import StrokeSpeaker from '../../icons/StrokeSpeaker'
-import StrokePencil from '../../icons/StrokePencil'
-import StrokeIpld from '../../icons/StrokeIpld'
-import StrokeTrash from '../../icons/StrokeTrash'
-import StrokeDownload from '../../icons/StrokeDownload'
-import StrokeData from '../../icons/StrokeData'
-import StrokePin from '../../icons/StrokePin'
-import { cliCmdKeys } from '../../bundles/files/consts'
+import { Dropdown, DropdownMenu, Option } from '../dropdown/Dropdown.js'
+import StrokeCopy from '../../icons/StrokeCopy.js'
+import StrokeShare from '../../icons/StrokeShare.js'
+import StrokeSpeaker from '../../icons/StrokeSpeaker.js'
+import StrokePencil from '../../icons/StrokePencil.js'
+import StrokeIpld from '../../icons/StrokeIpld.js'
+import StrokeTrash from '../../icons/StrokeTrash.js'
+import StrokeDownload from '../../icons/StrokeDownload.js'
+import StrokeData from '../../icons/StrokeData.js'
+import StrokePin from '../../icons/StrokePin.js'
+import { cliCmdKeys } from '../../bundles/files/consts.js'
class ContextMenu extends React.Component {
constructor (props) {
diff --git a/src/files/context-menu/ContextMenu.stories.js b/src/files/context-menu/ContextMenu.stories.js
index 777debf78..ff654cbf1 100644
--- a/src/files/context-menu/ContextMenu.stories.js
+++ b/src/files/context-menu/ContextMenu.stories.js
@@ -1,5 +1,5 @@
// @ts-check
-import ContextMenu from './ContextMenu'
+import ContextMenu from './ContextMenu.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/dropdown/Dropdown.js b/src/files/dropdown/Dropdown.js
index 9bfe78b7c..6ebeb6aa9 100644
--- a/src/files/dropdown/Dropdown.js
+++ b/src/files/dropdown/Dropdown.js
@@ -1,6 +1,6 @@
import React, { forwardRef } from 'react'
import { Dropdown as Drop, DropdownMenu as Menu } from '@tableflip/react-dropdown'
-import StrokeCode from '../../icons/StrokeCode'
+import StrokeCode from '../../icons/StrokeCode.js'
export const Option = ({ children, onClick, className = '', isCliTutorModeEnabled, onCliTutorMode, ...props }) => (
isCliTutorModeEnabled
diff --git a/src/files/explore-form/FilesExploreForm.js b/src/files/explore-form/FilesExploreForm.js
index 32e514829..7c3a8b6b7 100644
--- a/src/files/explore-form/FilesExploreForm.js
+++ b/src/files/explore-form/FilesExploreForm.js
@@ -2,9 +2,9 @@ import React from 'react'
import isIPFS from 'is-ipfs'
import PropTypes from 'prop-types'
import { withTranslation } from 'react-i18next'
-import StrokeFolder from '../../icons/StrokeFolder'
-import StrokeIpld from '../../icons/StrokeIpld'
-import Button from '../../components/button/Button'
+import StrokeFolder from '../../icons/StrokeFolder.js'
+import StrokeIpld from '../../icons/StrokeIpld.js'
+import Button from '../../components/button/Button.js'
import './FilesExploreForm.css'
class FilesExploreForm extends React.Component {
diff --git a/src/files/explore-form/FilesExploreForm.stories.js b/src/files/explore-form/FilesExploreForm.stories.js
index b03afdf1d..f9004630f 100644
--- a/src/files/explore-form/FilesExploreForm.stories.js
+++ b/src/files/explore-form/FilesExploreForm.stories.js
@@ -1,5 +1,5 @@
// @ts-check
-import FilesExploreForm from './FilesExploreForm'
+import FilesExploreForm from './FilesExploreForm.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/file-icon/FileIcon.js b/src/files/file-icon/FileIcon.js
index 73c544db2..e778544f8 100644
--- a/src/files/file-icon/FileIcon.js
+++ b/src/files/file-icon/FileIcon.js
@@ -1,14 +1,14 @@
import React from 'react'
-import typeFromExt from '../type-from-ext'
+import typeFromExt from '../type-from-ext/index.js'
-import Folder from '../../icons/GlyphFolder'
-import Doc from '../../icons/GlyphDocGeneric'
-import DocMovie from '../../icons/GlyphDocMovie'
-import DocCalc from '../../icons/GlyphDocCalc'
-import DocMusic from '../../icons/GlyphDocMusic'
-import DocPicture from '../../icons/GlyphDocPicture'
-import DocText from '../../icons/GlyphDocText'
-import Cube from '../../icons/StrokeCube'
+import Folder from '../../icons/GlyphFolder.js'
+import Doc from '../../icons/GlyphDocGeneric.js'
+import DocMovie from '../../icons/GlyphDocMovie.js'
+import DocCalc from '../../icons/GlyphDocCalc.js'
+import DocMusic from '../../icons/GlyphDocMusic.js'
+import DocPicture from '../../icons/GlyphDocPicture.js'
+import DocText from '../../icons/GlyphDocText.js'
+import Cube from '../../icons/StrokeCube.js'
const style = { width: 36 }
diff --git a/src/files/file-import-status/FileImportStatus.js b/src/files/file-import-status/FileImportStatus.js
index 3cb447bda..5ea3c2a02 100644
--- a/src/files/file-import-status/FileImportStatus.js
+++ b/src/files/file-import-status/FileImportStatus.js
@@ -1,17 +1,17 @@
import React, { useMemo, useState, useCallback } from 'react'
-import { humanSize } from '../../lib/files'
+import { humanSize } from '../../lib/files.js'
import PropTypes from 'prop-types'
import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
// Icons
-import DocumentIcon from '../../icons/GlyphDocGeneric'
-import FolderIcon from '../../icons/GlyphFolder'
+import DocumentIcon from '../../icons/GlyphDocGeneric.js'
+import FolderIcon from '../../icons/GlyphFolder.js'
import './FileImportStatus.css'
-import GlyphSmallArrows from '../../icons/GlyphSmallArrow'
-import GlyphTick from '../../icons/GlyphTick'
-import GlyphCancel from '../../icons/GlyphCancel'
-import GlyphSmallCancel from '../../icons/GlyphSmallCancel'
-import ProgressBar from '../../components/progress-bar/ProgressBar'
+import GlyphSmallArrows from '../../icons/GlyphSmallArrow.js'
+import GlyphTick from '../../icons/GlyphTick.js'
+import GlyphCancel from '../../icons/GlyphCancel.js'
+import GlyphSmallCancel from '../../icons/GlyphSmallCancel.js'
+import ProgressBar from '../../components/progress-bar/ProgressBar.js'
const Import = (job, t) =>
[...groupByPath(job?.message?.entries || new Map()).values()].map(item => (
diff --git a/src/files/file-import-status/FileImportStatus.stories.js b/src/files/file-import-status/FileImportStatus.stories.js
index 9b7ca5b56..626db1c98 100644
--- a/src/files/file-import-status/FileImportStatus.stories.js
+++ b/src/files/file-import-status/FileImportStatus.stories.js
@@ -5,9 +5,9 @@ import {
withKnobs
// , boolean
} from '@storybook/addon-knobs'
-import i18nDecorator from '../../i18n-decorator'
-import { FileImportStatus } from './FileImportStatus'
-import i18n from '../../i18n'
+import i18nDecorator from '../../i18n-decorator.js'
+import { FileImportStatus } from './FileImportStatus.js'
+import i18n from '../../i18n.js'
import { Array } from 'window-or-global'
const containerStyle = { width: 156 }
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index 3c4632254..2ce7a7d03 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -2,16 +2,16 @@ import React from 'react'
import { connect } from 'redux-bundler-react'
import PropTypes from 'prop-types'
import { withTranslation } from 'react-i18next'
-import { normalizeFiles } from '../../lib/files'
+import { normalizeFiles } from '../../lib/files.js'
// Icons
-import DocumentIcon from '../../icons/StrokeDocument'
-import FolderIcon from '../../icons/StrokeFolder'
-import NewFolderIcon from '../../icons/StrokeNewFolder'
-import DecentralizationIcon from '../../icons/StrokeDecentralization'
+import DocumentIcon from '../../icons/StrokeDocument.js'
+import FolderIcon from '../../icons/StrokeFolder.js'
+import NewFolderIcon from '../../icons/StrokeNewFolder.js'
+import DecentralizationIcon from '../../icons/StrokeDecentralization.js'
// Components
-import { Dropdown, DropdownMenu, Option } from '../dropdown/Dropdown'
-import Button from '../../components/button/Button'
-import { cliCmdKeys } from '../../bundles/files/consts'
+import { Dropdown, DropdownMenu, Option } from '../dropdown/Dropdown.js'
+import Button from '../../components/button/Button.js'
+import { cliCmdKeys } from '../../bundles/files/consts.js'
const AddButton = withTranslation('app')(
({ t, onClick }) => (
diff --git a/src/files/file-preview/FilePreview.js b/src/files/file-preview/FilePreview.js
index e2c532695..fa84154da 100644
--- a/src/files/file-preview/FilePreview.js
+++ b/src/files/file-preview/FilePreview.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types'
import { connect } from 'redux-bundler-react'
import { isBinary } from 'istextorbinary'
import { Trans, withTranslation } from 'react-i18next'
-import typeFromExt from '../type-from-ext'
+import typeFromExt from '../type-from-ext/index.js'
import ComponentLoader from '../../loader/ComponentLoader.js'
import './FilePreview.css'
import CID from 'cids'
import { useDrag } from 'react-dnd'
import fromUint8ArrayToString from 'uint8arrays/to-string'
-import Button from '../../components/button/Button'
+import Button from '../../components/button/Button.js'
const Drag = ({ name, size, cid, path, children }) => {
const [, drag] = useDrag({
diff --git a/src/files/file/File.js b/src/files/file/File.js
index dee000134..7dfc4cbd0 100644
--- a/src/files/file/File.js
+++ b/src/files/file/File.js
@@ -3,17 +3,17 @@ import PropTypes from 'prop-types'
import { join, basename } from 'path'
import { withTranslation } from 'react-i18next'
import classnames from 'classnames'
-import { normalizeFiles, humanSize } from '../../lib/files'
+import { normalizeFiles, humanSize } from '../../lib/files.js'
// React DnD
import { useDrag, useDrop } from 'react-dnd'
// Components
-import GlyphDots from '../../icons/GlyphDots'
-import Tooltip from '../../components/tooltip/Tooltip'
-import Checkbox from '../../components/checkbox/Checkbox'
-import FileIcon from '../file-icon/FileIcon'
+import GlyphDots from '../../icons/GlyphDots.js'
+import Tooltip from '../../components/tooltip/Tooltip.js'
+import Checkbox from '../../components/checkbox/Checkbox.js'
+import FileIcon from '../file-icon/FileIcon.js'
import CID from 'cids'
import { NativeTypes } from 'react-dnd-html5-backend'
-import PinIcon from '../pin-icon/PinIcon'
+import PinIcon from '../pin-icon/PinIcon.js'
const File = ({
name, type, size, cid, path, pinned, t, selected, focused, translucent, coloured, cantSelect, cantDrag, isMfs, isRemotePin, isPendingPin, isFailedPin,
diff --git a/src/files/files-list/FilesList.js b/src/files/files-list/FilesList.js
index 476aaf707..7e4673dfa 100644
--- a/src/files/files-list/FilesList.js
+++ b/src/files/files-list/FilesList.js
@@ -5,17 +5,17 @@ import { connect } from 'redux-bundler-react'
import { Trans, withTranslation } from 'react-i18next'
import classnames from 'classnames'
import { join } from 'path'
-import { sorts } from '../../bundles/files'
-import { normalizeFiles } from '../../lib/files'
+import { sorts } from '../../bundles/files/index.js'
+import { normalizeFiles } from '../../lib/files.js'
import { List, WindowScroller, AutoSizer } from 'react-virtualized'
// React DnD
import { NativeTypes } from 'react-dnd-html5-backend'
import { useDrop } from 'react-dnd'
// Components
-import Checkbox from '../../components/checkbox/Checkbox'
-import SelectedActions from '../selected-actions/SelectedActions'
-import File from '../file/File'
-import LoadingAnimation from '../../components/loading-animation/LoadingAnimation'
+import Checkbox from '../../components/checkbox/Checkbox.js'
+import SelectedActions from '../selected-actions/SelectedActions.js'
+import File from '../file/File.js'
+import LoadingAnimation from '../../components/loading-animation/LoadingAnimation.js'
const addFiles = async (filesPromise, onAddFiles) => {
const files = await filesPromise
diff --git a/src/files/files-list/FilesList.stories.js b/src/files/files-list/FilesList.stories.js
index 78f13d7ac..89a56c525 100644
--- a/src/files/files-list/FilesList.stories.js
+++ b/src/files/files-list/FilesList.stories.js
@@ -1,8 +1,8 @@
import { action } from '@storybook/addon-actions'
import { withKnobs, boolean } from '@storybook/addon-knobs'
-import i18nDecorator from '../../i18n-decorator'
-import DndDecorator from '../../dnd-decorator'
-import FilesList from './FilesList'
+import i18nDecorator from '../../i18n-decorator.js'
+import DndDecorator from '../../dnd-decorator.js'
+import FilesList from './FilesList.js'
import { send } from '../../bundles/files/utils.js'
import { ACTIONS } from '../../bundles/files/consts.js'
diff --git a/src/files/header/Header.js b/src/files/header/Header.js
index 959883a1b..323b97603 100644
--- a/src/files/header/Header.js
+++ b/src/files/header/Header.js
@@ -2,14 +2,14 @@ import React from 'react'
import classNames from 'classnames'
import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
-import { humanSize } from '../../lib/files'
+import { humanSize } from '../../lib/files.js'
// Components
-import Breadcrumbs from '../breadcrumbs/Breadcrumbs'
-import FileInput from '../file-input/FileInput'
-import Button from '../../components/button/Button'
+import Breadcrumbs from '../breadcrumbs/Breadcrumbs.js'
+import FileInput from '../file-input/FileInput.js'
+import Button from '../../components/button/Button.js'
// Icons
-import GlyphDots from '../../icons/GlyphDots'
-import GlyphPinCloud from '../../icons/GlyphPinCloud'
+import GlyphDots from '../../icons/GlyphDots.js'
+import GlyphPinCloud from '../../icons/GlyphPinCloud.js'
import '../PendingAnimation.css'
const BarOption = ({ children, text, isLink = false, className = '', ...etc }) => (
diff --git a/src/files/info-boxes/InfoBoxes.js b/src/files/info-boxes/InfoBoxes.js
index cb236ddef..f22917e62 100644
--- a/src/files/info-boxes/InfoBoxes.js
+++ b/src/files/info-boxes/InfoBoxes.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
-import CompanionInfo from './companion-info/CompanionInfo'
-import AddFilesInfo from './add-files-info/AddFilesInfo'
+import CompanionInfo from './companion-info/CompanionInfo.js'
+import AddFilesInfo from './add-files-info/AddFilesInfo.js'
const InfoBoxes = ({ isRoot, isCompanion, filesExist }) => (
diff --git a/src/files/info-boxes/InfoBoxes.stories.js b/src/files/info-boxes/InfoBoxes.stories.js
index 9aa8804d3..c3df75890 100644
--- a/src/files/info-boxes/InfoBoxes.stories.js
+++ b/src/files/info-boxes/InfoBoxes.stories.js
@@ -1,5 +1,5 @@
// @ts-check
-import InfoBoxes from './InfoBoxes'
+import InfoBoxes from './InfoBoxes.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/info-boxes/add-files-info/AddFilesInfo.js b/src/files/info-boxes/add-files-info/AddFilesInfo.js
index c8915ff6e..4b021f7fb 100644
--- a/src/files/info-boxes/add-files-info/AddFilesInfo.js
+++ b/src/files/info-boxes/add-files-info/AddFilesInfo.js
@@ -1,6 +1,6 @@
import React from 'react'
import { withTranslation, Trans } from 'react-i18next'
-import Box from '../../../components/box/Box'
+import Box from '../../../components/box/Box.js'
const AddFilesInfo = ({ t }) => (
diff --git a/src/files/info-boxes/add-files-info/AddFilesInfo.stories.js b/src/files/info-boxes/add-files-info/AddFilesInfo.stories.js
index 0b883bd74..890a73f31 100644
--- a/src/files/info-boxes/add-files-info/AddFilesInfo.stories.js
+++ b/src/files/info-boxes/add-files-info/AddFilesInfo.stories.js
@@ -1,6 +1,6 @@
// @ts-check
-import i18nDecorator from '../../../i18n-decorator'
-import AddFilesInfo from './AddFilesInfo'
+import i18nDecorator from '../../../i18n-decorator.js'
+import AddFilesInfo from './AddFilesInfo.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/info-boxes/companion-info/CompanionInfo.js b/src/files/info-boxes/companion-info/CompanionInfo.js
index 8f1fccbf7..63cb4f3db 100644
--- a/src/files/info-boxes/companion-info/CompanionInfo.js
+++ b/src/files/info-boxes/companion-info/CompanionInfo.js
@@ -1,6 +1,6 @@
import React from 'react'
import { withTranslation, Trans } from 'react-i18next'
-import Box from '../../../components/box/Box'
+import Box from '../../../components/box/Box.js'
const CompanionInfo = ({ t }) => (
diff --git a/src/files/info-boxes/companion-info/CompanionInfo.stories.js b/src/files/info-boxes/companion-info/CompanionInfo.stories.js
index c079c88e7..7eb168be4 100644
--- a/src/files/info-boxes/companion-info/CompanionInfo.stories.js
+++ b/src/files/info-boxes/companion-info/CompanionInfo.stories.js
@@ -1,5 +1,5 @@
// @ts-check
-import CompanionInfo from './CompanionInfo'
+import CompanionInfo from './CompanionInfo.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index fd6551902..33208190b 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -2,18 +2,18 @@ import React from 'react'
import PropTypes from 'prop-types'
import { join } from 'path'
import { withTranslation } from 'react-i18next'
-import Overlay from '../../components/overlay/Overlay'
+import Overlay from '../../components/overlay/Overlay.js'
// Modals
-import NewFolderModal from './new-folder-modal/NewFolderModal'
-import ShareModal from './share-modal/ShareModal'
-import RenameModal from './rename-modal/RenameModal'
-import PinningModal from './pinning-modal/PinningModal'
-import RemoveModal from './remove-modal/RemoveModal'
-import AddByPathModal from './add-by-path-modal/AddByPathModal'
-import PublishModal from './publish-modal/PublishModal'
-import CliTutorMode from '../../components/cli-tutor-mode/CliTutorMode'
-import { cliCommandList, cliCmdKeys } from '../../bundles/files/consts'
-import { realMfsPath } from '../../bundles/files/actions'
+import NewFolderModal from './new-folder-modal/NewFolderModal.js'
+import ShareModal from './share-modal/ShareModal.js'
+import RenameModal from './rename-modal/RenameModal.js'
+import PinningModal from './pinning-modal/PinningModal.js'
+import RemoveModal from './remove-modal/RemoveModal.js'
+import AddByPathModal from './add-by-path-modal/AddByPathModal.js'
+import PublishModal from './publish-modal/PublishModal.js'
+import CliTutorMode from '../../components/cli-tutor-mode/CliTutorMode.js'
+import { cliCommandList, cliCmdKeys } from '../../bundles/files/consts.js'
+import { realMfsPath } from '../../bundles/files/actions.js'
// Constants
const NEW_FOLDER = 'new_folder'
const SHARE = 'share'
diff --git a/src/files/modals/add-by-path-modal/AddByPathModal.js b/src/files/modals/add-by-path-modal/AddByPathModal.js
index 31a95470e..59648a8e4 100644
--- a/src/files/modals/add-by-path-modal/AddByPathModal.js
+++ b/src/files/modals/add-by-path-modal/AddByPathModal.js
@@ -1,10 +1,10 @@
import React from 'react'
import PropTypes from 'prop-types'
-import Button from '../../../components/button/Button'
-import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal'
+import Button from '../../../components/button/Button.js'
+import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
import { withTranslation } from 'react-i18next'
import isIPFS from 'is-ipfs'
-import Icon from '../../../icons/StrokeDecentralization'
+import Icon from '../../../icons/StrokeDecentralization.js'
class AddByPathModal extends React.Component {
static propTypes = {
diff --git a/src/files/modals/add-by-path-modal/AddByPathModal.stories.js b/src/files/modals/add-by-path-modal/AddByPathModal.stories.js
index c9dd1938f..379a55747 100644
--- a/src/files/modals/add-by-path-modal/AddByPathModal.stories.js
+++ b/src/files/modals/add-by-path-modal/AddByPathModal.stories.js
@@ -1,7 +1,7 @@
import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
-import i18n from '../../../i18n-decorator'
-import AddByPathModal from './AddByPathModal'
+import i18n from '../../../i18n-decorator.js'
+import AddByPathModal from './AddByPathModal.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/modals/new-folder-modal/NewFolderModal.js b/src/files/modals/new-folder-modal/NewFolderModal.js
index d4c8e8801..142d87b29 100644
--- a/src/files/modals/new-folder-modal/NewFolderModal.js
+++ b/src/files/modals/new-folder-modal/NewFolderModal.js
@@ -1,8 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
import { withTranslation } from 'react-i18next'
-import FolderIcon from '../../../icons/StrokeFolder'
-import TextInputModal from '../../../components/text-input-modal/TextInputModal'
+import FolderIcon from '../../../icons/StrokeFolder.js'
+import TextInputModal from '../../../components/text-input-modal/TextInputModal.js'
function NewFolderModal ({ t, tReady, onCancel, onSubmit, className, ...props }) {
return (
diff --git a/src/files/modals/new-folder-modal/NewFolderModal.stories.js b/src/files/modals/new-folder-modal/NewFolderModal.stories.js
index a64e75cb8..06e59ab81 100644
--- a/src/files/modals/new-folder-modal/NewFolderModal.stories.js
+++ b/src/files/modals/new-folder-modal/NewFolderModal.stories.js
@@ -1,7 +1,7 @@
import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
-import i18n from '../../../i18n-decorator'
-import NewFolderModal from './NewFolderModal'
+import i18n from '../../../i18n-decorator.js'
+import NewFolderModal from './NewFolderModal.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/modals/pinning-modal/PinningModal.js b/src/files/modals/pinning-modal/PinningModal.js
index fee09ef4d..c5a9e87b1 100644
--- a/src/files/modals/pinning-modal/PinningModal.js
+++ b/src/files/modals/pinning-modal/PinningModal.js
@@ -1,13 +1,13 @@
import React, { useEffect, useMemo, useState } from 'react'
import PropTypes from 'prop-types'
import { /* Trans, */ withTranslation } from 'react-i18next'
-import { humanSize } from '../../../lib/files'
-import Button from '../../../components/button/Button'
-import Checkbox from '../../../components/checkbox/Checkbox'
-import GlyphPin from '../../../icons/GlyphPin'
-import Icon from '../../../icons/StrokePinCloud'
-import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal'
-import { complianceReportsHomepage } from '../../../constants/pinning'
+import { humanSize } from '../../../lib/files.js'
+import Button from '../../../components/button/Button.js'
+import Checkbox from '../../../components/checkbox/Checkbox.js'
+import GlyphPin from '../../../icons/GlyphPin.js'
+import Icon from '../../../icons/StrokePinCloud.js'
+import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
+import { complianceReportsHomepage } from '../../../constants/pinning.js'
import { connect } from 'redux-bundler-react'
import './PinningModal.css'
diff --git a/src/files/modals/pinning-modal/PinningModal.stories.js b/src/files/modals/pinning-modal/PinningModal.stories.js
index be2dac38b..c491f68b7 100644
--- a/src/files/modals/pinning-modal/PinningModal.stories.js
+++ b/src/files/modals/pinning-modal/PinningModal.stories.js
@@ -1,8 +1,8 @@
import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
-import i18n from '../../../i18n'
-import PinningModal from './PinningModal'
+import i18n from '../../../i18n.js'
+import PinningModal from './PinningModal.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/modals/publish-modal/PublishModal.js b/src/files/modals/publish-modal/PublishModal.js
index dfca63acc..3734c2d5d 100644
--- a/src/files/modals/publish-modal/PublishModal.js
+++ b/src/files/modals/publish-modal/PublishModal.js
@@ -2,14 +2,14 @@ import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { withTranslation } from 'react-i18next'
import { CopyToClipboard } from 'react-copy-to-clipboard'
-import Button from '../../../components/button/Button'
-import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal'
-import Icon from '../../../icons/StrokeSpeaker'
+import Button from '../../../components/button/Button.js'
+import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
+import Icon from '../../../icons/StrokeSpeaker.js'
import { connect } from 'redux-bundler-react'
-import Radio from '../../../components/radio/Radio'
-import ProgressBar from '../../../components/progress-bar/ProgressBar'
-import GlyphCopy from '../../../icons/GlyphCopy'
-import GlyphTick from '../../../icons/GlyphTick'
+import Radio from '../../../components/radio/Radio.js'
+import ProgressBar from '../../../components/progress-bar/ProgressBar.js'
+import GlyphCopy from '../../../icons/GlyphCopy.js'
+import GlyphTick from '../../../icons/GlyphTick.js'
import './PublishModal.css'
export const PublishModal = ({ t, tReady, onLeave, onSubmit, file, ipnsKeys, publicGateway, className, doFetchIpnsKeys, doUpdateExpectedPublishTime, expectedPublishTime, ...props }) => {
diff --git a/src/files/modals/publish-modal/PublishModal.stories.js b/src/files/modals/publish-modal/PublishModal.stories.js
index 85a0f465f..f0b1b7ac6 100644
--- a/src/files/modals/publish-modal/PublishModal.stories.js
+++ b/src/files/modals/publish-modal/PublishModal.stories.js
@@ -1,7 +1,7 @@
import { action } from '@storybook/addon-actions'
-import i18n from '../../../i18n'
-import { PublishModal } from './PublishModal'
+import i18n from '../../../i18n.js'
+import { PublishModal } from './PublishModal.js'
const ipnsKeys = [
{
diff --git a/src/files/modals/remove-modal/RemoveModal.js b/src/files/modals/remove-modal/RemoveModal.js
index 36b5c7f37..47be25c47 100644
--- a/src/files/modals/remove-modal/RemoveModal.js
+++ b/src/files/modals/remove-modal/RemoveModal.js
@@ -1,10 +1,10 @@
import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { withTranslation } from 'react-i18next'
-import TrashIcon from '../../../icons/StrokeTrash'
-import Button from '../../../components/button/Button'
-import Checkbox from '../../../components/checkbox/Checkbox'
-import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal'
+import TrashIcon from '../../../icons/StrokeTrash.js'
+import Button from '../../../components/button/Button.js'
+import Checkbox from '../../../components/checkbox/Checkbox.js'
+import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
import { connect } from 'redux-bundler-react'
const RemoveModal = ({ t, tReady, onCancel, onRemove, files, foldersCount, filesCount, remotePins, pinningServices, className, ...props }) => {
diff --git a/src/files/modals/remove-modal/RemoveModal.stories.js b/src/files/modals/remove-modal/RemoveModal.stories.js
index 79fdf27ae..f81edf3ac 100644
--- a/src/files/modals/remove-modal/RemoveModal.stories.js
+++ b/src/files/modals/remove-modal/RemoveModal.stories.js
@@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'
-import RemoveModal from './RemoveModal'
+import RemoveModal from './RemoveModal.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/modals/rename-modal/RenameModal.js b/src/files/modals/rename-modal/RenameModal.js
index 31db7944f..e091894eb 100644
--- a/src/files/modals/rename-modal/RenameModal.js
+++ b/src/files/modals/rename-modal/RenameModal.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
-import PencilIcon from '../../../icons/StrokePencil'
-import TextInputModal from '../../../components/text-input-modal/TextInputModal'
+import PencilIcon from '../../../icons/StrokePencil.js'
+import TextInputModal from '../../../components/text-input-modal/TextInputModal.js'
import { withTranslation } from 'react-i18next'
function RenameModal ({ t, tReady, onCancel, onSubmit, filename, folder, className, ...props }) {
diff --git a/src/files/modals/rename-modal/RenameModal.stories.js b/src/files/modals/rename-modal/RenameModal.stories.js
index c11ee039b..08cb36873 100644
--- a/src/files/modals/rename-modal/RenameModal.stories.js
+++ b/src/files/modals/rename-modal/RenameModal.stories.js
@@ -1,7 +1,7 @@
import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
-import i18n from '../../../i18n-decorator'
-import RenameModal from './RenameModal'
+import i18n from '../../../i18n-decorator.js'
+import RenameModal from './RenameModal.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/modals/share-modal/ShareModal.js b/src/files/modals/share-modal/ShareModal.js
index 802ece2d2..5e776da8b 100644
--- a/src/files/modals/share-modal/ShareModal.js
+++ b/src/files/modals/share-modal/ShareModal.js
@@ -1,10 +1,10 @@
import React from 'react'
import PropTypes from 'prop-types'
-import ShareIcon from '../../../icons/StrokeShare'
-import Button from '../../../components/button/Button'
+import ShareIcon from '../../../icons/StrokeShare.js'
+import Button from '../../../components/button/Button.js'
import { withTranslation } from 'react-i18next'
import { CopyToClipboard } from 'react-copy-to-clipboard'
-import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal'
+import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
const ShareModal = ({ t, tReady, onLeave, link, className, ...props }) => (
diff --git a/src/files/modals/share-modal/ShareModal.stories.js b/src/files/modals/share-modal/ShareModal.stories.js
index f4cb7939c..cc9cf0a7c 100644
--- a/src/files/modals/share-modal/ShareModal.stories.js
+++ b/src/files/modals/share-modal/ShareModal.stories.js
@@ -1,7 +1,7 @@
import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
-import i18n from '../../../i18n-decorator'
-import ShareModal from './ShareModal'
+import i18n from '../../../i18n-decorator.js'
+import ShareModal from './ShareModal.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/pin-icon/PinIcon.js b/src/files/pin-icon/PinIcon.js
index 5449d27a0..5ee4a7b3b 100644
--- a/src/files/pin-icon/PinIcon.js
+++ b/src/files/pin-icon/PinIcon.js
@@ -1,7 +1,7 @@
import React from 'react'
import { withTranslation } from 'react-i18next'
-import GlyphPin from '../../icons/GlyphPin'
-import GlyphPinCloud from '../../icons/GlyphPinCloud'
+import GlyphPin from '../../icons/GlyphPin.js'
+import GlyphPinCloud from '../../icons/GlyphPinCloud.js'
import '../PendingAnimation.css'
const PinningIcon = ({ t, isFailedPin, isPendingPin, isRemotePin, pinned }) => {
diff --git a/src/files/selected-actions/SelectedActions.js b/src/files/selected-actions/SelectedActions.js
index 09f7c4968..3451517a3 100644
--- a/src/files/selected-actions/SelectedActions.js
+++ b/src/files/selected-actions/SelectedActions.js
@@ -1,15 +1,15 @@
import React from 'react'
import classNames from 'classnames'
import PropTypes from 'prop-types'
-import { humanSize } from '../../lib/files'
+import { humanSize } from '../../lib/files.js'
import { withTranslation } from 'react-i18next'
-import StrokePin from '../../icons/StrokePin'
-import GlyphSmallCancel from '../../icons/GlyphSmallCancel'
-import StrokeShare from '../../icons/StrokeShare'
-import StrokePencil from '../../icons/StrokePencil'
-import StrokeIpld from '../../icons/StrokeIpld'
-import StrokeTrash from '../../icons/StrokeTrash'
-import StrokeDownload from '../../icons/StrokeDownload'
+import StrokePin from '../../icons/StrokePin.js'
+import GlyphSmallCancel from '../../icons/GlyphSmallCancel.js'
+import StrokeShare from '../../icons/StrokeShare.js'
+import StrokePencil from '../../icons/StrokePencil.js'
+import StrokeIpld from '../../icons/StrokeIpld.js'
+import StrokeTrash from '../../icons/StrokeTrash.js'
+import StrokeDownload from '../../icons/StrokeDownload.js'
import './SelectedActions.css'
const styles = {
diff --git a/src/files/selected-actions/SelectedActions.stories.js b/src/files/selected-actions/SelectedActions.stories.js
index 94377ca8b..8f56412d3 100644
--- a/src/files/selected-actions/SelectedActions.stories.js
+++ b/src/files/selected-actions/SelectedActions.stories.js
@@ -1,8 +1,8 @@
import React from '@storybook/react'
import { withKnobs, number } from '@storybook/addon-knobs'
import { action } from '@storybook/addon-actions'
-import i18n from '../../i18n-decorator'
-import SelectedActions from './SelectedActions'
+import i18n from '../../i18n-decorator.js'
+import SelectedActions from './SelectedActions.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/files/type-from-ext/index.js b/src/files/type-from-ext/index.js
index c48002f5a..8a5f9f802 100644
--- a/src/files/type-from-ext/index.js
+++ b/src/files/type-from-ext/index.js
@@ -1,5 +1,5 @@
import fileExtension from 'file-extension'
-import extToType from './extToType'
+import extToType from './extToType.js'
function fileType (filename) {
const ext = fileExtension(filename)
diff --git a/src/i18n-decorator.js b/src/i18n-decorator.js
index c9264dacf..8379e526c 100644
--- a/src/i18n-decorator.js
+++ b/src/i18n-decorator.js
@@ -1,6 +1,6 @@
import React from 'react'
import { I18nextProvider } from 'react-i18next'
-import i18n from './i18n'
+import i18n from './i18n.js'
export default function i18nDecorator (fn) {
return (
diff --git a/src/icons/hocs/GlyphPinCloud.js b/src/icons/hocs/GlyphPinCloud.js
index 499f15968..0d898bfff 100644
--- a/src/icons/hocs/GlyphPinCloud.js
+++ b/src/icons/hocs/GlyphPinCloud.js
@@ -1,5 +1,5 @@
-import GlyphPinCloudRegular from '../GlyphPinCloud'
-import GlyphPinCloudFailed from '../GlyphPinCloudFailed'
+import GlyphPinCloudRegular from '../GlyphPinCloud.js'
+import GlyphPinCloudFailed from '../GlyphPinCloudFailed.js'
const GlyphPinCloud = ({ failed = false, ...props }) => failed
?
diff --git a/src/icons/index.js b/src/icons/index.js
index 0c54dbc78..4f6cf2647 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,145 +1,145 @@
-export { default as GlyphAdd } from './GlyphAdd'
-export { default as GlyphAttention } from './GlyphAttention'
-export { default as GlyphBasket } from './GlyphBasket'
-export { default as GlyphBook } from './GlyphBook'
-export { default as GlyphCalendar } from './GlyphCalendar'
-export { default as GlyphCamera } from './GlyphCamera'
-export { default as GlyphCancel } from './GlyphCancel'
-export { default as GlyphCase } from './GlyphCase'
-export { default as GlyphCentralization } from './GlyphCentralization'
-export { default as GlyphChart } from './GlyphChart'
-export { default as GlyphChat } from './GlyphChat'
-export { default as GlyphClock } from './GlyphClock'
-export { default as GlyphCloud } from './GlyphCloud'
-export { default as GlyphCode } from './GlyphCode'
-export { default as GlyphCopy } from './GlyphCopy'
-export { default as GlyphCube } from './GlyphCube'
-export { default as GlyphData } from './GlyphData'
-export { default as GlyphDecentralization } from './GlyphDecentralization'
-export { default as GlyphDevices } from './GlyphDevices'
-export { default as GlyphDistributed } from './GlyphDistributed'
-export { default as GlyphDocCalc } from './GlyphDocCalc'
-export { default as GlyphDocGeneric } from './GlyphDocGeneric'
-export { default as GlyphDocMovie } from './GlyphDocMovie'
-export { default as GlyphDocMusic } from './GlyphDocMusic'
-export { default as GlyphDocPicture } from './GlyphDocPicture'
-export { default as GlyphDocText } from './GlyphDocText'
-export { default as GlyphDocument } from './GlyphDocument'
-export { default as GlyphDots } from './GlyphDots'
-export { default as GlyphDownload } from './GlyphDownload'
-export { default as GlyphFilter } from './GlyphFilter'
-export { default as GlyphFolder } from './GlyphFolder'
-export { default as GlyphHome } from './GlyphHome'
-export { default as GlyphIdea } from './GlyphIdea'
-export { default as GlyphInfo } from './GlyphInfo'
-export { default as GlyphIpld } from './GlyphIpld'
-export { default as GlyphLab } from './GlyphLab'
-export { default as GlyphLink } from './GlyphLink'
-export { default as GlyphLinkExternal } from './GlyphLinkExternal'
-export { default as GlyphLock } from './GlyphLock'
-export { default as GlyphMail } from './GlyphMail'
-export { default as GlyphMap } from './GlyphMap'
-export { default as GlyphMarker } from './GlyphMarker'
-export { default as GlyphMarketing } from './GlyphMarketing'
-export { default as GlyphMobile } from './GlyphMobile'
-export { default as GlyphMonitor } from './GlyphMonitor'
-export { default as GlyphNewFolder } from './GlyphNewFolder'
-export { default as GlyphPeersLarge } from './GlyphPeersLarge'
-export { default as GlyphPeersMedium } from './GlyphPeersMedium'
-export { default as GlyphPeersSmall } from './GlyphPeersSmall'
-export { default as GlyphPen } from './GlyphPen'
-export { default as GlyphPencil } from './GlyphPencil'
-export { default as GlyphPin } from './GlyphPin'
-export { default as GlyphPinCloud } from './GlyphPinCloud'
-export { default as GlyphPinCloudFailed } from './GlyphPinCloudFailed'
-export { default as GlyphPower } from './GlyphPower'
-export { default as GlyphPresentation } from './GlyphPresentation'
-export { default as GlyphSearch } from './GlyphSearch'
-export { default as GlyphServer } from './GlyphServer'
-export { default as GlyphSettings } from './GlyphSettings'
-export { default as GlyphShare } from './GlyphShare'
-export { default as GlyphSmallArrow } from './GlyphSmallArrow'
-export { default as GlyphSmallCancel } from './GlyphSmallCancel'
-export { default as GlyphSmallInfo } from './GlyphSmallInfo'
-export { default as GlyphSmallTick } from './GlyphSmallTick'
-export { default as GlyphSpeaker } from './GlyphSpeaker'
-export { default as GlyphTag } from './GlyphTag'
-export { default as GlyphTick } from './GlyphTick'
-export { default as GlyphTrash } from './GlyphTrash'
-export { default as GlyphUser } from './GlyphUser'
-export { default as GlyphVoice } from './GlyphVoice'
-export { default as GlyphWallet } from './GlyphWallet'
-export { default as GlyphWeb } from './GlyphWeb'
-export { default as GlyphWindow } from './GlyphWindow'
-export { default as StrokeAdd } from './StrokeAdd'
-export { default as StrokeAttention } from './StrokeAttention'
-export { default as StrokeBasket } from './StrokeBasket'
-export { default as StrokeBook } from './StrokeBook'
-export { default as StrokeCalendar } from './StrokeCalendar'
-export { default as StrokeCamera } from './StrokeCamera'
-export { default as StrokeCancel } from './StrokeCancel'
-export { default as StrokeCase } from './StrokeCase'
-export { default as StrokeCentralization } from './StrokeCentralization'
-export { default as StrokeChart } from './StrokeChart'
-export { default as StrokeChat } from './StrokeChat'
-export { default as StrokeClock } from './StrokeClock'
-export { default as StrokeCloud } from './StrokeCloud'
-export { default as StrokeCode } from './StrokeCode'
-export { default as StrokeCopy } from './StrokeCopy'
-export { default as StrokeCube } from './StrokeCube'
-export { default as StrokeData } from './StrokeData'
-export { default as StrokeDecentralization } from './StrokeDecentralization'
-export { default as StrokeDevices } from './StrokeDevices'
-export { default as StrokeDistributed } from './StrokeDistributed'
-export { default as StrokeDocCalc } from './StrokeDocCalc'
-export { default as StrokeDocGeneric } from './StrokeDocGeneric'
-export { default as StrokeDocMovie } from './StrokeDocMovie'
-export { default as StrokeDocMusic } from './StrokeDocMusic'
-export { default as StrokeDocPicture } from './StrokeDocPicture'
-export { default as StrokeDocText } from './StrokeDocText'
-export { default as StrokeDocument } from './StrokeDocument'
-export { default as StrokeDots } from './StrokeDots'
-export { default as StrokeDownload } from './StrokeDownload'
-export { default as StrokeFilter } from './StrokeFilter'
-export { default as StrokeFolder } from './StrokeFolder'
-export { default as StrokeHome } from './StrokeHome'
-export { default as StrokeIdea } from './StrokeIdea'
-export { default as StrokeInfo } from './StrokeInfo'
-export { default as StrokeIpld } from './StrokeIpld'
-export { default as StrokeLab } from './StrokeLab'
-export { default as StrokeLink } from './StrokeLink'
-export { default as StrokeLinkExternal } from './StrokeLinkExternal'
-export { default as StrokeLock } from './StrokeLock'
-export { default as StrokeMail } from './StrokeMail'
-export { default as StrokeMap } from './StrokeMap'
-export { default as StrokeMarker } from './StrokeMarker'
-export { default as StrokeMarketing } from './StrokeMarketing'
-export { default as StrokeMobile } from './StrokeMobile'
-export { default as StrokeMonitor } from './StrokeMonitor'
-export { default as StrokeNewFolder } from './StrokeNewFolder'
-export { default as StrokePeersLarge } from './StrokePeersLarge'
-export { default as StrokePeersMedium } from './StrokePeersMedium'
-export { default as StrokePeersSmall } from './StrokePeersSmall'
-export { default as StrokePen } from './StrokePen'
-export { default as StrokePencil } from './StrokePencil'
-export { default as StrokePin } from './StrokePin'
-export { default as StrokePinCloud } from './StrokePinCloud'
-export { default as StrokePower } from './StrokePower'
-export { default as StrokePresentation } from './StrokePresentation'
-export { default as StrokeSearch } from './StrokeSearch'
-export { default as StrokeServer } from './StrokeServer'
-export { default as StrokeSettings } from './StrokeSettings'
-export { default as StrokeShare } from './StrokeShare'
-export { default as StrokeSmallArrow } from './StrokeSmallArrow'
-export { default as StrokeSmallCancel } from './StrokeSmallCancel'
-export { default as StrokeSmallInfo } from './StrokeSmallInfo'
-export { default as StrokeSmallTick } from './StrokeSmallTick'
-export { default as StrokeSpeaker } from './StrokeSpeaker'
-export { default as StrokeTag } from './StrokeTag'
-export { default as StrokeTick } from './StrokeTick'
-export { default as StrokeTrash } from './StrokeTrash'
-export { default as StrokeUser } from './StrokeUser'
-export { default as StrokeVoice } from './StrokeVoice'
-export { default as StrokeWallet } from './StrokeWallet'
-export { default as StrokeWeb } from './StrokeWeb'
-export { default as StrokeWindow } from './StrokeWindow'
+export { default as GlyphAdd } from './GlyphAdd.js'
+export { default as GlyphAttention } from './GlyphAttention.js'
+export { default as GlyphBasket } from './GlyphBasket.js'
+export { default as GlyphBook } from './GlyphBook.js'
+export { default as GlyphCalendar } from './GlyphCalendar.js'
+export { default as GlyphCamera } from './GlyphCamera.js'
+export { default as GlyphCancel } from './GlyphCancel.js'
+export { default as GlyphCase } from './GlyphCase.js'
+export { default as GlyphCentralization } from './GlyphCentralization.js'
+export { default as GlyphChart } from './GlyphChart.js'
+export { default as GlyphChat } from './GlyphChat.js'
+export { default as GlyphClock } from './GlyphClock.js'
+export { default as GlyphCloud } from './GlyphCloud.js'
+export { default as GlyphCode } from './GlyphCode.js'
+export { default as GlyphCopy } from './GlyphCopy.js'
+export { default as GlyphCube } from './GlyphCube.js'
+export { default as GlyphData } from './GlyphData.js'
+export { default as GlyphDecentralization } from './GlyphDecentralization.js'
+export { default as GlyphDevices } from './GlyphDevices.js'
+export { default as GlyphDistributed } from './GlyphDistributed.js'
+export { default as GlyphDocCalc } from './GlyphDocCalc.js'
+export { default as GlyphDocGeneric } from './GlyphDocGeneric.js'
+export { default as GlyphDocMovie } from './GlyphDocMovie.js'
+export { default as GlyphDocMusic } from './GlyphDocMusic.js'
+export { default as GlyphDocPicture } from './GlyphDocPicture.js'
+export { default as GlyphDocText } from './GlyphDocText.js'
+export { default as GlyphDocument } from './GlyphDocument.js'
+export { default as GlyphDots } from './GlyphDots.js'
+export { default as GlyphDownload } from './GlyphDownload.js'
+export { default as GlyphFilter } from './GlyphFilter.js'
+export { default as GlyphFolder } from './GlyphFolder.js'
+export { default as GlyphHome } from './GlyphHome.js'
+export { default as GlyphIdea } from './GlyphIdea.js'
+export { default as GlyphInfo } from './GlyphInfo.js'
+export { default as GlyphIpld } from './GlyphIpld.js'
+export { default as GlyphLab } from './GlyphLab.js'
+export { default as GlyphLink } from './GlyphLink.js'
+export { default as GlyphLinkExternal } from './GlyphLinkExternal.js'
+export { default as GlyphLock } from './GlyphLock.js'
+export { default as GlyphMail } from './GlyphMail.js'
+export { default as GlyphMap } from './GlyphMap.js'
+export { default as GlyphMarker } from './GlyphMarker.js'
+export { default as GlyphMarketing } from './GlyphMarketing.js'
+export { default as GlyphMobile } from './GlyphMobile.js'
+export { default as GlyphMonitor } from './GlyphMonitor.js'
+export { default as GlyphNewFolder } from './GlyphNewFolder.js'
+export { default as GlyphPeersLarge } from './GlyphPeersLarge.js'
+export { default as GlyphPeersMedium } from './GlyphPeersMedium.js'
+export { default as GlyphPeersSmall } from './GlyphPeersSmall.js'
+export { default as GlyphPen } from './GlyphPen.js'
+export { default as GlyphPencil } from './GlyphPencil.js'
+export { default as GlyphPin } from './GlyphPin.js'
+export { default as GlyphPinCloud } from './GlyphPinCloud.js'
+export { default as GlyphPinCloudFailed } from './GlyphPinCloudFailed.js'
+export { default as GlyphPower } from './GlyphPower.js'
+export { default as GlyphPresentation } from './GlyphPresentation.js'
+export { default as GlyphSearch } from './GlyphSearch.js'
+export { default as GlyphServer } from './GlyphServer.js'
+export { default as GlyphSettings } from './GlyphSettings.js'
+export { default as GlyphShare } from './GlyphShare.js'
+export { default as GlyphSmallArrow } from './GlyphSmallArrow.js'
+export { default as GlyphSmallCancel } from './GlyphSmallCancel.js'
+export { default as GlyphSmallInfo } from './GlyphSmallInfo.js'
+export { default as GlyphSmallTick } from './GlyphSmallTick.js'
+export { default as GlyphSpeaker } from './GlyphSpeaker.js'
+export { default as GlyphTag } from './GlyphTag.js'
+export { default as GlyphTick } from './GlyphTick.js'
+export { default as GlyphTrash } from './GlyphTrash.js'
+export { default as GlyphUser } from './GlyphUser.js'
+export { default as GlyphVoice } from './GlyphVoice.js'
+export { default as GlyphWallet } from './GlyphWallet.js'
+export { default as GlyphWeb } from './GlyphWeb.js'
+export { default as GlyphWindow } from './GlyphWindow.js'
+export { default as StrokeAdd } from './StrokeAdd.js'
+export { default as StrokeAttention } from './StrokeAttention.js'
+export { default as StrokeBasket } from './StrokeBasket.js'
+export { default as StrokeBook } from './StrokeBook.js'
+export { default as StrokeCalendar } from './StrokeCalendar.js'
+export { default as StrokeCamera } from './StrokeCamera.js'
+export { default as StrokeCancel } from './StrokeCancel.js'
+export { default as StrokeCase } from './StrokeCase.js'
+export { default as StrokeCentralization } from './StrokeCentralization.js'
+export { default as StrokeChart } from './StrokeChart.js'
+export { default as StrokeChat } from './StrokeChat.js'
+export { default as StrokeClock } from './StrokeClock.js'
+export { default as StrokeCloud } from './StrokeCloud.js'
+export { default as StrokeCode } from './StrokeCode.js'
+export { default as StrokeCopy } from './StrokeCopy.js'
+export { default as StrokeCube } from './StrokeCube.js'
+export { default as StrokeData } from './StrokeData.js'
+export { default as StrokeDecentralization } from './StrokeDecentralization.js'
+export { default as StrokeDevices } from './StrokeDevices.js'
+export { default as StrokeDistributed } from './StrokeDistributed.js'
+export { default as StrokeDocCalc } from './StrokeDocCalc.js'
+export { default as StrokeDocGeneric } from './StrokeDocGeneric.js'
+export { default as StrokeDocMovie } from './StrokeDocMovie.js'
+export { default as StrokeDocMusic } from './StrokeDocMusic.js'
+export { default as StrokeDocPicture } from './StrokeDocPicture.js'
+export { default as StrokeDocText } from './StrokeDocText.js'
+export { default as StrokeDocument } from './StrokeDocument.js'
+export { default as StrokeDots } from './StrokeDots.js'
+export { default as StrokeDownload } from './StrokeDownload.js'
+export { default as StrokeFilter } from './StrokeFilter.js'
+export { default as StrokeFolder } from './StrokeFolder.js'
+export { default as StrokeHome } from './StrokeHome.js'
+export { default as StrokeIdea } from './StrokeIdea.js'
+export { default as StrokeInfo } from './StrokeInfo.js'
+export { default as StrokeIpld } from './StrokeIpld.js'
+export { default as StrokeLab } from './StrokeLab.js'
+export { default as StrokeLink } from './StrokeLink.js'
+export { default as StrokeLinkExternal } from './StrokeLinkExternal.js'
+export { default as StrokeLock } from './StrokeLock.js'
+export { default as StrokeMail } from './StrokeMail.js'
+export { default as StrokeMap } from './StrokeMap.js'
+export { default as StrokeMarker } from './StrokeMarker.js'
+export { default as StrokeMarketing } from './StrokeMarketing.js'
+export { default as StrokeMobile } from './StrokeMobile.js'
+export { default as StrokeMonitor } from './StrokeMonitor.js'
+export { default as StrokeNewFolder } from './StrokeNewFolder.js'
+export { default as StrokePeersLarge } from './StrokePeersLarge.js'
+export { default as StrokePeersMedium } from './StrokePeersMedium.js'
+export { default as StrokePeersSmall } from './StrokePeersSmall.js'
+export { default as StrokePen } from './StrokePen.js'
+export { default as StrokePencil } from './StrokePencil.js'
+export { default as StrokePin } from './StrokePin.js'
+export { default as StrokePinCloud } from './StrokePinCloud.js'
+export { default as StrokePower } from './StrokePower.js'
+export { default as StrokePresentation } from './StrokePresentation.js'
+export { default as StrokeSearch } from './StrokeSearch.js'
+export { default as StrokeServer } from './StrokeServer.js'
+export { default as StrokeSettings } from './StrokeSettings.js'
+export { default as StrokeShare } from './StrokeShare.js'
+export { default as StrokeSmallArrow } from './StrokeSmallArrow.js'
+export { default as StrokeSmallCancel } from './StrokeSmallCancel.js'
+export { default as StrokeSmallInfo } from './StrokeSmallInfo.js'
+export { default as StrokeSmallTick } from './StrokeSmallTick.js'
+export { default as StrokeSpeaker } from './StrokeSpeaker.js'
+export { default as StrokeTag } from './StrokeTag.js'
+export { default as StrokeTick } from './StrokeTick.js'
+export { default as StrokeTrash } from './StrokeTrash.js'
+export { default as StrokeUser } from './StrokeUser.js'
+export { default as StrokeVoice } from './StrokeVoice.js'
+export { default as StrokeWallet } from './StrokeWallet.js'
+export { default as StrokeWeb } from './StrokeWeb.js'
+export { default as StrokeWindow } from './StrokeWindow.js'
diff --git a/src/index.js b/src/index.js
index a86571a42..c29da8682 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,13 +3,13 @@ import ReactDOM from 'react-dom'
import { Provider } from 'redux-bundler-react'
import './index.css'
import 'react-virtualized/styles.css'
-import App from './App'
-import getStore from './bundles'
-import bundleCache from './lib/bundle-cache'
+import App from './App.js'
+import getStore from './bundles/index.js'
+import bundleCache from './lib/bundle-cache.js'
import { I18nextProvider } from 'react-i18next'
-import i18n from './i18n'
+import i18n from './i18n.js'
import { DndProvider } from 'react-dnd'
-import DndBackend from './lib/dnd-backend'
+import DndBackend from './lib/dnd-backend.js'
const appVersion = process.env.REACT_APP_VERSION
const gitRevision = process.env.REACT_APP_GIT_REV
diff --git a/src/lib/count-dirs.test.js b/src/lib/count-dirs.test.js
index 1ced200ad..6ef6885e0 100644
--- a/src/lib/count-dirs.test.js
+++ b/src/lib/count-dirs.test.js
@@ -1,5 +1,5 @@
/* global it, expect */
-import countDirs from './count-dirs'
+import countDirs from './count-dirs.js'
it('should return 1 for the root dir', () => {
expect(countDirs([{ path: '/' }])).toBe(1)
diff --git a/src/lib/dnd-backend.test.js b/src/lib/dnd-backend.test.js
index 126cdf3a8..907a93bd0 100644
--- a/src/lib/dnd-backend.test.js
+++ b/src/lib/dnd-backend.test.js
@@ -1,5 +1,5 @@
/* global it, expect */
-import DnDBackend from './dnd-backend'
+import DnDBackend from './dnd-backend.js'
function makeEntry (item) {
if (item.isFile) {
diff --git a/src/lib/files.test.js b/src/lib/files.test.js
index f4dc20a25..ab335092b 100644
--- a/src/lib/files.test.js
+++ b/src/lib/files.test.js
@@ -1,5 +1,5 @@
/* global it, expect */
-import { normalizeFiles } from './files'
+import { normalizeFiles } from './files.js'
function expectRightFormat (output) {
expect(Array.isArray(output)).toBe(true)
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 390913e59..d8336d6fa 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -1,4 +1,4 @@
-import i18n from '../i18n'
+import i18n from '../i18n.js'
// languages.json generated from our locale dir via https://github.com/olizilla/lol
import languages from './languages.json'
diff --git a/src/loader/AsyncRequestLoader.js b/src/loader/AsyncRequestLoader.js
index 55c67bdd6..f333386cd 100644
--- a/src/loader/AsyncRequestLoader.js
+++ b/src/loader/AsyncRequestLoader.js
@@ -1,7 +1,7 @@
import React from 'react'
import { connect } from 'redux-bundler-react'
import debounce from 'react-debounce-render'
-import { Loader } from './Loader'
+import { Loader } from './Loader.js'
export const AsyncRequestLoader = ({ asyncActive }) => (
{
const wrapper = shallow(
diff --git a/src/loader/ComponentLoader.stories.js b/src/loader/ComponentLoader.stories.js
index 9f1fcc7e1..dd60abed3 100644
--- a/src/loader/ComponentLoader.stories.js
+++ b/src/loader/ComponentLoader.stories.js
@@ -1,5 +1,5 @@
import React from '@storybook/react'
-import ComponentLoader from './ComponentLoader'
+import ComponentLoader from './ComponentLoader.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/navigation/NavBar.js b/src/navigation/NavBar.js
index 050997c8c..9925dd224 100644
--- a/src/navigation/NavBar.js
+++ b/src/navigation/NavBar.js
@@ -4,11 +4,11 @@ import { withTranslation } from 'react-i18next'
import classnames from 'classnames'
import ipfsLogoTextVert from './ipfs-logo-text-vert.svg'
import ipfsLogoTextHoriz from './ipfs-logo-text-horiz.svg'
-import StrokeMarketing from '../icons/StrokeMarketing'
-import StrokeWeb from '../icons/StrokeWeb'
-import StrokeCube from '../icons/StrokeCube'
-import StrokeSettings from '../icons/StrokeSettings'
-import StrokeIpld from '../icons/StrokeIpld'
+import StrokeMarketing from '../icons/StrokeMarketing.js'
+import StrokeWeb from '../icons/StrokeWeb.js'
+import StrokeCube from '../icons/StrokeCube.js'
+import StrokeSettings from '../icons/StrokeSettings.js'
+import StrokeIpld from '../icons/StrokeIpld.js'
// Styles
import './NavBar.css'
diff --git a/src/navigation/NavBar.stories.js b/src/navigation/NavBar.stories.js
index 6328eddd1..14074989e 100644
--- a/src/navigation/NavBar.stories.js
+++ b/src/navigation/NavBar.stories.js
@@ -2,8 +2,8 @@ import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { withKnobs, boolean } from '@storybook/addon-knobs'
-import i18n from '../i18n'
-import { NavBar } from './NavBar'
+import i18n from '../i18n.js'
+import { NavBar } from './NavBar.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/peers/AddConnection/AddConnection.js b/src/peers/AddConnection/AddConnection.js
index 7d3276b6e..121d64083 100644
--- a/src/peers/AddConnection/AddConnection.js
+++ b/src/peers/AddConnection/AddConnection.js
@@ -3,13 +3,13 @@ import { withTranslation } from 'react-i18next'
import { connect } from 'redux-bundler-react'
import isIPFS from 'is-ipfs'
-import Checkbox from '../../components/checkbox/Checkbox'
-import Icon from '../../icons/StrokeDecentralization'
-import Button from '../../components/button/Button'
-import Overlay from '../../components/overlay/Overlay'
+import Checkbox from '../../components/checkbox/Checkbox.js'
+import Icon from '../../icons/StrokeDecentralization.js'
+import Button from '../../components/button/Button.js'
+import Overlay from '../../components/overlay/Overlay.js'
-import ComponentLoader from '../../loader/ComponentLoader'
-import { Modal, ModalActions, ModalBody } from '../../components/modal/Modal'
+import ComponentLoader from '../../loader/ComponentLoader.js'
+import { Modal, ModalActions, ModalBody } from '../../components/modal/Modal.js'
class AddConnection extends React.Component {
state = {
diff --git a/src/peers/PeersPage.js b/src/peers/PeersPage.js
index c075cf687..4f2bcc266 100644
--- a/src/peers/PeersPage.js
+++ b/src/peers/PeersPage.js
@@ -3,17 +3,17 @@ import { connect } from 'redux-bundler-react'
import { Helmet } from 'react-helmet'
import { withTranslation } from 'react-i18next'
import ReactJoyride from 'react-joyride'
-import withTour from '../components/tour/withTour'
-import { peersTour } from '../lib/tours'
-import { getJoyrideLocales } from '../helpers/i8n'
+import withTour from '../components/tour/withTour.js'
+import { peersTour } from '../lib/tours.js'
+import { getJoyrideLocales } from '../helpers/i8n.js'
// Components
-import Box from '../components/box/Box'
-import WorldMap from './WorldMap/WorldMap'
-import PeersTable from './PeersTable/PeersTable'
-import AddConnection from './AddConnection/AddConnection'
-import CliTutorMode from '../components/cli-tutor-mode/CliTutorMode'
-import { cliCmdKeys, cliCommandList } from '../bundles/files/consts'
+import Box from '../components/box/Box.js'
+import WorldMap from './WorldMap/WorldMap.js'
+import PeersTable from './PeersTable/PeersTable.js'
+import AddConnection from './AddConnection/AddConnection.js'
+import CliTutorMode from '../components/cli-tutor-mode/CliTutorMode.js'
+import { cliCmdKeys, cliCommandList } from '../bundles/files/consts.js'
const PeersPage = ({ t, toursEnabled, handleJoyrideCallback }) => (
diff --git a/src/peers/PeersTable/PeersTable.js b/src/peers/PeersTable/PeersTable.js
index ba8ef8114..fe5777092 100644
--- a/src/peers/PeersTable/PeersTable.js
+++ b/src/peers/PeersTable/PeersTable.js
@@ -7,8 +7,8 @@ import { withTranslation } from 'react-i18next'
import { Table, Column, AutoSizer, SortDirection } from 'react-virtualized'
import CountryFlag from 'react-country-flag'
import { CopyToClipboard } from 'react-copy-to-clipboard'
-import Cid from '../../components/cid/Cid'
-import { sortByProperty } from '../../lib/sort'
+import Cid from '../../components/cid/Cid.js'
+import { sortByProperty } from '../../lib/sort.js'
import './PeersTable.css'
diff --git a/src/peers/WorldMap/WorldMap.js b/src/peers/WorldMap/WorldMap.js
index cfb15eb45..ecb7d1e25 100644
--- a/src/peers/WorldMap/WorldMap.js
+++ b/src/peers/WorldMap/WorldMap.js
@@ -8,12 +8,12 @@ import { debounce } from 'redux-bundler'
import staticMapSrc from './StaticMap.svg'
-import Address from '../../components/address/Address'
-import Popover from '../../components/popover/Popover'
+import Address from '../../components/address/Address.js'
+import Popover from '../../components/popover/Popover.js'
// Styles
import './WorldMap.css'
-import Cid from '../../components/cid/Cid'
+import Cid from '../../components/cid/Cid.js'
const calculateWidth = (windowWidth) => {
// the d3 generated svg width includes a lot of ocean, that we crop for now, as it looks weird.
diff --git a/src/pins/PinsPage.js b/src/pins/PinsPage.js
index e886ec8c8..2c1fc9d10 100644
--- a/src/pins/PinsPage.js
+++ b/src/pins/PinsPage.js
@@ -2,7 +2,7 @@ import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
-import PinsStatuses from './PinsStatuses'
+import PinsStatuses from './PinsStatuses.js'
const PinsPage = ({ pendingPins, failedPins, completedPins, doDismissCompletedPin, doDismissFailedPin, doCancelPendingPin }) => {
return (
diff --git a/src/pins/PinsStatuses.js b/src/pins/PinsStatuses.js
index 8b27058c0..8fd897705 100644
--- a/src/pins/PinsStatuses.js
+++ b/src/pins/PinsStatuses.js
@@ -1,7 +1,7 @@
import React from 'react'
import { withTranslation } from 'react-i18next'
-import GlyphCancel from '../icons/GlyphCancel'
-import GlyphPinCloud from '../icons/hocs/GlyphPinCloud'
+import GlyphCancel from '../icons/GlyphCancel.js'
+import GlyphPinCloud from '../icons/hocs/GlyphPinCloud.js'
import '../files/PendingAnimation.css'
const Status = {
diff --git a/src/pins/PinsStatuses.stories.js b/src/pins/PinsStatuses.stories.js
index a941730e6..74631b2de 100644
--- a/src/pins/PinsStatuses.stories.js
+++ b/src/pins/PinsStatuses.stories.js
@@ -1,7 +1,7 @@
import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
-import i18nDecorator from '../i18n-decorator'
-import PinsStatuses from './PinsStatuses'
+import i18nDecorator from '../i18n-decorator.js'
+import PinsStatuses from './PinsStatuses.js'
/**
* @type {import('@storybook/react').Meta}
diff --git a/src/settings/AnalyticsPage.js b/src/settings/AnalyticsPage.js
index 60e051db2..c6c191fe8 100644
--- a/src/settings/AnalyticsPage.js
+++ b/src/settings/AnalyticsPage.js
@@ -1,9 +1,9 @@
import React from 'react'
import { Helmet } from 'react-helmet'
import { withTranslation } from 'react-i18next'
-import Title from './Title'
-import Box from '../components/box/Box'
-import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle'
+import Title from './Title.js'
+import Box from '../components/box/Box.js'
+import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle.js'
export const AnalyticsPage = ({ t }) => (
diff --git a/src/settings/SettingsPage.js b/src/settings/SettingsPage.js
index 1b2bdae72..bc26a7ace 100644
--- a/src/settings/SettingsPage.js
+++ b/src/settings/SettingsPage.js
@@ -4,27 +4,27 @@ import { connect } from 'redux-bundler-react'
import { withTranslation, Trans } from 'react-i18next'
import ReactJoyride from 'react-joyride'
// Tour
-import { settingsTour } from '../lib/tours'
-import withTour from '../components/tour/withTour'
-import { getJoyrideLocales } from '../helpers/i8n'
+import { settingsTour } from '../lib/tours.js'
+import withTour from '../components/tour/withTour.js'
+import { getJoyrideLocales } from '../helpers/i8n.js'
// Components
-import Tick from '../icons/GlyphSmallTick'
-import Box from '../components/box/Box'
-import Button from '../components/button/Button'
-import LanguageSelector from '../components/language-selector/LanguageSelector'
-import PinningManager from '../components/pinning-manager/PinningManager'
-import IpnsManager from '../components/ipns-manager/IpnsManager'
-import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle'
-import ApiAddressForm from '../components/api-address-form/ApiAddressForm'
-import PublicGatewayForm from '../components/public-gateway-form/PublicGatewayForm'
-import JsonEditor from './editor/JsonEditor'
-import Experiments from '../components/experiments/ExperimentsPanel'
-import Title from './Title'
-import CliTutorMode from '../components/cli-tutor-mode/CliTutorMode'
-import Checkbox from '../components/checkbox/Checkbox'
+import Tick from '../icons/GlyphSmallTick.js'
+import Box from '../components/box/Box.js'
+import Button from '../components/button/Button.js'
+import LanguageSelector from '../components/language-selector/LanguageSelector.js'
+import PinningManager from '../components/pinning-manager/PinningManager.js'
+import IpnsManager from '../components/ipns-manager/IpnsManager.js'
+import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle.js'
+import ApiAddressForm from '../components/api-address-form/ApiAddressForm.js'
+import PublicGatewayForm from '../components/public-gateway-form/PublicGatewayForm.js'
+import JsonEditor from './editor/JsonEditor.js'
+import Experiments from '../components/experiments/ExperimentsPanel.js'
+import Title from './Title.js'
+import CliTutorMode from '../components/cli-tutor-mode/CliTutorMode.js'
+import Checkbox from '../components/checkbox/Checkbox.js'
import ComponentLoader from '../loader/ComponentLoader.js'
-import StrokeCode from '../icons/StrokeCode'
-import { cliCmdKeys, cliCommandList } from '../bundles/files/consts'
+import StrokeCode from '../icons/StrokeCode.js'
+import { cliCmdKeys, cliCommandList } from '../bundles/files/consts.js'
const PAUSE_AFTER_SAVE_MS = 3000
diff --git a/src/settings/SettingsPage.stories.js b/src/settings/SettingsPage.stories.js
index aa1e3eaa4..9e8d146e4 100644
--- a/src/settings/SettingsPage.stories.js
+++ b/src/settings/SettingsPage.stories.js
@@ -2,9 +2,9 @@ import React from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { withKnobs, boolean } from '@storybook/addon-knobs'
-import i18n from '../i18n'
-import { SettingsPage } from './SettingsPage'
-import i18nDecorator from '../i18n-decorator'
+import i18n from '../i18n.js'
+import { SettingsPage } from './SettingsPage.js'
+import i18nDecorator from '../i18n-decorator.js'
import config from './editor/fixtures/example-config.json'
/**
diff --git a/src/settings/editor/JsonEditor.js b/src/settings/editor/JsonEditor.js
index a58fcb809..784640164 100644
--- a/src/settings/editor/JsonEditor.js
+++ b/src/settings/editor/JsonEditor.js
@@ -2,7 +2,7 @@ import React from 'react'
import AceEditor from 'react-ace'
import 'brace/mode/json'
-import './theme/ipfs_dark'
+import './theme/ipfs_dark.js'
class JsonEditor extends React.Component {
render () {
diff --git a/src/settings/editor/JsonEditor.stories.js b/src/settings/editor/JsonEditor.stories.js
index 7732dae85..4be41a231 100644
--- a/src/settings/editor/JsonEditor.stories.js
+++ b/src/settings/editor/JsonEditor.stories.js
@@ -1,5 +1,5 @@
// Components
-import JsonEditor from './JsonEditor'
+import JsonEditor from './JsonEditor.js'
// Fixtures
import config from './fixtures/example-config.json'
diff --git a/src/status/BandwidthStatsDisabled.js b/src/status/BandwidthStatsDisabled.js
index 825be1cc1..fee11229b 100644
--- a/src/status/BandwidthStatsDisabled.js
+++ b/src/status/BandwidthStatsDisabled.js
@@ -1,7 +1,7 @@
import React from 'react'
import { withTranslation, Trans } from 'react-i18next'
-import Shell from '../components/shell/Shell'
-import Box from '../components/box/Box'
+import Shell from '../components/shell/Shell.js'
+import Box from '../components/box/Box.js'
const StatusNotConnected = ({ t }) => {
return (
diff --git a/src/status/CountryChart.js b/src/status/CountryChart.js
index bbdd6dff9..9dc29850c 100644
--- a/src/status/CountryChart.js
+++ b/src/status/CountryChart.js
@@ -1,6 +1,6 @@
import React from 'react'
import { withTranslation } from 'react-i18next'
-import { Title } from './Commons'
+import { Title } from './Commons.js'
import { Pie } from 'react-chartjs-2'
import { connect } from 'redux-bundler-react'
diff --git a/src/status/NetworkTraffic.js b/src/status/NetworkTraffic.js
index b6aab9de0..8b9d90cf4 100644
--- a/src/status/NetworkTraffic.js
+++ b/src/status/NetworkTraffic.js
@@ -1,8 +1,8 @@
import React from 'react'
import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
-import Speedometer from './Speedometer'
-import { Title } from './Commons'
+import Speedometer from './Speedometer.js'
+import { Title } from './Commons.js'
class NetworkTraffic extends React.Component {
state = {
diff --git a/src/status/NodeBandwidthChart.js b/src/status/NodeBandwidthChart.js
index 5d2d2505d..b2d3da7fc 100644
--- a/src/status/NodeBandwidthChart.js
+++ b/src/status/NodeBandwidthChart.js
@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next'
import { connect } from 'redux-bundler-react'
import PropTypes from 'prop-types'
import filesize from 'filesize'
-import { Title } from './Commons'
+import { Title } from './Commons.js'
// matching units returned by 'ipfs stats bw' in CLI
const bwUnits = {
diff --git a/src/status/NodeInfo.js b/src/status/NodeInfo.js
index 982d6186b..e9b40a69d 100644
--- a/src/status/NodeInfo.js
+++ b/src/status/NodeInfo.js
@@ -1,7 +1,7 @@
import React from 'react'
import { withTranslation } from 'react-i18next'
import { connect } from 'redux-bundler-react'
-import VersionLink from '../components/version-link/VersionLink'
+import VersionLink from '../components/version-link/VersionLink.js'
import { Definition, DefinitionList } from '../components/definition/Definition.js'
class NodeInfo extends React.Component {
diff --git a/src/status/NodeInfoAdvanced.js b/src/status/NodeInfoAdvanced.js
index b8edffd8e..3e2063e9b 100644
--- a/src/status/NodeInfoAdvanced.js
+++ b/src/status/NodeInfoAdvanced.js
@@ -2,9 +2,9 @@ import React from 'react'
import multiaddr from 'multiaddr'
import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
-import Address from '../components/address/Address'
-import Details from '../components/details/Details'
-import ProviderLink from '../components/provider-link/ProviderLink'
+import Address from '../components/address/Address.js'
+import Details from '../components/details/Details.js'
+import ProviderLink from '../components/provider-link/ProviderLink.js'
import { Definition, DefinitionList } from '../components/definition/Definition.js'
function isMultiaddr (addr) {
diff --git a/src/status/PeerBandwidthTable.js b/src/status/PeerBandwidthTable.js
index 447b2d4ca..ff88d4558 100644
--- a/src/status/PeerBandwidthTable.js
+++ b/src/status/PeerBandwidthTable.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react'
import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
import PropTypes from 'prop-types'
-import { humanSize } from '../lib/files'
+import { humanSize } from '../lib/files.js'
import CountryFlag from 'react-country-flag'
-import Box from '../components/box/Box'
-import { Title } from './Commons'
+import Box from '../components/box/Box.js'
+import { Title } from './Commons.js'
import ComponentLoader from '../loader/ComponentLoader.js'
const isWindows = window.navigator.appVersion.indexOf('Win') !== -1
diff --git a/src/status/StatusConnected.js b/src/status/StatusConnected.js
index 350fa18a7..aa45f6221 100644
--- a/src/status/StatusConnected.js
+++ b/src/status/StatusConnected.js
@@ -1,7 +1,7 @@
import React from 'react'
import { withTranslation, Trans } from 'react-i18next'
import { connect } from 'redux-bundler-react'
-import { humanSize } from '../lib/files'
+import { humanSize } from '../lib/files.js'
export const StatusConnected = ({ t, peersCount, repoSize }) => {
const humanRepoSize = humanSize(repoSize || 0)
diff --git a/src/status/StatusConnected.stories.js b/src/status/StatusConnected.stories.js
index 692ef3e37..d6cd6ec5c 100644
--- a/src/status/StatusConnected.stories.js
+++ b/src/status/StatusConnected.stories.js
@@ -1,5 +1,5 @@
import React from '@storybook/react'
-import i18n from '../i18n-decorator'
+import i18n from '../i18n-decorator.js'
import { TranslatedStatusConnected as StatusConnected } from './StatusConnected.js'
diff --git a/src/status/StatusPage.js b/src/status/StatusPage.js
index 72dd2d8fc..960626687 100644
--- a/src/status/StatusPage.js
+++ b/src/status/StatusPage.js
@@ -3,18 +3,18 @@ import { Helmet } from 'react-helmet'
import { withTranslation, Trans } from 'react-i18next'
import { connect } from 'redux-bundler-react'
import ReactJoyride from 'react-joyride'
-import StatusConnected from './StatusConnected'
-import BandwidthStatsDisabled from './BandwidthStatsDisabled'
-import IsNotConnected from '../components/is-not-connected/IsNotConnected'
-import NodeInfo from './NodeInfo'
-import NodeInfoAdvanced from './NodeInfoAdvanced'
-import NodeBandwidthChart from './NodeBandwidthChart'
-import NetworkTraffic from './NetworkTraffic'
-import Box from '../components/box/Box'
-import AnalyticsBanner from '../components/analytics-banner/AnalyticsBanner'
-import { statusTour } from '../lib/tours'
-import { getJoyrideLocales } from '../helpers/i8n'
-import withTour from '../components/tour/withTour'
+import StatusConnected from './StatusConnected.js'
+import BandwidthStatsDisabled from './BandwidthStatsDisabled.js'
+import IsNotConnected from '../components/is-not-connected/IsNotConnected.js'
+import NodeInfo from './NodeInfo.js'
+import NodeInfoAdvanced from './NodeInfoAdvanced.js'
+import NodeBandwidthChart from './NodeBandwidthChart.js'
+import NetworkTraffic from './NetworkTraffic.js'
+import Box from '../components/box/Box.js'
+import AnalyticsBanner from '../components/analytics-banner/AnalyticsBanner.js'
+import { statusTour } from '../lib/tours.js'
+import { getJoyrideLocales } from '../helpers/i8n.js'
+import withTour from '../components/tour/withTour.js'
const StatusPage = ({
t,
diff --git a/src/welcome/WelcomePage.js b/src/welcome/WelcomePage.js
index 0a16b0a5a..9266683b9 100644
--- a/src/welcome/WelcomePage.js
+++ b/src/welcome/WelcomePage.js
@@ -3,15 +3,15 @@ import { Helmet } from 'react-helmet'
import { connect } from 'redux-bundler-react'
import { withTranslation } from 'react-i18next'
import ReactJoyride from 'react-joyride'
-import withTour from '../components/tour/withTour'
-import { welcomeTour } from '../lib/tours'
-import { getJoyrideLocales } from '../helpers/i8n'
+import withTour from '../components/tour/withTour.js'
+import { welcomeTour } from '../lib/tours.js'
+import { getJoyrideLocales } from '../helpers/i8n.js'
// Components
-import IsConnected from '../components/is-connected/IsConnected'
-import IsNotConnected from '../components/is-not-connected/IsNotConnected'
-import AboutIpfs from '../components/about-ipfs/AboutIpfs'
-import AboutWebUI from '../components/about-webui/AboutWebUI'
+import IsConnected from '../components/is-connected/IsConnected.js'
+import IsNotConnected from '../components/is-not-connected/IsNotConnected.js'
+import AboutIpfs from '../components/about-ipfs/AboutIpfs.js'
+import AboutWebUI from '../components/about-webui/AboutWebUI.js'
import ComponentLoader from '../loader/ComponentLoader.js'
const WelcomePage = ({ t, apiUrl, ipfsInitFailed, ipfsConnected, ipfsReady, toursEnabled, handleJoyrideCallback }) => {
diff --git a/test/helpers/bandwidth.js b/test/helpers/bandwidth.js
index d119592d7..2ca2b322e 100644
--- a/test/helpers/bandwidth.js
+++ b/test/helpers/bandwidth.js
@@ -1,4 +1,4 @@
-import { randomBig } from './random'
+import { randomBig } from './random.js'
export function fakeBandwidth () {
const rb = () => randomBig(0, Number.MAX_VALUE)
diff --git a/test/helpers/ip.js b/test/helpers/ip.js
index 163cf1da8..c28d529de 100644
--- a/test/helpers/ip.js
+++ b/test/helpers/ip.js
@@ -1,4 +1,4 @@
-import { randomInt } from './random'
+import { randomInt } from './random.js'
export function fakeIp4 () {
return Array(4).fill(0).map(() => randomInt(1, 256)).join('.')