Composition Function Not Working in Production

[rationalthinker1]

This code is working in development but not in production. Basically, what this composition function does is set the initial values onto data.

export default function useSetInitialValues(props: Data, key: string = 'initValues') {
    const data = reactive({});
    if (key in props) {
        const initValues = props[key];
        Object.keys(initValues).map(key => {
            if (!!initValues[key]) {
                data[key] = initValues[key];
            }
        });
    }
    return data;
}

This is the component that I am using on

export default {
  name: 'job-edit',
  setup(props, context) {
    const data = useSetInitialValues(props, 'job');
    return {
      ...data
    };
  },
  ...

Everything else is working. Other components are working. There is no error, and console.log of data in the function returns the data that I want for the component.

[antfu]

Please read the docs
https://github.com/vuejs/composition-api#ref-unwrap

There are some caveats in Vue's reactivity system where you need to use set() to assign new properties to reactivity objects.

Also, please use Stackoverflow or Discord to ask questions.

Thanks.

[rationalthinker1]

I figured out what the issue was.

basically, my component already had a variable id, which was set to null. It development mode, it overwrites it and while in production mode, it doesn't overwrites it.

@antfu I think that it is a bug with this library.

Example:

export default {
  name: 'job-edit',
  setup() {
    const data = reactive({
      id: 42,
    });
    return data;
  },
  data() {
    return {
    id: null,
  }
}

it development, the value of id would be 42, while in production, it's null.

[antfu]

Thanks, will investigate.

[rationalthinker1]

Any update on this? There are some other functions that I cannot use because of this. It works in development, but not in production.

 setup(props, context) {
            useGoogleMaps('#address', context.emit);

            return {};
        },

works in development, but not in production.

[rationalthinker1]

it('should work merge with data', async () => {
    const opts = {
      template: `<div>{{id}}</div>`,
      setup() {
        const data = reactive({
          id: 42,
        });
        return data;
      },
      data() {
        return {
          id: null,
        }
      },
    }
    const Constructor = Vue.extend(opts).extend({})

    const vm = new Vue(Constructor).$mount()
    expect(vm.$el.textContent).toBe("42")
  })

[pikax]

There are some other functions that I cannot use because of this. It works in development, but not in production.

 setup(props, context) {
            useGoogleMaps('#address', context.emit);

            return {};
        },

works in development, but not in production.

@rationalthinker1 That doesn't look the same error as the order of assignments being different on dev and prod when mixed with options api.

---

I tried to reproduce it in jsfiddle, but getting null on prod and dev
vue-composition-api-test.zip

The merge behaviour seems to be consistent across dev/prod and web/node builds.

Please provide a reproduction.

[ygj6]

I found that the demo was modified like codesandbox so that the problem could be reproduced.

[xinpingwang]

I tried to reproduce it in jsfiddle, but getting null on prod and dev
vue-composition-api-test.zip

The merge behaviour seems to be consistent across dev/prod and web/node builds.

Please provide a reproduction.

@pikax seems the problem is about HMR: when you first open the page, the value is null, but when you type some text in the html, the value changed to 42.

- <div>{{ id }} - {{ JSON.stringify(id) }}</div>
+ <div>{{ id }} - {{ JSON.stringify(id) }} 11</div>

then add more data to data function or setup return block, the value changed to null.

 setup() {
   const data = reactive({
     id: 42,
+     a: 2
   });
   return data;
 },
 data() {
   return {
     id: null,
+     b: 3
   };
 }

[xinpingwang]

@antfu #694 not fix this, see my comment to reproduce