Webpack Build Fails

[willcode4food]

Hello,

Out of the box when I run npm run dev, I get the following error message

Error ./app/components/user/index.tsx
 TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<IGithubUserContainerProps, "dispatch" | "userPageState" | "user">>' is not assignable to type 'typeof GithubUserContainer'.
    Type 'Component<Pick<IGithubUserContainerProps, "dispatch" | "userPageState" | "user">, ComponentState>' is not assignable to type 'GithubUserContainer'.
      Property 'componentDidMount' is optional in type 'Component<Pick<IGithubUserContainerProps, "dispatch" | "userPageState" | "user">, ComponentState>' but required in type 'GithubUserContainer'.

and

ERROR in ./app/components/documentation/index.tsx
TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<IDocumentationComponentProps, never>>' is not assignable to type 'typeof DocumentationComponent'.
    Type 'Component<Pick<IDocumentationComponentProps, never>, ComponentState>' is not assignable to type 'DocumentationComponent'.
      Types of property 'render' are incompatible.
        Type '() => ReactNode' is not assignable to type '() => Element'.
          Type 'ReactNode' is not assignable to type 'Element'.
            Type 'string' is not assignable to type 'Element'.

[TylerShin]

Did you run npm install before run npm run dev?
It seems like ur Typescript version doesn't fit with the current package.

I just tried to clone this repository and ran it again. it works fine.

node version is 9.2.1
npm version is 5.5.1
in MacOS environment.

[sghiassy]

Got the same error as mentioned above.

Verified correct node and npm versions

❯ node --version
v9.2.1
❯ npm --version
5.5.1

Example output

 master U:1 ?:1  ~/Dev/beyond-example-app/                        10:34:11 AM  sghiassy
❯ npm install
npm WARN deprecated @types/[email protected]: This is a stub types definition for aws-sdk (https://github.com/aws/aws-sdk-js). aws-sdk provides its own type definitions, so you don't need @types/aws-sdk installed!
npm WARN deprecated @types/[email protected]: This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!
npm WARN deprecated @types/[email protected]: This is a stub types definition for Facebook's Immutable (https://github.com/facebook/immutable-js). Facebook's Immutable provides its own type definitions, so you don't need @types/immutable installed!
npm WARN deprecated [email protected]: breaking changes in minor version
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Package no longer supported. Contact [email protected] for more info.

> [email protected] install ~/Dev/beyond-example-app/node_modules/fsevents
> node install

[fsevents] Success: "~/Dev/beyond-example-app/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote

> [email protected] install ~/Dev/beyond-example-app/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.0/darwin-x64-59_binding.node
Download complete ░⸩ ⠋ :
Binary saved to ~/Dev/beyond-example-app/node_modules/node-sass/vendor/darwin-x64-59/binding.node
Caching binary to ~/.npm/node-sass/4.9.0/darwin-x64-59_binding.node

> [email protected] postinstall ~/Dev/beyond-example-app/node_modules/spawn-sync
> node postinstall


> [email protected] postinstall ~/Dev/beyond-example-app/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js


> [email protected] postinstall ~/Dev/beyond-example-app/node_modules/node-sass
> node scripts/build.js

Binary found at ~/Dev/beyond-example-app/node_modules/node-sass/vendor/darwin-x64-59/binding.node
Testing binary
Binary is fine

> [email protected] postinstall ~/Dev/beyond-example-app/node_modules/serverless
> node ./scripts/postinstall.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of react-dom@^15.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

added 1928 packages in 56.228s
  master U:2 ?:2  ~/Dev/beyond-example-app/                        10:35:14 AM  sghiassy
❯ npm run dev

> [email protected] dev ~/Dev/beyond-example-app/
> webpack-dev-server --content-base app/ --hot --progress --colors --host 0.0.0.0

 10% building modules 1/1 modules 0 active
Project is running at http://0.0.0.0:8080/
webpack output is served from /
Content not from webpack is served from ~/Dev/beyond-example-app/app
Hash: 605eac57d785c0859296                                                             s
Version: webpack 3.12.0
Time: 9054ms
 2 assets
  [36] (webpack)/buildin/global.js 509 bytes {0} [built]
  [95] ./node_modules/redux/es/index.js 1.08 kB {0} [built]
 [102] (webpack)/hot/log.js 1.04 kB {0} [built]
 [129] ./node_modules/process/browser.js 5.42 kB {0} [built]
 [131] ./node_modules/history/es/index.js 460 bytes {0} [built]
 [134] ./node_modules/react-redux/es/index.js 230 bytes {0} [built]
 [137] ./node_modules/react-router-redux/es/index.js 420 bytes {0} [built]
 [202] ./node_modules/immutable/dist/immutable.js 142 kB {0} [built]
 [256] multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./app/index.tsx 64 bytes {0} [built]
 [257] (webpack)-dev-server/client?http://0.0.0.0:8080 7.93 kB {0} [built]
 [277] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
 [279] ./node_modules/babel-polyfill/lib/index.js 833 bytes {0} [built]
 [477] ./node_modules/regenerator-runtime/runtime.js 24.4 kB {0} [built]
 [478] ./node_modules/babel-polyfill/node_modules/core-js/fn/regexp/escape.js 108 bytes {0} [built]
 [481] ./app/index.tsx 3.17 kB {0} [built]
    + 631 hidden modules

ERROR in ./app/components/user/index.tsx
[tsl] ERROR in ~/Dev/beyond-example-app/app/components/user/index.tsx(33,1)
      TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<IGithubUserContainerProps, "dispatch" | "userPageState" | "user">>' is not assignable to type 'typeof GithubUserContainer'.
    Type 'Component<Pick<IGithubUserContainerProps, "dispatch" | "userPageState" | "user">, ComponentState,...' is not assignable to type 'GithubUserContainer'.
      Property 'componentDidMount' is optional in type 'Component<Pick<IGithubUserContainerProps, "dispatch" | "userPageState" | "user">, ComponentState,...' but required in type 'GithubUserContainer'.

ERROR in ./app/components/documentation/index.tsx
[tsl] ERROR in ~/Dev/beyond-example-app/app/components/documentation/index.tsx(15,1)
      TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<IDocumentationComponentProps, never>>' is not assignable to type 'typeof DocumentationComponent'.
    Type 'Component<Pick<IDocumentationComponentProps, never>, ComponentState, any>' is not assignable to type 'DocumentationComponent'.
      Types of property 'render' are incompatible.
        Type '() => ReactNode' is not assignable to type '() => Element'.
          Type 'ReactNode' is not assignable to type 'Element'.
            Type 'string' is not assignable to type 'Element'.
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.ejs 756 bytes {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.
webpack: Compiling...
Hash: 98989a6a5d04bd560cce
Version: webpack 3.12.0
Time: 3129ms
 6 assets
 [231] ./app/routes.tsx 3.94 kB {0} [built]
 [275] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
 [620] ./app/components/user/index.tsx 3.48 kB {0} [built] [1 error]
    + 643 hidden modules

ERROR in ./app/components/documentation/index.tsx
[tsl] ERROR in ~/Dev/beyond-example-app/app/components/documentation/index.tsx(15,1)
      TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<IDocumentationComponentProps, never>>' is not assignable to type 'typeof DocumentationComponent'.
    Type 'Component<Pick<IDocumentationComponentProps, never>, ComponentState, any>' is not assignable to type 'DocumentationComponent'.
      Types of property 'render' are incompatible.
        Type '() => ReactNode' is not assignable to type '() => Element'.
          Type 'ReactNode' is not assignable to type 'Element'.
            Type 'string' is not assignable to type 'Element'.

ERROR in ./app/components/user/index.tsx
[tsl] ERROR in ~/Dev/beyond-example-app/app/components/user/index.tsx(33,1)
      TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<IGithubUserContainerProps, "dispatch" | "userPageState" | "user">>' is not assignable to type 'typeof GithubUserContainer'.
    Type 'Component<Pick<IGithubUserContainerProps, "dispatch" | "userPageState" | "user">, ComponentState,...' is not assignable to type 'GithubUserContainer'.
      Property 'componentDidMount' is optional in type 'Component<Pick<IGithubUserContainerProps, "dispatch" | "userPageState" | "user">, ComponentState,...' but required in type 'GithubUserContainer'.
Child html-webpack-plugin for "index.html":
     2 assets
       4 modules
webpack: Failed to compile.

[TylerShin]

Okay. I'll check it at the weekend. thanks for sharing.

[good0204]

Did you solve the problem? Then let me know plzzzzzzzzzzzzzzzzzzzzz.

[TylerShin]

@good0204 sorry. I was too busy to maintain this project. I'll fix and update all relevant issues and packages soon.