Template no longer works out of the Box

[PJJDenso]

Hey guys, I've noticed since trying to use this template it is no longer working fresh after creating a new app.

Is this template still being supported or has there been a new domo custom app template developed else where?

Thanks.

[jasonleehodges]

@PJJDenso it is still being supported. Can you please provide reproducible steps and we can have someone take a look?

[PJJDenso]

1. Open VS Code in Admin mode to specific folder.
2. yarn create react-app [lowercase app name] --template git+ssh://git@github.com/DomoApps/advanced.git
   Some Errors appear during creation:
   error https://npm.labsdev.domotech.io/@esbuild%2fandroid-arm/-/android-arm-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-android-64/-/esbuild-android-64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-android-arm64/-/esbuild-android-arm64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/@esbuild%2flinux-loong64/-/linux-loong64-0.15.18.tgz: connect ETIMEDOUT
   error An unexpected error occurred: "https://npm.labsdev.domotech.io/@size-limit%2ffile/-/file-8.1.0.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-darwin-64/-/esbuild-darwin-64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-linux-64/-/esbuild-linux-64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-linux-32/-/esbuild-linux-32-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-linux-arm/-/esbuild-linux-arm-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-windows-32/-/esbuild-windows-32-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-sunos-64/-/esbuild-sunos-64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-windows-64/-/esbuild-windows-64-0.15.18.tgz: connect ETIMEDOUT
   error https://npm.labsdev.domotech.io/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.18.tgz: connect ETIMEDOUT

Internet on my end seems fine, so I'm not sure what it timing out.
Creation completes.

3. Navigate VS Code to new app folder
4. yarn
5. yarn start (default manifest)
   Fails to start:
   Error: Cannot find module 'typescript'
6. yarn add typerscript
7. yarn start (default manifest)
   App starts but is full of errors.

Module not found: Error: Can't resolve 'react-redux' in 'D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src\components\counter'
ERROR in ./src/components/counter/index.tsx 6:0-55
Module not found: Error: Can't resolve 'react-redux' in 'D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src\components\counter'

ERROR in ./src/index.tsx 6:0-39
Module not found: Error: Can't resolve 'react-redux' in 'D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src'

ERROR in ./src/index.tsx 8:0-59
Module not found: Error: Can't resolve '@domoapps/react-components' in 'D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src'

ERROR in ./src/reducers/counter/actions.ts 3:0-66
Module not found: Error: Can't resolve '@reduxjs/toolkit' in 'D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src\reducers\counter'

ERROR in ./src/reducers/counter/reducer.ts 3:0-49
Module not found: Error: Can't resolve '@reduxjs/toolkit' in 'D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src\reducers\counter'

ERROR in ./src/reducers/index.ts 5:0-50
Module not found: Error: Can't resolve '@reduxjs/toolkit' in 'D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src\reducers'

ERROR in [eslint] prettier.resolveConfig.sync is not a function
Occurred while linting D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src\index.tsx:1
Rule: "prettier/prettier"

webpack compiled with 7 errors
ERROR in src/components/app/index.tsx:2:18
TS2307: Cannot find module './AdvancedAppPlatform.png' or its corresponding type declarations.
1 | import React from 'react';

2 | import logo from './AdvancedAppPlatform.png';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 | import { Counter } from 'components/counter';
4 | import styles from './index.module.scss';
5 |

ERROR in src/components/app/index.tsx:4:20
TS2307: Cannot find module './index.module.scss' or its corresponding type declarations.
2 | import logo from './AdvancedAppPlatform.png';
3 | import { Counter } from 'components/counter';

4 | import styles from './index.module.scss';
| ^^^^^^^^^^^^^^^^^^^^^
5 |
6 | const App = () => (
7 |

ERROR in src/components/counter/index.tsx:11:20
TS2307: Cannot find module './index.module.scss' or its corresponding type declarations.
9 | incrementAsyncThunk,
10 | } from 'reducers/counter/actions';

11 | import styles from './index.module.scss';
| ^^^^^^^^^^^^^^^^^^^^^
12 |
13 | export const Counter = () => {
14 | const count = useSelector(selectCount);

ERROR in src/index.tsx:5:31
TS2307: Cannot find module '@domoapps/react-components' or its corresponding type declarations.
3 | import { Provider } from 'react-redux';
4 | import RyuuJS from 'ryuu.js';

5 | import { TranslatedApp } from '@domoapps/react-components';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6 |
7 | import { store } from './reducers';
8 | import App from 'components/app';

ERROR in src/reducers/counter/actions.ts:1:48
TS2307: Cannot find module '@reduxjs/toolkit' or its corresponding type declarations.

1 | import { createAction, createAsyncThunk } from '@reduxjs/toolkit';
| ^^^^^^^^^^^^^^^^^^
2 | import { AppThunk } from '..';
3 |
4 | export const increment = createAction('INCREMENT');

ERROR in src/reducers/counter/actions.ts:14:4
TS7006: Parameter 'dispatch' implicitly has an 'any' type.
12 | export const incrementAsync =
13 | (amount: number): AppThunk =>

14 | (dispatch) => {
| ^^^^^^^^
15 | setTimeout(() => {
16 | dispatch(incrementByAmount(amount));
17 | }, 1000);

ERROR in src/reducers/counter/actions.ts:26:26
TS7006: Parameter 'thunkAPI' implicitly has an 'any' type.
24 | export const incrementAsyncThunk = createAsyncThunk(
25 | 'INCREMENT_THUNK',

26 | async (amount: number, thunkAPI) =>
| ^^^^^^^^
27 | await new Promise((resolve, reject) => {
28 | setTimeout(() => {
29 | resolve(amount);

ERROR in src/reducers/counter/reducer.ts:1:46
TS2307: Cannot find module '@reduxjs/toolkit' or its corresponding type declarations.

1 | import { createReducer, PayloadAction } from '@reduxjs/toolkit';
| ^^^^^^^^^^^^^^^^^^
2 | import {
3 | increment,
4 | decrement,

ERROR in src/reducers/counter/reducer.ts:18:53
TS7006: Parameter 'counter' implicitly has an 'any' type.
16 | };
17 |

18 | const counterReducer = createReducer(initialState, (counter) => {
| ^^^^^^^
19 | counter
20 | .addCase(increment, (state: CounterState) => ({
21 | ...state,

ERROR in src/reducers/index.ts:3:53
TS2307: Cannot find module '@reduxjs/toolkit' or its corresponding type declarations.
1 | // WARNING: DO NOT DELETE ANY BOILERPLATE COMMENTS IN THIS FILE.
2 | // IF YOU DO, GENERATED REDUCERS WILL NOT BE WIRED UP AUTOMATICALLY.

3 | import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
| ^^^^^^^^^^^^^^^^^^
4 | import counterReducer from './counter/reducer';
5 | // importRef
6 |

8. yarn add react-redux
9. yarn add @reduxjs/toolkit
10. yarn start (default manifest)
    Errors that persist:

Module not found: Error: Can't resolve '@domoapps/react-components' in 'D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src'
ERROR in ./src/index.tsx 8:0-59
Module not found: Error: Can't resolve '@domoapps/react-components' in 'D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src'

ERROR in [eslint] prettier.resolveConfig.sync is not a function
Occurred while linting D:\VS\DOMO Node\SMDDashboard\ExampleApp\exampleapp2\src\index.tsx:1
Rule: "prettier/prettier"

webpack compiled with 2 errors
ERROR in src/components/app/index.tsx:2:18
TS2307: Cannot find module './AdvancedAppPlatform.png' or its corresponding type declarations.
1 | import React from 'react';

2 | import logo from './AdvancedAppPlatform.png';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 | import { Counter } from 'components/counter';
4 | import styles from './index.module.scss';
5 |

ERROR in src/components/app/index.tsx:4:20
TS2307: Cannot find module './index.module.scss' or its corresponding type declarations.
2 | import logo from './AdvancedAppPlatform.png';
3 | import { Counter } from 'components/counter';

4 | import styles from './index.module.scss';
| ^^^^^^^^^^^^^^^^^^^^^
5 |
6 | const App = () => (
7 |

ERROR in src/components/counter/index.tsx:11:20
TS2307: Cannot find module './index.module.scss' or its corresponding type declarations.
9 | incrementAsyncThunk,
10 | } from 'reducers/counter/actions';

11 | import styles from './index.module.scss';
| ^^^^^^^^^^^^^^^^^^^^^
12 |
13 | export const Counter = () => {
14 | const count = useSelector(selectCount);

ERROR in src/components/counter/index.tsx:62:15
TS2345: Argument of type 'AppThunk' is not assignable to parameter of type 'AnyAction'.
60 | onClick={() =>
61 | dispatch(

62 | incrementAsync(
| ^^^^^^^^^^^^^^^
63 | !Number.isNaN(Number(incrementAmount))
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
64 | ? Number(incrementAmount)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
65 | : 0,
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
66 | ),
| ^^^^^^^^^^^^^^^^
67 | )
68 | }
69 | >

ERROR in src/components/counter/index.tsx:76:15
TS2345: Argument of type 'AsyncThunkAction<number, number, AsyncThunkConfig>' is not assignable to parameter of type 'AnyAction'.
74 | onClick={() =>
75 | dispatch(

76 | incrementAsyncThunk(
| ^^^^^^^^^^^^^^^^^^^^
77 | !Number.isNaN(Number(incrementAmount))
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
78 | ? Number(incrementAmount)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
79 | : 0,
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
80 | ),
| ^^^^^^^^^^^^^^^^
81 | )
82 | }
83 | >

ERROR in src/index.tsx:5:31
TS2307: Cannot find module '@domoapps/react-components' or its corresponding type declarations.
3 | import { Provider } from 'react-redux';
4 | import RyuuJS from 'ryuu.js';

5 | import { TranslatedApp } from '@domoapps/react-components';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6 |
7 | import { store } from './reducers';
8 | import App from 'components/app';

It's at this point I can't get @domoapps/react-components to add to the project. I have to remove all the sample counter components and redux for it. And I have to remove all the styles and classnames as they were also not functional as no matter how I changes the files the index.module.scss will not map correctly.

Once they are removed then the app is at least functional. But these steps are a bit much for people who are not familiar with the Domo Custom Apps and React.

[jasonleehodges]

@PJJDenso It looks like it errored before completing the template install. Looks like some packages are trying to proxy error https://npm.labsdev.domotech.io/@esbuild%2fandroid-arm/-/android-arm-0.15.18.tgz: connect ETIMEDOUT that shouldn't be. I'm thinking that might have something to do with the lock file. We might need to upload a different lock file. I'll keep you posted as we learn more.

[jasonleehodges]

@PJJDenso do you have any npm proxy registries set up in the ~/.npmrc file on your machine? It's trying to proxy to npm.labsdev.domotech.io and you will not have access to that.

[PJJDenso]

This should have been a fresh install from my end. I do not believe I have setup any npm proxy registries to npm.labsdev.domotech.io.

[jasonleehodges]

This should have been a fresh install from my end. I do not believe I have setup any npm proxy registries to npm.labsdev.domotech.io.

Did you check to see if there was anything in the ~/.npmrc file?

[PJJDenso]

With npm config ls -l found proxy = null and registry = "https://registry.npmjs.org/"
I hope this helps.

[PJJDenso]

I have also checked:

C:\Users%username%\AppData\Roaming\npm\etc\npmrc
C:\Users%username%.npmrc
C:\Program Files\nodejs\node_modules\npm\npmrc

I could not find the file in question. My apologies if I am misunderstanding.