Multiple 'You are running Vue in development mode.' & $attrs is readonly. / $listeners is readonly

Question

Odd one here relating to Vue 2, I've had this issue once or twice before and solved it by finding the culprit that was importing the other instance/version of Vue to remove the $attrs/$listeners warnings.

I've since created multiple Docker containers and moved areas of my application into them (frontend/mysql/php) etc, all using nginx. Since then, the 'You are running Vue in development mode.' message is appearing 3 times. Also, the $attrs/$listeners warnings seem to appear on a few different third-party packages, and don't appear on the original setup which leads me to believe this could be an issue with the container (this is isolated to the 'draggable' component, it mentions quite a few on different pages/Vue apps):

Solutions I've tried:

1. Setting an alias for Vue such as:

mix.alias({
    '@': path.join(__dirname, 'resources/js'),
    '~': path.resolve(__dirname, 'resources/sass/'),
    vue$: path.resolve('./node_modules/vue/dist/vue.runtime.esm.js')
})

2. Tried moving the problem third-party packages into their own plugins

3. Tried ssh-ing into the frontend container to see if, at any point, node_modules had been included multiple times causing the issues

4. Tried ensuring node and npm versions are identical to the old environment before I dockerized everything.

5. Tried older package.json from previous environment, purged package-lock.json, npm cache and removed node_modules to run npm install again

The only place I'm importing Vue is in the bootstrap.js file like import Vue from 'vue';. Nowhere else in my codebase am I importing Vue like that, nor am I including it from a CDN.

The docker-compose.yml file for the frontend container:

  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: ./Dockerfile.dev
      target: frontend
    command:
      - /bin/bash
      - -c
      - |
        npm install
        npm run watch
    volumes:
      - '.:/opt/apps/projectx'
      - '/opt/app/node_modules/'
    networks:
  - testnetwork

Any potential pointers would be greatly appreciated.

Answer 1

Since we don't have any access to a simple example to reproduce your problem, it'll be quite guessing game but one point which is important is you mentioned this :

Tried older package.json from previous environment, purged package-lock.json, npm cache and removed node_modules to run npm install again

In my own application, I never run npm install but npm ci to have exactly the same build and env defined in the package-lock.json which are the version of packages and dependencies that were first installed in the npm install phase.

npm ci performs a clean install of all existing dependencies, whereas npm install attempts to update current dependencies when possible

You should try to npm ci in order to get dependencies as they are working in the previous env with the working package-lock.json from your non-dockerized env.

npm ci documentation for further info