[Bug] TypeScript Template does not Build or Run

[tzarger]

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 & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
Property 'path' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & 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]

I noticed this doesn't seem to be in the latest build that created the project:

https://github.com/nozzle/react-static/blob/5d85d3565ec27296825dd94d021b4e397eecaaf3/packages/react-static/src/index.d.ts#L23

and

https://github.com/nozzle/react-static/blob/5d85d3565ec27296825dd94d021b4e397eecaaf3/packages/react-static/src/index.d.ts#L26

that would resolve 2 of 3 build errors...

[tzarger]

Ok, one last thing I noticed... a fresh install of react-static using yarn global add react-static seems to install version

    react-static: ^7.0.0 => 7.0.5 

and not the latest which is 7.0.10 according to commit log.

[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.

[swyxio]

thank you. yeah i have no idea why the create command doesnt install the latest versions!!! its really weird. i have told @tannerlinsley about this before but dont know the cause.

[tzarger]

@sw-yx I see your proposed fix... hopefully that will fix it.

One more thing, can you also document some place for the TypeScript users the fact that you have to adjust the entry in the static.config.js to entry: path.join(__dirname, 'src', 'index.tsx') as that is also a bad initial experience... I had to find a closed issue to find the answer about that as well.

[swyxio]

ok. sorry :( its up to us as a community to do these things since Tanner doesnt own the TypeScript stuff haha.

why document it, why not just fix the template here? https://github.com/nozzle/react-static/blob/master/packages/react-static/templates/typescript/static.config.js#L8

[tzarger]

@sw-yx Sure, that would be great, I would be willing to PR it ... but not sure what the protocol here is for PRs especially with your access. I saw some conversations about that, and it seemed like there was not a consensus on fixing that as the push was to allow people to set their own index.tsx ... Anyway, let me know if you want to fix while you are PRing the package.json ... or would like me to PR it. Thanks @sw-yx !

[swyxio]

oh i just have commit access, nothing special haha. ok i will add it to my PR. but in future please feel free to PR fixes

[swyxio]

done

[SleeplessByte]

This is the reason the version does not update.

A decent solution is removing yarn.lock and then doing yarn.

[SleeplessByte]

All typescript issues here are fixed in #1181