Contribution Errors

[greghesp]

Hey,

I'm trying to make some contributions, but having some issues getting these to import correctly. My HA dashboard is working fine with the published npm version, but I get the below errors when using the built version. I think the issue is the props aren't being passed through, but can't see a reason why.

Invalid hook call. Hooks can only be called inside of the body of a function component

I've forked the repo, ran the build command, and then I've tried using yarn link and pointing my import line to the dist/index.js file, but both result in the same issue

Any ideas?

[william57m]

Hey,

Yeah it's always tricky to work with linked library using React because you have multiple instance (in the library and in your app). I found a way however, in the webpack config of your dashboard app you can use some alias to force using react from your node_modules.

You need to do that for react and emotion:

  resolve: {
    alias: {
      react: path.resolve('./node_modules/react'),
      '@emotion/react': path.resolve('./node_modules/@emotion/react')
    }
  }

Then you can npm/yarn link it in your app and it should work. Note that as the package.json is pointing on the dist/index.js you still need to build this package to get the update in your dashboard.

I will definitely add some details in the contribution section, or feel free to submit a PR.

[greghesp]

Ahh, ok perfect, that seems to work now when it's built thanks.

I was trying to get my dashboard to include it as a module, and then have it build using the dashboards build process. Only problem is it seems the babel plugins don't like the process and it throws errors like so

ERROR in ../homekit-react-components/src/components/ThermostatCard.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\Greg\Documents\Projects\home-assistant\homekit-react-components\src\components\ThermostatCard.js: Support for the experimental syntax 'jsx' isn't currently enabled (24:5):

[greghesp]

Oh, fixed it so it uses the development of the dashboard

If you remove .babelrc and add a babel.config.js with the following:

module.exports = {
    plugins: ['@emotion'],
    presets: ['@babel/preset-env', '@babel/preset-react'],
}

then in your package.json add a module line:

  "module": "src/index.js",

Then in your dashboard, do the same with the babel configuration, link them again and you can make changes in your homekit-react-components project and have it hot-reloaded by your dashboard project

[william57m]

Awesome thanks, yeah it's a way more convenient with the hot reload.