[Bug] TypeScript Template does not Build or Run

Environment

  System:
    OS: macOS Mojave 10.14.4
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 93.85 MB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.12.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 73.0.3683.103
    Firefox: 65.0.1
    Firefox Developer Edition: 67.0
    Safari: 12.1
  npmPackages:
    react: ^16.8.2 => 16.8.6 
    react-dom: ^16.8.2 => 16.8.6 
    react-static: ^7.0.0 => 7.0.5 
    react-static-plugin-reach-router: ^7.0.0 => 7.0.0 
    react-static-plugin-sitemap: ^7.0.0 => 7.0.0 
    react-static-plugin-source-filesystem: ^7.0.0 => 7.0.0 
    react-static-plugin-typescript: ^7.0.0 => 7.0.0 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-static: 7.0.10

YOUR ENV INFO HERE FOR DEBUGGING

MacBook-Pro:typescript-react-static troy$ yarn build
yarn run v1.15.2
$ react-static build
Bundling application for Production...

Cleaning dist...
[✓] Dist cleaned
Cleaning artifacts...
[✓] Artifacts cleaned
Building Routes...
Importing routes from directory...
[✓] Routes Built (0.2s)
Building Templates...
[✓] Templates Built
Copying public directory...
[✓] Public directory copied
Bundling App...
Starting type checking service...
Using 1 worker with 2048MB memory limit
Starting type checking service...
Using 1 worker with 2048MB memory limit
Version: webpack 4.29.6
Time: 8146ms
Built at: 04/30/2019 8:58:33 PM
                                    Asset       Size  Chunks             Chunk Names
                         main.65f02e5d.js   6.55 KiB       0  [emitted]  main
                      styles.0422aaa1.css  336 bytes       6  [emitted]  styles
templates/src/containers/Post.fe3184d6.js  383 bytes       1  [emitted]  src/containers/Post
  templates/src/pages/404.tsx.0e08b5d7.js  255 bytes       2  [emitted]  src/pages/404.tsx
templates/src/pages/about.tsx.a8ecda2b.js  272 bytes       3  [emitted]  src/pages/about.tsx
 templates/src/pages/blog.tsx.d2d4e6fa.js  481 bytes       4  [emitted]  src/pages/blog.tsx
templates/src/pages/index.tsx.f48097b4.js  570 bytes       5  [emitted]  src/pages/index.tsx
             templates/styles.0422aaa1.js   82 bytes       6  [emitted]  styles
       templates/vendors~main.7fbd8f65.js    231 KiB       7  [emitted]  vendors~main
  [0] typescript-react-static/node_modules/react/index.js 189 bytes {7} [built]
  [2] typescript-react-static/node_modules/@babel/runtime/helpers/interopRequireDefault.js 147 bytes {7} [built]
  [7] ../lib/browser/index.js 24.6 KiB {7} [built]
 [11] (webpack)/buildin/module.js 552 bytes {7} [built]
 [17] ../lib/browser/hooks/useStaticInfo.js 624 bytes {7} [built]
 [23] typescript-react-static/node_modules/@babel/runtime/helpers/extends.js 427 bytes {7} [built]
 [26] typescript-react-static/artifacts/react-static-browser-plugins.js 534 bytes {0} [built]
 [40] typescript-react-static/node_modules/@babel/runtime/helpers/interopRequireWildcard.js 643 bytes {7} [built]
 [43] typescript-react-static/artifacts/react-static-templates.js 3.66 KiB {0} [built]
 [53] multi ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js ../lib/bootstrapApp.js 52 bytes {0} [built]
 [54] ../lib/bootstrapPlugins.js 472 bytes {7} [built]
[117] ../lib/bootstrapTemplates.js 722 bytes {7} [built]
[126] ../lib/bootstrapApp.js 1.48 KiB {7} [built]
[127] typescript-react-static/node_modules/@babel/runtime/helpers/objectWithoutProperties.js 665 bytes {7} [built]
[129] typescript-react-static/src/index.tsx 656 bytes {0} [built]
    + 122 hidden modules

ERROR in typescript-react-static/src/App.tsx
ERROR in typescript-react-static/src/App.tsx(2,24):
TS2305: Module '"react-static"' has no exported member 'addPrefetchExcludes'.

ERROR in typescript-react-static/src/App.tsx
ERROR in typescript-react-static/src/App.tsx(25,16):
TS2322: Type '{ path: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Routes> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
  Property 'path' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Routes> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

ERROR in typescript-react-static/src/containers/Post.tsx
ERROR in typescript-react-static/src/containers/Post.tsx(7,36):
TS2349: Cannot invoke an expression whose type lacks a call signature. Type '{}' has no compatible call signatures.

ERROR in typescript-react-static/src/pages/blog.tsx
ERROR in typescript-react-static/src/pages/blog.tsx(7,40):
TS2349: Cannot invoke an expression whose type lacks a call signature. Type '{}' has no compatible call signatures.
Child extract-css-chunks-webpack-plugin ../../css-loader/dist/cjs.js??ref--4-oneOf-3-1!../../postcss-loader/src/index.js??postcss!../../../src/app.css:
    [0] typescript-react-static/node_modules/css-loader/dist/cjs.js??ref--4-oneOf-3-1!typescript-react-static/node_modules/postcss-loader/src??postcss!typescript-react-static/src/app.css 624 bytes {0} [built]
    [1] typescript-react-static/node_modules/css-loader/dist/runtime/api.js 2.35 KiB {0} [built]

                => There were ERRORS during the prod build stage! :(
                => Fix them and try again!
              
Version: webpack 4.29.6
Time: 3483ms
Built at: 04/30/2019 8:58:28 PM
        Asset      Size  Chunks             Chunk Names
static-app.js  66.8 KiB       0  [emitted]  main
 [0] external "react" 42 bytes {0} [built]
 [8] (webpack)/buildin/module.js 552 bytes {0} [built]
[12] typescript-react-static/artifacts/react-static-browser-plugins.js 610 bytes {0} [built]
[13] external "typescript-react-static/node_modules/react-static/lib/browser" 42 bytes {0} [built]
[14] typescript-react-static/artifacts/react-static-templates.js 4.19 KiB {0} [built]
[24] multi ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js ../lib/bootstrapApp.js 52 bytes {0} [built]
[25] ../lib/bootstrapPlugins.js 472 bytes {0} [built]
[26] ../lib/bootstrapTemplates.js 722 bytes {0} [built]
[32] ../lib/bootstrapApp.js 1.48 KiB {0} [built]
[33] external "@babel/runtime/helpers/interopRequireWildcard" 42 bytes {0} [built]
[34] external "@babel/runtime/helpers/interopRequireDefault" 42 bytes {0} [built]
[35] external "@babel/runtime/helpers/extends" 42 bytes {0} [built]
[36] external "@babel/runtime/helpers/objectWithoutProperties" 42 bytes {0} [built]
[37] external "typescript-react-static/node_modules/react-static/lib/browser/hooks/useStaticInfo" 42 bytes {0} [built]
[38] typescript-react-static/src/index.tsx 746 bytes {0} [built]
    + 27 hidden modules

ERROR in typescript-react-static/src/App.tsx
ERROR in typescript-react-static/src/App.tsx(2,24):
TS2305: Module '"react-static"' has no exported member 'addPrefetchExcludes'.

ERROR in typescript-react-static/src/App.tsx
ERROR in typescript-react-static/src/App.tsx(25,16):
TS2322: Type '{ path: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Routes> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
  Property 'path' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Routes> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

ERROR in typescript-react-static/src/containers/Post.tsx
ERROR in typescript-react-static/src/containers/Post.tsx(7,36):
TS2349: Cannot invoke an expression whose type lacks a call signature. Type '{}' has no compatible call signatures.

ERROR in typescript-react-static/src/pages/blog.tsx
ERROR in typescript-react-static/src/pages/blog.tsx(7,40):
TS2349: Cannot invoke an expression whose type lacks a call signature. Type '{}' has no compatible call signatures.

                => There were ERRORS during the node build stage! :(
                => Fix them and try again!
              
[✓] App Bundled (8.7s)
Fetching Site Data...
[✓] Site Data Downloaded
Fetching Route Data...
[========================================================================================================] 104/104 100% 52000/s 0.0s 
[✓] Route Data Downloaded
Exporting HTML across 12 threads...
[========================================================================================================] 104/104 100% 542/s 0.0s 
[✓] HTML Exported (7s)
Warning: react-static-plugin-sitemap - No 'siteRoot' is defined in 'static.config.js'. This is required to generate a sitemap.xml.

Your app is now exported! Here's what we suggest doing next:

- Upload your 'dist' directory to your favorite static host! We recommend using Netlify:
  - npx netlify-cli deploy
- Analyze your app's webpack bundles
  - react-static bundle --analyze

✨  Done in 19.26s.
MacBook-Pro:typescript-react-static troy$ 

Some specific errors

  const { posts }: { posts: Post[] } = useRouteData()

I think the index.d.ts has useRouteData improperly defined as an object

import { Root, Routes, addPrefetchExcludes } from 'react-static'

TS2305: Module ‘“react-static”’ has no exported member ‘addPrefetchExcludes’.

  <Routes path="*" />

TS2322: Type ‘{ path: string; }’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes<Routes> & Readonly<{}> & Readonly<{ children?: ReactNode; }>’. Property ‘path’ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes<Routes> & Readonly<{}> & Readonly<{ children?: ReactNode; }>’.

Steps to Reproduce the problem

1. react-static create
2. name: typescript-react-static
3. select typescript template
4. cd typescript-react-static
5. change static.config.js ‘entry:’ to entry: path.join(__dirname, ‘src’, ‘index.tsx’)
6. yarn build

Expected Behavior

Successful build

Reproducible Demo

See above Steps to Reproduce the problem

[tzarger]

Ok, after digging in the commits, it is interesting that I have the latest react-static globally:

  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-static: 7.0.10

but the installed version when using react-static create installs:

    react-static: ^7.0.0 => 7.0.5 
    react-static-plugin-reach-router: ^7.0.0 => 7.0.0 
    react-static-plugin-sitemap: ^7.0.0 => 7.0.0 
    react-static-plugin-source-filesystem: ^7.0.0 => 7.0.0 
    react-static-plugin-typescript: ^7.0.0 => 7.0.0 

So I manually updated all packages in the package.json and reinstalled all node_modules… and it runs perfectly now other than adjusting the entry in the static.config.js

Other than finding out why the package.json does not install the latest, this can be closed.

[amirhouieh]

It seems that react-static version in typescript template needs to be adjusted too! it is 7.0.0 and caused some errors! had to change it to 7.1.0 and works fine!