internal-apps-react-components v1.0.0
Internal Apps React Components
Collection of shared React components for internal apps
noc-app-menu
Applications menu for internal apps
noc-installed-devices-label
Installed devices label with tooltip
Development
Creating a new component
Duplicate the boilerplate
folder.
Update the package.json
and README.md
with your new component details.
Install NPM development dependencies for this new component:
cd your-component-folder
npm i
Start Webpack to build the component and watch files changes:
npm run watch
Build the component:
npm run build
The build will be created inside the dist
folder in your component root directory.
Publish to NPM (make sure the package.json
has been updated with your component name before publishing):
npm publish
Assets
The boilerplate supports:
- Javascript
- Typescript
- CSS files
- PNG files
- SVG fonts
If your component uses unsupported file types, please update the webpack.config.js
to add an appropriate loader and/or the src/custom.d.ts
to allow support of different file types.
Dependencies
By default, the boilerplate relies on React & Ant.
Those dependencies MUST NOT be included in the dependencies section of the package.json
.
Instead, they have to be listed under peerDependencies
.
By doing this, NPM will uses the dependency package (eg. React) from the host project instead of duplicating it in your component node_modules
folder.
Troubleshooting
Error: Invalid hook call. Hooks can only be called inside of the body of a function component
Make sure you did not include React in the dependencies of your component. Also, when testing a component, you should link the React module from your host project inside the component folder:
npm link ~/your-other-project/node_modules/react
https://reactjs.org/warnings/invalid-hook-call-warning.html
Error: Failed to minify the code from this file
If this error occurs when using the new component in an host project, it is possible that the component uses newer Javascript features not supported by the current version of the host project: https://create-react-app.dev/docs/troubleshooting/#npm-run-build-fails-to-minify
ERROR in PACKAGE_FILE Module parse failed: Unexpected token (LINE) You may need an appropriate loader to handle this file type
Make sure that the compiler target option from the component is also supported by the compiler lib option of the host project (tsconfig.json
/jsconfig.json
).
4 years ago