Pagination example generates typescript errors

[FabriceSalvaire]

Astro Info

Astro                    v4.2.6
Node                     v20.10.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I am learning astro...
It worked fine until I was using npm dev but when I ran npm build I got zillion of unreadable warnings and errors.

My console is over flooded by

dist/_astro/index.LFf77hJu.js:9:2812 - warning ts(2568): Property 'value' may not exist on type '"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"'. Did you mean 'valueOf'?
  Property 'value' does not exist on type '"string"'.

9  */var y=Symbol.for("react.element"),T=Symbol.for("react.portal"),V=Symbol.for("react.fragment"),A=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),U=Symbol.for("react.provider"),q=Symbol.for("react.context"),F=Symbol.for("react.forward_ref"),L=Symbol.for("react.suspense"),M=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),w=Symbol.iterator;function z(e){return e===null||typeof e!="object"?null:(e=w&&e[w]||e["@@iterator"],typeof e=="function"?e:null)}var C={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},x=Object.assign,j={};function p(e,t,n){this.props=e,this.context=t,this.refs=j,this.updater=n||C}p.prototype.isReactComponent={};p.prototype.setState=function(e,t){if(typeof e!="object"&&typeof e!="function"&&e!=null)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")};p.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};function O(){}O.prototype=p.prototype;function m(e,t,n){this.props=e,this.context=t,this.refs=j,this.updater=n||C}var S=m.prototype=new O;S.constructor=m;x(S,p.prototype);S.isPureReactComponent=!0;var R=Array.isArray,g=Object.prototype.hasOwnProperty,E={current:null},P={key:!0,ref:!0,__self:!0,__source:!0};function I(e,t,n){var u,o={},i=null,s=null;if(t!=null)for(u in t.ref!==void 0&&(s=t.ref),t.key!==void 0&&(i=""+t.key),t)g.call(t,u)&&!P.hasOwnProperty(u)&&(o[u]=t[u]);var f=arguments.length-2;if(f===1)o.children=n;else if(1<f){for(var c=Array(f),a=0;a<f;a++)c[a]=arguments[a+2];o.children=c}if(e&&e.defaultProps)for(u in f=e.defaultProps,f)o[u]===void 0&&(o[u]=f[u]);return{$$typeof:y,type:e,key:i,ref:s,props:o,_owner:E.current}}function B(e,t){return{$$typeof:y,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}function k(e){return typeof e=="object"&&e!==null&&e.$$typeof===y}function H(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,function(n){return t[n]})}var $=/\/+/g;function v(e,t){return typeof e=="object"&&e!==null&&e.key!=null?H(""+e.key):t.toString(36)}function _(e,t,n,u,o){var i=typeof e;(i==="undefined"||i==="boolean")&&(e=null);var s=!1;if(e===null)s=!0;else switch(i){case"string":case"number":s=!0;break;case"object":switch(e.$$typeof){case y:case T:s=!0}}if(s)return s=e,o=o(s),e=u===""?"."+v(s,0):u,R(o)?(n="",e!=null&&(n=e.replace($,"$&/")+"/"),_(o,t,n,"",function(a){return a})):o!=null&&(k(o)&&(o=B(o,n+(!o.key||s&&s.key===o.key?"":(""+o.key).replace($,"$&/")+"/")+e)),t.push(o)),1;if(s=0,u=u===""?".":u+":",R(e))for(var f=0;f<e.length;f++){i=e[f];var c=u+v(i,f);s+=_(i,t,n,c,o)}else if(c=z(e),typeof c=="function")for(e=c.call(e),f=0;!(i=e.next()).done;)i=i.value,c=u+v(i,f++),s+=_(i,t,n,c,o);else if(i==="object")throw t=String(e),Error("Objects are not valid as a React child (found: "+(t==="[object Object]"?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.");return s}function d(e,t,n){if(e==null)return e;var u=[],o=0;return _(e,u,"","",function(i){return t.call(n,i,o++)}),u}function W(e){if(e._status===-1){var t=e._result;t=t(),t.then(function(n){(e._status===0||e._status===-1)&&(e._status=1,e._result=n)},function(n){(e._status===0||e._status===-1)&&(e._status=2,e._result=n)}),e._status===-1&&(e._status=0,e._result=t)}if(e._status===1)return e._result.default;throw e._result}var l={current:null},h={transition:null},G={ReactCurrentDispatcher:l,ReactCurrentBatchConfig:h,ReactCurrentOwner:E};r.Children={map:d,forEach:function(e,t,n){d(e,function(){t.apply(this,arguments)},n)},count:function(e){var t=0;return d(e,function(){t++}),t},toArray:function(e){return d(e,function(t){return t})||[]},only:function(e){if(!k(e))throw Error("React.Children.only expected to receive a single React element child.");return e}};r.Component=p;r.Fragment=V;r.Profiler=D;r.PureComponent=m;r.StrictMode=A;r.Suspense=L;r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=G;r.cloneElement=function(e,t,n){if(e==null)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var u=x({},e.props),o=e.key,i=e.ref,s=e._owner;if(t!=null){if(t.ref!==void 0&&(i=t.ref,s=E.current),t.key!==void 0&&(o=""+t.key),e.type&&e.type.defaultProps)var f=e.type.defaultProps;for(c in t)g.call(t,c)&&!P.hasOwnProperty(c)&&(u[c]=t[c]===void 0&&f!==void 0?f[c]:t[c])}var c=arguments.length-2;if(c===1)u.children=n;else if(1<c){f=Array(c);for(var a=0;a<c;a++)f[a]=arguments[a+2];u.children=f}return{$$typeof:y,type:e.type,key:o,ref:i,props:u,_owner:s}};r.createContext=function(e){return e={$$typeof:q,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null},e.Provider={$$typeof:U,_context:e},e.Consumer=e};r.createElement=I;r.createFactory=function(e){var t=I.bind(null,e);return t.type=e,t};r.createRef=function(){return{current:null}};r.forwardRef=function(e){return{$$typeof:F,render:e}};r.isValidElement=k;r.lazy=function(e){return{$$typeof:N,_payload:{_status:-1,_result:e},_init:W}};r.memo=function(e,t){return{$$typeof:M,type:e,compare:t===void 0?null:t}};r.startTransition=function(e){var t=h.transition;h.transition={};try{e()}finally{h.transition=t}};r.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.")};r.useCallback=function(e,t){return l.current.useCallback(e,t)};r.useContext=function(e){return l.current.useContext(e)};r.useDebugValue=function(){};r.useDeferredValue=function(e){return l.current.useDeferredValue(e)};r.useEffect=function(e,t){return l.current.useEffect(e,t)};r.useId=function(){return l.current.useId()};r.useImperativeHandle=function(e,t,n){return l.current.useImperativeHandle(e,t,n)};r.useInsertionEffect=function(e,t){return l.current.useInsertionEffect(e,t)};r.useLayoutEffect=function(e,t){return l.current.useLayoutEffect(e,t)};r.useMemo=function(e,t){return l.current.useMemo(e,t)};r.useReducer=function(e,t,n){return l.current.useReducer(e,t,n)};r.useRef=function(e){return l.current.useRef(e)};r.useState=function(e){return l.current.useState(e)};r.useSyncExternalStore=function(e,t,n){return l.current.useSyncExternalStore(e,t,n)};r.useTransition=function(){return l.current.useTransition()};r.version="18.2.0";b.exports=r;var J=b.exports;export{J as r};
                                               

I copy-pasted code from https://docs.astro.build/en/core-concepts/routing/#pagination
but typescript is no happy !

Same for the examples I found on the web.

Then I searched for explanations.
I found #6507 and PR#2963
But I am lost.

What's the expected result?

Improve doc...

Link to Minimal Reproducible Example

irrelevant

Participation

• I am willing to submit a pull request for this issue.

[FabriceSalvaire]

Ok I found https://docs.astro.build/en/guides/typescript/#infer-getstaticpaths-types
Now I get rid of the errors. Still have zillion of warnings dist/_astro/index.LFf77hJu.js ...

I think it is disturbing to have a new project wizard that enforce strict typescript and a documentation and examples on the web that are not valid typescript.

[Princesseuh]

Duplicate of withastro/language-tools#643 , which is ultimately the issue you're experiencing, not the code itself having errors