Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
arayaryoma opened this issue Nov 5, 2021 · 1 comment
Open

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

arayaryoma opened this issue Nov 5, 2021 · 1 comment
Labels
documentation Improvements or additions to documentation

Comments

@arayaryoma
Copy link

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.

@uhyo uhyo added the bug Something isn't working label Nov 5, 2021
@uhyo
Copy link
Owner

uhyo commented Nov 14, 2021

I'm afraid you need to import everything from rocon/react. 😨

- import Rocon from "rocon";
- import { useRoutes } from "rocon/react";
+ import Rocon, { useRoutes } from "rocon/react";

The package structure seems to have room for improvement, or documentation may be improved...

@uhyo uhyo added documentation Improvements or additions to documentation and removed bug Something isn't working labels Nov 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

2 participants