Added path resolves

__tests__/main.test.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
-import * as renderer from 'react-test-renderer'
+import React from 'react'
+import renderer from 'react-test-renderer'
 
 import '../__mocks__'
 

package.json

@@ -9,8 +9,8 @@
         "test:cover": "jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
         "lint": "tslint {__tests__,src}/**/*.{ts,tsx} webpack.*.ts",
         "stylelint": "stylelint src/**/*.scss --syntax scss",
-        "compileConf:dev": "tsc webpack.development.config.ts --lib es6,dom",
-        "compileConf:prod": "tsc webpack.production.config.ts --lib es6,dom",
+        "compileConf:dev": "tsc webpack.development.config.ts --lib es6,dom --esModuleInterop",
+        "compileConf:prod": "tsc webpack.production.config.ts --lib es6,dom --esModuleInterop",
         "stats": "npm run compileConf:prod && webpack --config webpack.production.config.js --profile --json > compilation-stats.json"
     },
     "jest": {
@@ -25,6 +25,7 @@
             "json",
             "scss"
         ],
+        "modulePaths": ["src"],
         "moduleNameMapper": {
             "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.ts",
             "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/styleMock.ts"
@@ -87,8 +88,8 @@
         "tslint-eslint-rules": "^4.1.1",
         "typescript": "^2.7.2",
         "typings-for-css-modules-loader": "^1.7.0",
-        "webpack": "^4.1.1",
-        "webpack-cli": "^2.0.12",
-        "webpack-dev-server": "^3.1.1"
+        "webpack": "^4.8.1",
+        "webpack-cli": "^2.1.3",
+        "webpack-dev-server": "^3.1.4"
     }
 }

src/components/App/App.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react'
+import Footer from 'components/Footer'
+import Home from 'components/Home'
+import Navbar from 'components/Navbar'
+import NotFound from 'components/NotFound'
+import React from 'react'
 import { Route, Switch } from 'react-router'
-import Footer from '../Footer'
-import Home from '../Home'
-import Navbar from '../Navbar'
-import NotFound from '../NotFound'
 
-import Version from '../Version'
+import Version from 'components/Version'
 
 const App: React.StatelessComponent = () => (
 	<>

src/components/App/Root.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { hot } from 'react-hot-loader'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'react-router-redux'

src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 const Footer: React.StatelessComponent = (props) =>  (
 	<footer>

src/components/Home.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 const Home: React.StatelessComponent = (props) =>  (
 	<div>

src/components/Navbar/Navbar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { Link } from 'react-router-dom'
 
 import './navbar.scss'

src/components/NotFound.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { RouteComponentProps } from 'react-router'
 
 const NotFound: React.StatelessComponent<RouteComponentProps<any>> = ({ location }) => (

src/components/Version.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
+import { Actions } from 'actions'
+import React from 'react'
 import { connect } from 'react-redux'
 import { returntypeof } from 'react-redux-typescript'
-import { Actions } from '../actions'
-import { State } from '../reducers'
+import { State } from 'reducers'
 
 const mapStateToProps = (state: State) => ({
 	version: state.version

src/index.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom'
 
-import './styles/main.scss'
+import 'styles/main.scss'
 
 import Root from './components/App'
 

src/reducers/version.ts

@@ -1,4 +1,4 @@
-import { Action } from '../actions'
+import { Action } from 'actions'
 
 export default function version (state: string = '', action: Action) {
 	switch (action.type) {

src/sagas/SagaManager.ts

@@ -5,7 +5,7 @@ import { Store } from 'redux'
 import { SagaMiddleware } from 'redux-saga'
 import { cancel, fork, take } from 'redux-saga/effects'
 
-import { State } from '../reducers'
+import { State } from 'reducers'
 import demoSaga from './version'
 
 const sagas = [demoSaga]

src/sagas/version.ts

@@ -1,7 +1,7 @@
 import { takeEvery } from 'redux-saga'
 import { call, put  } from 'redux-saga/effects'
 
-import { Actions } from '../actions'
+import { Actions } from 'actions'
 
 export default function * watchConnects () {
 	yield takeEvery('FETCH_VERSION', fetchVersion)

tsconfig.json

@@ -12,7 +12,9 @@
 			"es2016",
 			"es2017"
 		],
-		"jsx": "react"
+		"esModuleInterop": true,
+		"jsx": "react",
+		"baseUrl": "src"
 	},
 	"include": [
 		"./src/*"

webpack.config.ts

@@ -1,9 +1,11 @@
-import * as HtmlWebpackPlugin from 'html-webpack-plugin'
-import * as path from 'path'
-import * as webpack from 'webpack'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import path from 'path'
+import webpack from 'webpack'
 
 const packageJSON = require('./package.json')
 
+const srcResolve = (dir: string) => path.join(__dirname, 'src', dir)
+
 const config: webpack.Configuration = {
 	entry: './src/index.tsx',
 
@@ -14,7 +16,10 @@ const config: webpack.Configuration = {
 
 	resolve: {
 		alias: {
-			styles: path.resolve(__dirname, 'src/styles')
+			actions: srcResolve('actions'),
+			components: srcResolve('components'),
+			reducers: srcResolve('reducers'),
+			styles: srcResolve('styles')
 		},
 		extensions: packageJSON.jest.moduleFileExtensions.map(ext => `.${ext}`)
 	},

webpack.development.config.ts

@@ -1,4 +1,4 @@
-import * as webpack from 'webpack'
+import webpack from 'webpack'
 import baseConfig from './webpack.config'
 
 (baseConfig.module.rules[1] as any).use.unshift('style-loader') // Used to load CSS on dev-server

webpack.production.config.ts

@@ -1,5 +1,5 @@
-import * as MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import * as webpack from 'webpack'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import webpack from 'webpack'
 import baseConfig from './webpack.config'
 
 (baseConfig.module.rules[1] as any).use.unshift(MiniCssExtractPlugin.loader)