rocon
rocon copied to clipboard
Sample code doesn't work with TS 4.4 strict mode
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.
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...