<Meta title="Documentation/Getting Started/Troubleshooting"/>

# Troubleshooting
Looking to get involved in the mono repo but running into issues? Read on to find out how to fix them!

## Getting started

### First time setup
Every time you get the latest changes in the mono repository, you need to follow a few short steps to get up and running

1. Install yarn packages at the root: `yarn`
2. Run the build command at the root: `yarn build`
3. You can now run storybook using the command `yarn storybook:serve`

Alternatively, you can run the following commands to just view the component you're working on, as well as any of it's dependencies / dependants.

1. Install yarn packages at the root: `yarn`
2. Run the build command at the root: `yarn build:changed`
3. You can now run storybook using the command `yarn storybook:serve-changed`


Note: It's recommended that you do not `cd` into the individual f-* directory to run build commands, as this will prevent `@justeat/f-*` dependencies from being built.

### Cannot find module `@justeat/f-<any-package-name>`
This issue indicates that you have not run yarn build with the latest code, refer to `First time setup` for a solution.

### Storybook error reading: `ENOENT: no such file or directory, open ...`
This issue indicates that you have not run yarn build with the latest code, refer to `First time setup` for a solution.


## Development Process

### I am unable to run the 'demo' script within a component
- We recently changed the way interaction based tests are executed; they no longer depend on a demo script, but are now run within storybook
- As a result of those changes, the demo script you may have previously used has been removed
- If you find you have a use case where you need to demo a component outside of storybook; contact the team for assistance.

### How can I test an unpublished version of my component in another project?
Sometimes we might want to test changes to a component before we submit a PR. You can use yalc to do this.

- Read more [about yalc and how to install it](https://github.com/whitecolor/yalc)
- Yalc works by creating a locally published directory on your machine, and allows other code bases to use it in place of a real dependency
- Once installed you can run `yalc publish` in any component
- Once published locally you can run `yalc add @justeat/f-myComponentName` in any NPM based project to add the local dependency
- If you update the component locally and need the dependency to be updated, run `yalc publish --push` inside the component. You may also need to restart your consuming application if the new changes aren't picked up by hot-module reloading (HMR).

### How can I create a new component?
We have streamlined the process for creating new components, but we would recommend talking to the Web Core team before you do it yourself.

1. If you haven't already, run the `First time setup` steps at the top of this page
2. Navigate your terminal to the packages folder: `cd /packages`
3. Run the generator command: `yo @justeat/f-component`
4. Follow the generator wizard which will create a new component for you.


## Writing tests

### When running tests I see the error `SyntaxError: Unexpected token 'export'`
We use WebDriver for interaction based testing, which includes integration and system tests

- WebDriver does not support the import export syntax available in the most recent ES versions
- When writing code that is directly imported by WebDriver, make sure to use `require` and `module.exports` based syntax in your code


## Submitting Code changes

### Fozzie Bot is displaying a failed check on my PR
We use DangerJS to enforce some standards within the Pull Request process

1. Make sure that your PR includes version bumps (In the `package.json`) and change log entries (in the `CHANGELOG.md`) for the affected components
2. Make sure that your PR title includes the component and version, for example: `f-component@v0.1.0 - I did this thing`
