Composition-api: Issue: Cannot find module '@vue/composition-api'

[CrazyUmka]

🐛 The bug
If you launch a built application with only production dependencies without dev you will get that error above or I don't understand what it's mean configuration option buildModules.

🛠️ To reproduce
Steps to reproduce the behavior:

1. Create simple application via yarn create nuxt-app
2. Add devDependencies via yarn add -D @nuxtjs/composition-api and add this dependency to buildModules in nuxt.config.js file
3. Run yarn build
4. Clean node_modules directory and after that run NODE_ENV=production yarn
5. Run yarn start and open browser
6. See error

🌈 Expected behaviour
Start the application without errors.

ℹ️ Additional context

Dockerfile for reproduce problem

FROM node:latest as builder

WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn

COPY . ./

RUN yarn build

FROM node:alpine

WORKDIR /app
COPY package.json yarn.lock ./

ENV NODE_ENV=production
RUN yarn

COPY nuxt.config.js ./
COPY --from=builder /app/.nuxt ./.nuxt/
COPY --from=builder /app/static ./static/

EXPOSE 3000

ENV NUXT_HOST=0.0.0.0

ENTRYPOINT [ "yarn", "run" ]
CMD [ "start" ]

[danielroe]

@CrazyUmka You will either need to add @vue/composition-api to your transpile array in nuxt.config or ensure it is installed as a production dependency.

{
  transpile: [/@vue[\\/]composition-api/],
}

[CrazyUmka]

@danielroe Thanks for your attention! I added option transpile in the build section but it doesn't work. My nuxt.config.js:

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    titleTemplate: '%s - web',
    title: 'web',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/stylelint
    '@nuxtjs/stylelint-module',
    // https://composition-api.nuxtjs.org
    '@nuxtjs/composition-api',
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [],

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    transpile: [/@nuxtjs[\\/]composition-api/],
  },
}

[danielroe]

@CrazyUmka It should be the Vue composition API in the transpile array.

[danielroe]

@CrazyUmka No, you added it in the right place, but you added the wrong thing - see my original comment which was to add the vue composition API to the array:

[CrazyUmka]

@CrazyUmka It should be the Vue composition API in the transpile array.

Thanks, I'll try it today. I saw my mistake 😅

[CrazyUmka]

Thanks! It works! Now I understand better 🙏

[LouisMazel]

@CrazyUmka You will either need to add @vue/composition-api to your transpile array in nuxt.config or ensure it is installed as a production dependency.

{
  transpile: [/@vue[\\/]composition-api/],
}

The transpile solution doesn't works for me (Cannot find module '@vue/composition-api')

And when I manually install @vue/[email protected] (https://github.com/nuxt-community/composition-api/issues/241#issuecomment-693927221 and version founded in requires of @nuxtjs/composition-api) I have this error:

[vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once

What is the good version of @vue/composition-api to install ?

For you information:
I use @nuxtjs/[email protected]
With Typescript (nuxt-ts) and Docker image node:14.14.0-alpine3.12

Thanks !

[danielroe]

@LouisMazel Are you manually calling Vue.use(VueCompositionAPI)? Could you provide a reproduction?

[LouisMazel]

@danielroe Absolutely not for the Vue.use(VueCompositionAPI)

You can check this codesandbox: https://codesandbox.io/s/nuxt-ts-forked-0cbxy

If you remove the transpile object, the project run fine. But in my case, I always get Cannot find module '@vue/composition-api', I don't understand why..

[danielroe]

@LouisMazel I'll reopen this issue. For now, you can just make sure @vue/composition-api (1.0.0-beta.19) is installed in your production dependencies in your package.json.

[LouisMazel]

@danielroe Thank you, but when I install 1.0.0-beta.19 I get
[vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once

I keep looking for the problem, I keep you informed

[LouisMazel]

@danielroe

It's solved!

I restarted a new project from scratch (I know...) with create-nuxt-app, I setup Typescript and composition-api config, I copied all my files and.. it's works fine.

No need to install @vue/composition-api and no need to set the transpile config

I don't know exactly why, maybe [email protected] instead of [email protected] or another version of a package...

[danielroe]

@LouisMazel Mysterious ✨ but I'm glad it's sorted!

[LouisMazel]

More info: This (my) bug is from docker with the node:14.14.0-alpine3.12 image. Now I use node:10, it's work fine !
So, do not use an alpine version of node

[CrazyUmka]

@danielroe Thank you, but when I install 1.0.0-beta.19 I get
[vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once

I keep looking for the problem, I keep you informed

@danielroe Hi! I explored the bug which describes above. It's happening when you launch nuxt dev if you include /@vue[\\/]composition-api/ in transpile array.