Problems running React-Hooks demo

[drcdr]

I'm somewhat new Ionic React (and TS/JS for that matter), but I have been able to get some of the earlier Ionic React demos running. I tried the latest React Hooks blog post, but I'm having some issues.

Following the Blog Post
If I follow along the blog post, using the source code that is in CameraPage.tsx in this repository, then I have to make a couple of changes to the imports (i.e. use /src in the path):

import { usePlatform } from '@ionic/react-hooks/src/platform';
import { useCamera, availableFeatures } from '@ionic/react-hooks/src/camera';

Then, I try ionic serve, and I get the following:

[react-scripts] Failed to compile.
[react-scripts]
[react-scripts] ./node_modules/@ionic/react-hooks/src/platform/usePlatform.ts 4:0
[react-scripts] Module parse failed: The keyword 'interface' is reserved (4:0)
[react-scripts] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders [react-scripts] | import { AvailableResult } from '../util/models';
[react-scripts] |
[react-scripts] > interface PlatformResult extends AvailableResult { platform: string };
[react-scripts] |
[react-scripts] | export function usePlatform(): PlatformResult {

I googled this, but I didn't get many ideas on what the problem might be. I've tried deleting package-lock.json, npm install, npm update, etc. (Is it because of pacakge.json and the path with /src?)

Using this Repository
I tried downloading this repository altogether, then running npm install, then ionic serve (do I need to do more?) I get the following (not sure how to proceed)

[react-scripts] Failed to compile.
[react-scripts]
[react-scripts] ./node_modules/react-dev-utils/webpackHotDevClient.js
[react-scripts] Error: [BABEL] C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\react-dev-utils\webpackHotDevClient.js: Cannot find module './src/data'
[react-scripts] Require stack:
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\core-js-compat\helpers.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\core-js-compat\get-modules-list-for-target-version.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\babel-preset-react-app\node_modules\@babel\preset-env\lib\polyfills\corejs3\entry-plugin.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\babel-preset-react-app\node_modules\@babel\preset-env\lib\index.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\babel-preset-react-app\dependencies.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\@babel\core\lib\config\files\plugins.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\@babel\core\lib\config\files\index.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\@babel\core\lib\index.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\babel-loader\lib\index.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\loader-runner\lib\loadLoader.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\loader-runner\lib\LoaderRunner.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\webpack\lib\NormalModule.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\webpack\lib\NormalModuleFactory.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\webpack\lib\Compiler.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\webpack\lib\webpack.js
[react-scripts] - C:\Cpp\Js\Github\react-hooks-demo-app\node_modules\react-scripts\scripts\start.js (While processing: "C:\\Cpp\\Js\\Github\\react-hooks-demo-app\\node_modules\\babel-preset-react-app\\dependencies.js$0$9")

[Sha-code]

same problem, did you get a way to handle it ?

[elylucas]

Hi @drcdr, @Sha-code,

Thanks for reporting your issues. Would either of you be able to share your repos and I can take a look?

Thanks

[elylucas]

Nevermind, I found an issue with the build in 0.0.3. Could you update to 0.0.4 and see if that fixes the problem? Thanks!

npm i @ionic/react-hooks@latest

[drcdr]

Thanks @elylucas, it's working for me now!

[Sha-code]

@elylucas Still same

[elylucas]

@Sha-code, would you be able to upload your repo and I can take a look?

[mynormh]

Got it working with above solution. If it's still not working after that, try deleting your node_modules folder and then run npm install.

It doesn't work on Microsoft Edge tho.

[elylucas]

@mynormh in general it doesn't work in Edge or certain plugins?

[mynormh]

@elylucas in general, I get a blank page and get the error: Unable to get property 'get' of undefined or null reference which points to this line:

if (!exclude.includes(tagName) && !customElements.get(tagName)){

So I guess stencil isn't polyfilling customElements on Edge?