Skip to content

Support ES6 import from <script type="module"> tag inside browser #1247

New issue

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

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

Already on GitHub? # to your account

Closed
gorbypark opened this issue Apr 22, 2018 · 3 comments · Fixed by #1533
Closed

Support ES6 import from <script type="module"> tag inside browser #1247

gorbypark opened this issue Apr 22, 2018 · 3 comments · Fixed by #1533

Comments

@gorbypark
Copy link

gorbypark commented Apr 22, 2018

What problem does this feature solve?

Using vuex in the browser is possible, by using a standard html <script src='"vuex.js"> tag, but if you want to use something like mapGetters, it require something like import { mapGetters } from 'vuex'. This is in theory possible in the browser by using a tag like

<script type="module>
  import { mapGetters } from './vuex.js'
  ...
</script>

but appears to not work with vuex. Vue itself, using the vue.esm.browser.js bundle from unpkg works this way, but if vuex.esm.js is used it produces an error.

ReferenceError: process is not defined
    at Vue.mappedGetter (vuex.esm.js:848)
    at Watcher.get (vue.js:3140)
    at Watcher.evaluate (vue.js:3247)
    at Proxy.computedGetter (vue.js:3503)
    at Proxy.eval (eval at createFunction (vue.js:10667), <anonymous>:3:144)
    at Vue._render (vue.js:4535)
    at Vue.updateComponent (vue.js:2788)
    at Watcher.get (vue.js:3140)
    at new Watcher (vue.js:3129)
    at mountComponent (vue.js:2795)

What does the proposed API look like?

import { ... } from 'vuex.esm.js' should work inside the browser.

@ktsn
Copy link
Member

ktsn commented Apr 23, 2018

FYI, you can use mapXXX helpers via Vuex.mapState etc on umd bundle.

@ktsn ktsn added the proposal label Apr 23, 2018
@ghost
Copy link

ghost commented May 2, 2018

I think there's a problem with build process: vuex.esm.js should not refer to "process.env.NODE_ENV", this is why you got "ReferenceError: process is not defined"
Remove any reference to "process.env.NODE_ENV" from vuex.esm.js and you could use:

import Vuex from './vuex.esm.js'

Ugly workaround, add "process" to file header:

var process = {
        env: {
                NODE_ENV: 'production'
        }
}

@TimvdLippe
Copy link

I have a PR up for a couple of months now in #1401 which seems to be popular in the community. Could any maintainer maybe take a look?

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants