Common Issues

Yarn Link Issue

Classnames generated by styled-components in the snapshots of my project are broken

This is caused by two styled-components being loaded during the test of your project.

Please follow the steps below.

1. Remove styled-components in devDependencies of the ui-components package.json
2. run yarn build:watch
3. Proceed normal yarn link procedure
4. Revert changes in package.json and yarn.lock before commit

This will force the root library to use its own styled-components dependency.

Webpack has issue to import peerDependencies when they are:

1. dependencies of the root project
2. both peerDependencies and devDependencies at the same time in the child project

This will cause webpack to import the devDependencies in the child project but not the root project which causes the same package imported twice (one in root, another one in child)

UI-Components does not seem to be updated correctly

This usually causes the following errors

An unexpected error occurred: "https://registry.yarnpkg.com/@types%2fintellihr__ui-components: Not found"

It is caused by the cache of the loaders. Simply run

rm -rf ./node_modules/.cache/

Then rebuild your project

Styleguide Issues

Styleguide uses wrong name for components

Styleguidist uses source code inspection to figure out component names and proptypes. This can cause names to be incorrect depending upon how your source code is formatted. e.g.

const Component = styled(Thing)

export {
  Component
}

will give StyledComponentClass as the name for the component, rather than Component. You can usually fix this by exporting the component where it is defined:

export const Component = styled(Thing)

Typescript Issues

Files with only type/interface do not generate .d.ts files

Github issue: https://github.com/s-panferov/awesome-typescript-loader/issues/432

Files containing only an interface will not be built by awesome-typescript-loader. If you have a file with only a type/interface you will need to add and export a dummy variable to trick the loader into generating the file.

interface a {}
const b = {}

export { a, b }