Issue 1:
Hi all, I am new to react and I am trying to create a react library of components and I came across this problem because one of the components I am creating uses REACT HOOKS.

Disclaimer: this is my first time creating an issue, so please bear with me.

So I am trying to create an accordion component which toggles between these classes accordion__item--open and accordion__item to open and close.

package.json

{
"name": "react-lib",
"version": "0.3.0",
"description": "A simple UI library of react components",
"main": "dist/index.js",
"publishConfig": {
"registry": ""
},
"scripts": {
"login": "",
"build": "webpack --mode=production",
"develop": "webpack --mode=development --watch"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [],
"author": "",
"license": "ISC",
"homepage": "",
"dependencies": {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"eslint": "^5.15.1",
"eslint-loader": "^2.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-node-externals": "^1.7.2"
},
"devDependencies": {
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.6.0"
}
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {

mode: 'development',
optimization: {
minimize: true,
},
entry: './index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index.js',
library: '',
libraryTarget: 'commonjs'
},
target: 'node',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/react']
}
}
]
}
};

This is the accordion container:

import React from 'react';

function Accordion({ children }) {

return (
<div className="accordion">
{ children }
</div>
);

}

export default Accordion;

This is the accordion item that will live inside the container:

import React, { useState } from 'react';

function AccordionItem({header, content}) {

const [ isActive, toggleActive ] = useState(false);

return (
<div className={ `accordion__item ${ isActive ? 'accordion__item--open' : '' }` }>

<button
className="accordion__item-header"
onClick={ () => isActive ? toggleActive(false) : toggleActive(true) }
>
{ header }
<svg className="icon icon--debit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path className="icon__path" d="M22.37,22.33V2.67a2.63,2.63,0,0,1,5.26,0V47.24a2.63,2.63,0,0,1-5.26.09V27.58H2.71a2.63,2.63,0,0,1,0-5.25Zm11.92,5.25a2.63,2.63,0,0,1,0-5.25h13a2.63,2.63,0,0,1,0,5.25Z">
</path>
</svg>
</button>

<div className="accordion__item-content">
{ children }
</div>

</div>
)

};

export default AccordionItem;

Now inside of a create-react-app I import these components

My library and the create-react-app are relative to each other and I am using npm link

import React from 'react';

import {AccordionItem} from 'react-lib'
import {Accordion} from 'react-lib';

function App ({props}) {

return (

<Accordion>
<AccordionItem header={"Hello"} content={"World"}/>
</Accordion>
)

}

export default App;

I have followed all of these instructions and I still get the same error.

Current behavior?

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Steps to reproduce

clone https://github.com/sethandleah/react-lib

clone https://github.com/sethandleah/myapp

cd react-lib

npm install

npm link

cd ../myapp

npm i

npm link react-lib

npm start

Expected behavior

It should show a button with a "plus" svg sign and the words "Hello" and "World" respectively

Open devtools and go to elements

When clicking on the button the class accordion_item--open should toggle

To see the above, do the following:

Uncomment these lines at myapp/src/App.js

import Accordion from './Accordion';
import AccordionItem from './AccordionItem';

The comment out these line, alse at myapp/src/App.js:

import { Accordion } from 'react-lib';
import { AccordionItem } from 'react-lib';

Versions of React, Browser / OS are affected by this issue:

React and React-Dom: both are ^16.8.6 on both react-lib and the myapp

Browser: Brave Version 0.61.52 Chromium: 73.0.3683.86 (Official Build) (64-bit)

OS: MacOS High Siera Version 10.13.6 (17G5019)

Issue 2:
on the MDN site https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

Mozilla is saying Event.code is the new way to distinguish which button a user is pressing, having to pull this off of the native event is a pain, and since this is the new standard, it'd be nice to have it on React's synthetic events.