Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Start React theme does not install


I've followed all the instructions for start theme but it simply does not run. I encourage the devs to try it themselves. There seems to be a TypeScript compilation issue in the KTSVG.tsx. Either way this theme does NOT install or run. I have tried this locally, on Github Code Spaces, and on Digital ocean.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)


Hi,

Thank you for reaching out to us.

Unfortunately, we were not able to reproduce this issue in the Start theme.
Is it a fresh installation or you have modified anything?

Could you please specify your node version?

Also if you have any error messages or if there are any steps on how we can reproduce this issue please let us know.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Is there nothing that can be done to help me with this?



Here is the error with NPM install

'Log files:
/home/codespace/.npm/_logs/2023-03-30T12_37_55_949Z-debug-0.log

# npm resolution error report

While resolving: react-scripts@4.0.1
Found: typescript@4.1.2
node_modules/typescript
typescript@"4.1.2" from the root project

Could not resolve dependency:
peerOptional typescript@"^3.2.1" from react-scripts@4.0.1
node_modules/react-scripts
react-scripts@"4.0.1" from the root project

Conflicting peer dependency: typescript@3.9.10
node_modules/typescript
peerOptional typescript@"^3.2.1" from react-scripts@4.0.1
node_modules/react-scripts
react-scripts@"4.0.1" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.



Yarn install looks like it installs by on yarn start I get an error.

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (/workspaces/wavvydash2/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/workspaces/wavvydash2/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/workspaces/wavvydash2/node_modules/webpack/lib/NormalModule.js:471:10)
at /workspaces/wavvydash2/node_modules/webpack/lib/NormalModule.js:503:5
at /workspaces/wavvydash2/node_modules/webpack/lib/NormalModule.js:358:12
at /workspaces/wavvydash2/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/workspaces/wavvydash2/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/workspaces/wavvydash2/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/workspaces/wavvydash2/node_modules/react-scripts/scripts/start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (/workspaces/wavvydash2/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/workspaces/wavvydash2/node_modules/webpack/lib/NormalModule.js:417:16)
at /workspaces/wavvydash2/node_modules/webpack/lib/NormalModule.js:452:10
at /workspaces/wavvydash2/node_modules/webpack/lib/NormalModule.js:323:13
at /workspaces/wavvydash2/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /workspaces/wavvydash2/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/workspaces/wavvydash2/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /workspaces/wavvydash2/node_modules/react-scripts/node_modules/babel-loader/lib/index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v19.7.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.



Is there a particular version of Node I'm supposed to be using? The instructions make it seem like it should just work but it doesn't . Even using github codespaces and digital ocean apps doesn't make it work.



Hi,

Sorry for the late reply.

There is no particular node version requirement. Our theme should work with most of the latest versions but we highly recommend using the latest stable node version.

Can you try to change your version to the LTS(18.15.0)?

Also, try to change start script command in your package.json.

"start": "react-scripts start",

to

"start": "react-scripts --openssl-legacy-provider start"


Regards,
Lauris Stepanovs,
Keenthemes Support Team



I was able to complete the install by changing to "start": "react-scripts --openssl-legacy-provider start" but now I can't click on anything. I am getting a ton of typescript errors. Here are just a few -

index.js:1 /workspaces/wavvydash2/src/app/pages/MenuTestPage.tsx
TypeScript error in /workspaces/wavvydash2/src/app/pages/MenuTestPage.tsx(1076,24):
'SVG' cannot be used as a JSX component.
Its instance type 'InlineSVG' is not a valid JSX element. TS2786

1074 | <span className="menu-icon">
1075 | <span className="svg-icon svg-icon-1">
> 1076 | <SVG
| ^
1077 | src={toAbsoluteUrl("/media/logos/logo-compact.svg")}
1078 | />
1079 | </span>{" "}
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /workspaces/wavvydash2/src/app/pages/MenuTestPage.tsx
TypeScript error in /workspaces/wavvydash2/src/app/pages/MenuTestPage.tsx(1091,24):
'SVG' cannot be used as a JSX component.
Its instance type 'InlineSVG' is not a valid JSX element. TS2786

1089 | <span className="menu-icon">
1090 | <span className="svg-icon svg-icon-1">
> 1091 | <SVG
| ^
1092 | src={toAbsoluteUrl("/media/logos/logo-compact.svg")}
1093 | />
1094 | </span>
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /workspaces/wavvydash2/src/index.tsx
TypeScript error in /workspaces/wavvydash2/src/index.tsx(38,6):
'PersistGate' cannot be used as a JSX component.
Its instance type 'PersistGate' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/workspaces/wavvydash2/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type '{}' is not assignable to type 'ReactPortal'. TS2786

36 | <Provider store={store}>
37 | {/* Asynchronously persist redux stores and show `SplashScreen` while it's loading. */}
> 38 | <PersistGate persistor={persistor} loading={<div>Loading...</div>}>
| ^
39 | <App basename={PUBLIC_URL} />
40 | </PersistGate>
41 | </Provider>,
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
VM230:2 Uncaught ReferenceError: process is not defined
at 4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at 8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at 8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at e.onload (index.js:1:1)



Here are a few more errors-

/workspaces/wavvydash2/src/_start/helpers/components/KTSVG.tsx
TypeScript error in /workspaces/wavvydash2/src/_start/helpers/components/KTSVG.tsx(13,8):
'SVG' cannot be used as a JSX component.
Its instance type 'InlineSVG' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/workspaces/wavvydash2/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props TS2786

11 | return (
12 | <span className={`svg-icon ${className}`}>
> 13 | <SVG src={toAbsoluteUrl(path)} className={svgClassName} />
| ^
14 | </span>
15 | );
16 | };
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /workspaces/wavvydash2/src/_start/layout/components/header/MenuItem.tsx
TypeScript error in /workspaces/wavvydash2/src/_start/layout/components/header/MenuItem.tsx(15,6):
This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided. TS2746

13 | const { pathname } = useLocation();
14 | return (
> 15 | <Link
| ^
16 | className={clsx("menu-link ps-0 py-2", {
17 | active: checkIsActive(pathname, to),
18 | })}
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /workspaces/wavvydash2/src/_start/partials/content/code-highlight/CodeBlock.tsx
TypeScript error in /workspaces/wavvydash2/src/_start/partials/content/code-highlight/CodeBlock.tsx(54,12):
'Highlight' cannot be used as a JSX component.
Its instance type 'Highlight' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/workspaces/wavvydash2/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type '{}' is not assignable to type 'ReactPortal'. TS2786

52 |
53 | <div className="highlight-code" ref={codeRef}>
> 54 | <Highlight
| ^
55 | {...defaultProps}
56 | theme={theme}
57 | code={code}
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /workspaces/wavvydash2/src/app/pages/MenuTestPage.tsx
TypeScript error in /workspaces/wavvydash2/src/app/pages/MenuTestPage.tsx(56,30):
'SVG' cannot be used as a JSX component.
Its instance type 'InlineSVG' is not a valid JSX element. TS2786

54 | <span className="menu-icon">
55 | <span className="svg-icon">
> 56 | <SVG
| ^
57 | src={toAbsoluteUrl(
58 | "/media/logos/logo-compact.svg"
59 | )}



Hi,

I am sorry to hear that you faced this problem.

Unfourtunelty, we were not able to reproduce this issue locally.

From your error message, it seems like the component name conflicts with the svg tag, you can change import SVG from "react-inlinesvg"; to import InlineSVG from "react-inlinesvg"; and replace this component usage in src/app/pages/MenuTestPage.tsx and src/_start/helpers/components/KTSVG.tsx.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(