Running Freecodecamp on local machine error

Contributors
1

I’ve followed this guide:

to set up and run freeCodeCamp on my local machine. I don’t run into any errors throughout the steps, but once I get to the 4th step, and run
pnpm run develop, I get a bunch of errors as attached below.

3379             polyline: React.SVGProps<SVGPolylineElement>;
                 ~~~~~~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3280:13
    3280             polyline: React.SVGProps<SVGPolylineElement>;
                     ~~~~~~~~
    'polyline' was also declared here.

../../../../node_modules/@types/react/ts5.0/index.d.ts:3380:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'radialGradient' must be of type 'SVGProps<SVGRadialGradientElement>', but here has type 'SVGProps<SVGRadialGradientElement>'.

3380             radialGradient: React.SVGProps<SVGRadialGradientElement>;
                 ~~~~~~~~~~~~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3281:13
    3281             radialGradient: React.SVGProps<SVGRadialGradientElement>;
                     ~~~~~~~~~~~~~~
    'radialGradient' was also declared here.

../../../../node_modules/@types/react/ts5.0/index.d.ts:3381:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'rect' must be of type 'SVGProps<SVGRectElement>', but here has type 'SVGProps<SVGRectElement>'.

3381             rect: React.SVGProps<SVGRectElement>;
                 ~~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3282:13
    3282             rect: React.SVGProps<SVGRectElement>;
                     ~~~~
    'rect' was also declared here.

../../../../node_modules/@types/react/ts5.0/index.d.ts:3382:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'stop' must be of type 'SVGProps<SVGStopElement>', but here has type 'SVGProps<SVGStopElement>'.

3382             stop: React.SVGProps<SVGStopElement>;
                 ~~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3283:13
    3283             stop: React.SVGProps<SVGStopElement>;
                     ~~~~
    'stop' was also declared here.

../../../../node_modules/@types/react/ts5.0/index.d.ts:3383:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'switch' must be of type 'SVGProps<SVGSwitchElement>', but here has type 'SVGProps<SVGSwitchElement>'.

3383             switch: React.SVGProps<SVGSwitchElement>;
                 ~~~~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3284:13
    3284             switch: React.SVGProps<SVGSwitchElement>;
                     ~~~~~~
    'switch' was also declared here.

../../../../node_modules/@types/react/ts5.0/index.d.ts:3384:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'symbol' must be of type 'SVGProps<SVGSymbolElement>', but here has type 'SVGProps<SVGSymbolElement>'.

3384             symbol: React.SVGProps<SVGSymbolElement>;
                 ~~~~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3285:13
    3285             symbol: React.SVGProps<SVGSymbolElement>;
                     ~~~~~~
    'symbol' was also declared here.

../../../../node_modules/@types/react/ts5.0/index.d.ts:3385:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'text' must be of type 'SVGTextElementAttributes<SVGTextElement>', but here has type 'SVGTextElementAttributes<SVGTextElement>'.

3385             text: React.SVGTextElementAttributes<SVGTextElement>;
                 ~~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3286:13
    3286             text: React.SVGTextElementAttributes<SVGTextElement>;
                     ~~~~
    'text' was also declared here.

../../../../node_modules/@types/react/ts5.0/index.d.ts:3386:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'textPath' must be of type 'SVGProps<SVGTextPathElement>', but here has type 'SVGProps<SVGTextPathElement>'.

3386             textPath: React.SVGProps<SVGTextPathElement>;
                 ~~~~~~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3287:13
    3287             textPath: React.SVGProps<SVGTextPathElement>;
                     ~~~~~~~~
    'textPath' was also declared here.

../../../../node_modules/@types/react/ts5.0/index.d.ts:3387:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'tspan' must be of type 'SVGProps<SVGTSpanElement>', but here has type 'SVGProps<SVGTSpanElement>'.

3387             tspan: React.SVGProps<SVGTSpanElement>;
                 ~~~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3288:13
    3288             tspan: React.SVGProps<SVGTSpanElement>;
                     ~~~~~
    'tspan' was also declared here.

../../../../node_modules/@types/react/ts5.0/index.d.ts:3388:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'use' must be of type 'SVGProps<SVGUseElement>', but here has type 'SVGProps<SVGUseElement>'.

3388             use: React.SVGProps<SVGUseElement>;
                 ~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3289:13
    3289             use: React.SVGProps<SVGUseElement>;
                     ~~~
    'use' was also declared here.

../../../../node_modules/@types/react/ts5.0/index.d.ts:3389:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'view' must be of type 'SVGProps<SVGViewElement>', but here has type 'SVGProps<SVGViewElement>'.

3389             view: React.SVGProps<SVGViewElement>;
                 ~~~~

  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3290:13
    3290             view: React.SVGProps<SVGViewElement>;
                     ~~~~
    'view' was also declared here.

../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3092:19 - error TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}, any>' and 'Component<any, {}, any>'.
  Named property 'context' of types 'Component<any, {}, any>' and 'Component<any, {}, any>' are not identical.

3092         interface ElementClass extends React.Component<any> {
                       ~~~~~~~~~~~~

../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3092:19 - error TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}, any>' and 'Component<any, {}, any>'.
  Named property 'props' of types 'Component<any, {}, any>' and 'Component<any, {}, any>' are not identical.

3092         interface ElementClass extends React.Component<any> {
                       ~~~~~~~~~~~~

../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3092:19 - error TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}, any>' and 'Component<any, {}, any>'.
  Named property 'refs' of types 'Component<any, {}, any>' and 'Component<any, {}, any>' are not identical.

3092         interface ElementClass extends React.Component<any> {
                       ~~~~~~~~~~~~

../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3100:14 - error TS2300: Duplicate identifier 'LibraryManagedAttributes'.

3100         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
                  ~~~~~~~~~~~~~~~~~~~~~~~~

  ../../../../node_modules/@types/react/ts5.0/index.d.ts:3199:14
    3199         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    'LibraryManagedAttributes' was also declared here.

src/form-group/form-group.tsx:29:8 - error TS2786: 'Component' cannot be used as a JSX component.
  Its element type 'Element | Component<{ validationstate: "error" | "success" | "warning" | null | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; ... 257 more ...; as: typeof Component | undefined; }, {}, any>' is not a valid JSX element.
    Type 'Component<{ validationstate: "error" | "success" | "warning" | null | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 256 more ...; as: typeof Component | undefined; }, {}, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<{ validationstate: "error" | "success" | "warning" | null | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 256 more ...; as: typeof Component | undefined; }, {}, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/sam/Desktop/node_modules/@types/react/ts5.0/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

29       <Component
          ~~~~~~~~~


Found 181 errors in 3 files.

Errors  Files
   176  ../../../../node_modules/@types/react/ts5.0/index.d.ts:3199
     4  ../../node_modules/.pnpm/@types+react@16.14.45/node_modules/@types/react/index.d.ts:3092
     1  src/form-group/form-group.tsx:29
/Users/sam/Desktop/PersonalProject/freeCodeCamp/tools/ui-components:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @freecodecamp/ui@0.0.1 build: `pnpm run build:css && pnpm run build:js && tsc`
Exit status 2
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed.
 ELIFECYCLE  Command failed.
ERROR: "develop:client" exited with 1.
 ELIFECYCLE  Command failed with exit code 1.

I thought it might be Typescript issue so I tried installing it again, and also tried re-installing pnpm, but to no avail.

I was hoping someone could help me fix this issue :frowning:

Thank you!!

2

Welcome there,

It looks like you are running this on Windows?

If so, please note we do not support Windows for local development:

Hope this helps.

1 Like
3

Thank you for the reply! :smiley:

That’s strange because I’m running this on a macOS.
Should I resort to using Gitpod instead?

4

Gitpod works quite well and you do not have to think about it. At least for doing smaller PRs I don’t think there is all that much benefit to having a local setup. Other than the learning experience I suppose.

5

Yeah, I’ll try using Gitpod instead then. Hopefully it goes smoothly :crossed_fingers:

Thanks!

6

Oh. Well, I am unsure why it is not working, then.

I hope you have success with Gitpod, though.