> For the complete documentation index, see [llms.txt](https://hatchbox.gitbook.io/hatchbox/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hatchbox.gitbook.io/hatchbox/apps/assets-and-webpacker.md).

# Webpacker

## Does Hatchbox support Webpacker & Yarn?

Of course! We install Yarn by default on all application servers so you can use Webpacker out of the box.

Webpacker adds itself to the `assets:precompile` step in Rails so your Webpacker assets will be automatically compiled after the asset pipeline finishes.

#### A common mistake people make is using Webpacker assets inside the asset pipeline. 

These are two separate pipelines and they do not mix in production. You can mistakenly get this to work in development, but this *will not work* in production. Any assets used in the asset pipeline must be accessible inside the asset pipeline folders.

### I'm getting an error compiling assets

If you see the following errors, you probably just need to a quick fix to your webpacker install:

`Command "webpack" not found` 

`"/node_modules/.bin/webpack (Errno::ENOENT)"`

Your app might be missing the yarn binstub. This is required to install node modules before compiling assets. Add the following file to your repo as `bin/yarn`

{% code title="bin/yarn" %}

```
#!/usr/bin/env ruby
APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
  begin
    exec "yarnpkg", *ARGV
  rescue Errno::ENOENT
    $stderr.puts "Yarn executable was not detected in the system."
    $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
    exit 1
  end
end
```

{% endcode %}

`bin/yarn` also needs to be marked as executable in git so that it can be run during the precompile stage.

```
git add --chmod=+x bin/yarn
git commit -m "Add bin/yarn"
git push
```

Then your next deploy should correctly run Yarn to install the packages at the beginning of the assets precompile.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://hatchbox.gitbook.io/hatchbox/apps/assets-and-webpacker.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.