Skip to content

@vue/devtools-api depends on Node's module resolution ability #1840

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.

Sign up for GitHub

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

Jump to bottom
Closed
ghost opened this issue Apr 20, 2022 · 1 comment
Closed

@vue/devtools-api depends on Node's module resolution ability #1840

ghost opened this issue Apr 20, 2022 · 1 comment

Comments

@ghost
Copy link

ghost commented Apr 20, 2022 •
edited by ghost
Loading

6.1.4

Browser and OS info

any

Steps to reproduce

Trying to use Vue with Vue Router as a module, as indicated in Vue 3 Quick Start

image

So I installed them with npm i vue and npm i vue-router and imported them directly to html page via importmap. Import of /node_modules/@vue/devtools-api/lib/esm/index.js itself will work, but imports and exports in index.js will fail, as they depends on Node module resolution algorithm, ability to complete filenames by adding missing extensions.

<!DOCTYPE html>

<html lang="en">
  <meta charset="UTF-8">
  <title>No build tools SPA</title>

  <script type="importmap">
    {
      "imports": {
        "vue": "/node_modules/vue/dist/vue.esm-browser.js",
        "@vue/devtools-api": "/node_modules/@vue/devtools-api/lib/esm/index.js",
        "vue-router": "/node_modules/vue-router/dist/vue-router.esm-browser.js"
      }
    }
  </script>

  <vue-app></vue-app>

  <script type="module">
    import { createApp } from 'vue'
    import { createRouter, createWebHashHistory } from 'vue-router'

    createApp({
      template: '<router-view></router-view>'
    }).use(createRouter({
      history: createWebHashHistory(),
      routes: [{ path: '/', component: { template: '<h1>It works!</h1>' }}]
    })).mount('vue-app')
  </script>
</html>

What is expected?

The Vue and Vue Router will work in browser directly, as modules, without build tools use, as suggested in Vue 3 Quick Start - usage with script type importmap.

What is actually happening?

All modules imports and exports mentioned in js/ts files in @vue/devtools-api/lib/esm/ will fail in browser, as all these imports and exports relies on Node's module resolution algorithm.

image

Just remove this dependency adding correct filename extensions. For example, @vue/devtools-api/lib/esm/index.js starts with these rows:

import { getTarget, getDevtoolsGlobalHook, isProxyAvailable } from './env';
import { HOOK_SETUP } from './const';
import { ApiProxy } from './proxy';
export * from './api';
export * from './plugin';
export * from './time';

Just add correct extensions or /index.js as below:

import { getTarget, getDevtoolsGlobalHook, isProxyAvailable } from './env.js';
import { HOOK_SETUP } from './const.js';
import { ApiProxy } from './proxy.js';
export * from './api/index.js';
export * from './plugin.js';
export * from './time.js';

And repeat for all files in esm folder. And Devtools and Vue Router will start work as expected.
@ghost ghost changed the title Devtools-api depends on Node's module resolution ability as explained below. @vue/evtools-api depends on Node's module resolution ability Apr 20, 2022
@ghost ghost changed the title @vue/evtools-api depends on Node's module resolution ability @vue/devtools-api depends on Node's module resolution ability Apr 23, 2022
@shuguang101
Copy link

shuguang101 commented May 8, 2022 •
edited
Loading

vue-router-4.0.7 or later will depends on @vue/devtools-api, try vue-router-4.0.6 before this issue fixed.

@Akryum Akryum closed this as completed in c5ce1ce May 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@shuguang101