Webpack-dev-server无法编译与Webpack相同的源

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.