Skip to content

Sample code doesn't work with TS 4.4 strict mode #25

@arayaryoma

Description

@arayaryoma

I tried to run sample codes written in official doc, but I got errors from tsc.

app.tsx

import React from "react";
import { FunctionComponent } from "react";
import { RoconRoot } from "rocon/react";
import { Routes } from "./routes";

const App: FunctionComponent = () => {
  return (
    <RoconRoot>
      <Routes />
    </RoconRoot>
  );
};

routes.tsx

import React from "react";
import Rocon from "rocon";
import { useRoutes } from "rocon/react";
const toplevelRoutes = Rocon.Path()
  .exact({
    action: () => <p>I am top page</p>,
  })
  .route("foo", (route) => route.action(() => <p>This is foo</p>))
  .route("bar", (route) => route.action(() => <p>This is bar</p>));

export const Routes: React.FC = () => {
  return useRoutes(toplevelRoutes);
};

tsconifg

{
  "compilerOptions": {
    "target": "es2021",
    "lib": ["DOM"],
    "jsx": "react",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

tsc and node version

$./node_modules/.bin/tsc -v
Version 4.4.4

$ node -v
v16.8.0

Result of running tsc

tsc --noEmit
src/routes.tsx:12:20 - error TS2345: Argument of type 'PathRouteBuilder<unknown, { foo: RouteDefinition<unknown, {}>; bar: RouteDefinition<unknown, {}>; }, "none", "hasaction", {}>' is not assignable to parameter of type 'AttachableRouteBuilder<ReactElement | null, unknown>'.
  The types returned by 'getBuilderLink()' are incompatible between these types.
    Type 'RouteBuilderLink<unknown, string | undefined>' is not assignable to type 'BuilderLink<ReactElement | null, unknown, RouteBuilderLinkValue<ReactElement | null>>'.
      Type 'RouteBuilderLinkValue<unknown>' is not assignable to type 'RouteBuilderLinkValue<ReactElement | null>'.
        Type 'unknown' is not assignable to type 'ReactElement | null'.
          Type 'unknown' is not assignable to type 'ReactElement'.

12   return useRoutes(toplevelRoutes);
                      ~~~~~~~~~~~~~~


Found 1 error.

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions