Webpack-dev-server fails to compile the same source as Webpack - reactjs

Question

I'm trying to configure webpack-dev-server, but keep getting the error
webpack: Failed to compile.
What's strange is that I can successfully compile with just webpack. Here's the output from both:
Webpack-dev-server
> app-react#1.0.0 web-dev E:\App.React
> cross-env NODE_ENV=development webpack-dev-server --progress --colors
[17:42:21] developer mode: enabled
[17:42:21] Beta release: false
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from / 10% building modules 4/7 modules 3 active ...eact\node_modules\strip-ansi\index.js
[at-loader] Using typescript#2.4.1 from typescript and "tsconfig.json" from E:\App.React/tsconfig.json.
94% asset optimization
[at-loader] Checking started in a separate process...
[at-loader] Checking finished with 3 errors Hash: a94bf08b4d38bcd62009
Version: webpack 2.2.1
Time: 5372ms
Asset Size Chunks Chunk Names
bundle.js 1.71 MB 0 [emitted] [big] main
bundle.js.map 2.09 MB 0 [emitted] main
chunk {0} bundle.js, bundle.js.map (main) 1.67 MB [entry] [rendered]
[223] ./~/reactxp/index.js 146 bytes {0} [built]
[239] ./src/ts/index.tsx 248 bytes {0} [built]
[240] (webpack)-dev-server/client?http://localhost:8080 5.59 kB {0} [built]
[241] ./~/ansi-html/index.js 4.26 kB {0} [built]
[242] ./~/ansi-regex/index.js 135 bytes {0} [built]
[243] ./src/ts/arena/TempTDP.tsx 2.6 kB {0} [built]
[244] ./src/ts/platform/web/PlatformModules.ts 414 bytes {0} [built]
[262] ./~/html-entities/index.js 231 bytes {0} [built]
[564] ./~/strip-ansi/index.js 161 bytes {0} [built]
[566] ./~/url/url.js 23.3 kB {0} [built]
[567] ./~/url/util.js 314 bytes {0} [built]
[571] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[572] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[574] (webpack)/hot/emitter.js 77 bytes {0} [built]
[575] multi (webpack)-dev-server/client?http://localhost:8080 ./src/ts/index.tsx 40 bytes {0} [built]
+ 561 hidden modules
ERROR in [at-loader] ./src/ts/index.tsx:5:30
TS2322: Type '{}' is not assignable to type 'null'.
ERROR in [at-loader] ./src/ts/platform/native-common/NativeLogger.ts:1:31
TS7016: Could not find a declaration file for module 'react-native'. 'E:/App.React/node_modules/react-native/Libraries/react-native/react-native.js' implicitly has an 'any' type.
Try `npm install #types/react-native` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native';`
ERROR in [at-loader] ./src/typings/react.d.ts:112:11
TS2559: Type 'Component<P, S>' has no properties in common with type 'ComponentLifecycle<P, S>'.
webpack: Failed to compile.
Webpack
> app-react#1.0.0 web-watch E:\App.React
> cross-env NODE_ENV=development webpack --progress --colors --watch
[17:46:04] developer mode: enabled
[17:46:04] Beta release: false
0% compiling
Webpack is watching the files…
10% building modules 0/1 modules 1 active ....js!E:\App.React\src\ts\index.tsx
[at-loader] Using typescript#2.4.1 from typescript and "tsconfig.json" from E:\App.React/tsconfig.json.
94% asset optimization
[at-loader] Checking started in a separate process...
[at-loader] Checking finished with 3 errors Hash: c0ddf8dd298d85956a54
Version: webpack 2.2.1
Time: 4495ms
Asset Size Chunks Chunk Names
bundle.js 1.41 MB 0 [emitted] [big] main
bundle.js.map 1.73 MB 0 [emitted] main
[3] ./~/reactxp/dist/common/Interfaces.js 9.04 kB {0} [built]
[5] ./~/react/react.js 56 bytes {0} [built]
[13] ./~/reactxp/dist/common/Types.js 8.78 kB {0} [built]
[14] ./~/reactxp/dist/web/Styles.js 15.3 kB {0} [built]
[119] ./~/reactxp/dist/web/ViewBase.js 8.94 kB {0} [built]
[121] ./~/reactxp/index.js 146 bytes {0} [built]
[198] ./~/reactxp/dist/web/Accessibility.js 1.07 kB {0} [built]
[199] ./~/reactxp/dist/web/Image.js 14.1 kB {0} [built]
[202] ./~/reactxp/dist/web/Text.js 4.71 kB {0} [built]
[203] ./~/reactxp/dist/web/TextInput.js 8.3 kB {0} [built]
[207] ./src/ts/arena/TempTDP.tsx 2.6 kB {0} [built]
[208] ./src/ts/platform/web/PlatformModules.ts 414 bytes {0} [built]
[209] ./src/ts/platform/web/WebLogger.ts 600 bytes {0} [built]
[478] ./~/reactxp/dist/web/ReactXP.js 5.47 kB {0} [built]
[494] ./src/ts/index.tsx 248 bytes {0} [built]
+ 480 hidden modules
ERROR in [at-loader] ./src/ts/index.tsx:5:30
TS2322: Type '{}' is not assignable to type 'null'.
ERROR in [at-loader] ./src/ts/platform/native-common/NativeLogger.ts:1:31
TS7016: Could not find a declaration file for module 'react-native'. 'E:/App.React/node_modules/react-native/Libraries/react-native/react-native.js' implicitly has an 'any' type.
Try `npm install #types/react-native` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native';`
ERROR in [at-loader] ./src/typings/react.d.ts:112:11
TS2559: Type 'Component<P, S>' has no properties in common with type 'ComponentLifecycle<P, S>'.
I'm using webpack#2.2.1 and webpack-dev-server#2.5.1. I have tried other versions but still get the same problem.
Would those errors cause webpack-dev-server to fail, but not webpack?
Here's my webpack.config.js:
const webpackConfig: webpack.Configuration = {
entry: "./src/ts/index.tsx",
output: {
path: __dirname + "/build/web",
filename: "bundle.js"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
alias: {
PlatformModules: path.resolve(
__dirname,
"src/ts/platform/web/PlatformModules"
)
}
},
module: {
loaders: isDev
? [{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }]
: [
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{
test: /\.tsx?$/,
loader: "webpack-unassert-loader",
enforce: "post"
}
]
}
};
export default webpackConfig;
I also can't seem to find any info online on how to debug these types of issues. Is there no --verbose equivalent?

Answer 1

From your webpack log:
ERROR in [at-loader] ./src/ts/index.tsx:5:30
TS2322: Type '{}' is not assignable to type 'null'.
ERROR in [at-loader] ./src/ts/platform/native-common/NativeLogger.ts:1:31
TS7016: Could not find a declaration file for module 'react-native'. 'E:/App.React/node_modules/react-native/Libraries/react-native/react-native.js' implicitly has an 'any' type.
Try `npm install #types/react-native` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native';`
ERROR in [at-loader] ./src/typings/react.d.ts:112:11
TS2559: Type 'Component<P, S>' has no properties in common with type 'ComponentLifecycle<P, S>'.
You can see that webpack is failing too. Fix these errors and both (webpack and webpack-dev-server) will work.