Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

components option should support readonly object #4062

Closed
xiaoping0x opened this issue Oct 30, 2016 · 3 comments
Closed

components option should support readonly object #4062

xiaoping0x opened this issue Oct 30, 2016 · 3 comments

Comments

@xiaoping0x
Copy link

Vue.js version

2.0.0

Reproduction Link

Steps to reproduce

// components/index.js export Foo, Bar etc.
import * as components from './components';

export default {
  name: 'app',
  components
};

What is Expected?

Show ok without errors.

What is actually happening?

Browser throw error components has only getter.

Reasons

function normalizeComponents (options) {
  if (options.components) {
    var components = options.components;
    var def;
    for (var key in components) {
      var lower = key.toLowerCase();
      if (isBuiltInTag(lower) || config.isReservedTag(lower)) {
        "development" !== 'production' && warn(
          'Do not use built-in or reserved HTML elements as component ' +
          'id: ' + key
        );
        continue
      }
      def = components[key];
      if (isPlainObject(def)) {
        // should create or clone new components object inside Vue
        // instead of old one
        components[key] = Vue$3.extend(def);
      }
    }
  }
}
@xiaoping0x xiaoping0x changed the title components option show support readonly object components option should support readonly object Oct 30, 2016
@defcc
Copy link
Member

defcc commented Oct 30, 2016

@xiaoping0x could you please provide a JSFiddle/JSBin/Codepen to demonstrate your issue ?

@ktsn
Copy link
Member

ktsn commented Oct 30, 2016

It seems because webpack 2 treats an imported object as read only.

@HerringtonDarkholme
Copy link
Member

HerringtonDarkholme commented Oct 31, 2016

@ktsn I think this is a ES-spec conforming behavior. http://exploringjs.com/es6/ch_modules.html#sec_imports-as-views-on-exports also here http://www.ecma-international.org/ecma-262/6.0/index.html#sec-module-namespace-exotic-objects

ES2016 has new spec that these properties are writable... http://www.ecma-international.org/ecma-262/7.0/#sec-module-namespace-exotic-objects

The easiest workaround is a default export

export default {component1: ..., component2: ...}

import Components from 'components'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants