File is not defined Nuxt 2, Rails 6 API activestorage

Question

I have used the activestorage library with Vue 2 before successfully. However can't make it work with Nuxt.

I tried different versions and with both @rails/activestorage and activestorage dependencies. Always throws the error:

It's a headless nuxt app and I want to use activestorage DirectUpload for a file upload component.

Answer 1

The issue was the activestorage package that needs transpiling on build in nuxt. It is possible in Nuxt 2 to specify packages to be transpiled by Babel on build, this can be added to nuxt.config.js in build.transpile object like so:

  build: {
    ...,
    transpile: [
      '@rails/activestorage',
      ...
    ]
  }