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

In lower versions of Chrome, the dependencies inside the async components of vue2 reported errors in the production environment #6503

Closed
7 tasks done
dang0705 opened this issue Jan 14, 2022 · 2 comments

Comments

@dang0705
Copy link

dang0705 commented Jan 14, 2022

Describe the bug

The node_modules resources imported in vue 2 async components, such as "xxx/foo.css", may refer to a nonexistent "../foo-legacy/foo-[hash].js" file in the legacy package of this component after packaging

This may be a bug of vite or plugin-legacy

Chrome's version is 63.0.3223.0

<template>
  <input-text />
</template>
<script>
// Static import works fine in legacy mode
// import inputText from 'control/text.vue';

export default {
  components: {
    // If an async component is used, in the production env and legacy mode, the file in node_modules imported inside the component will point to a non-existing path
    // But if only one async component is declared and used here, it seems to work fine
    InputTextarea: () => import('control/textarea.vue'),
    InputNumber: () => import('control/number.vue'),
    InputSelect: () => import('control/select.vue'),
    InputSwitch: () => import('control/switch.vue'),
    InputCheckbox: () => import('control/checkbox.vue'),
    InputRadio: () => import('control/radio.vue'),
    InputRangepicker: () => import('control/rangepicker.vue'),
    InputChips: () => import('control/chips.vue'),
    InputText: () => import('control/text.vue')
    // inputText
  }
};
</script>

component input-text internal

<template>
  <!--  from dependency balm-ui's component -->
  <ui-textfield v-model="value" />
</template>

<script>
// When this component is called async,the following reference in legacy's packaging code will point to a non-existing module 'textfield'
import 'balm-ui/components/textfield/textfield.css';

export default {
  name: 'InputText',
  data() {
    return {
      value: ''
    };
  }
};
</script>

Reproduction

https://github.com/dang0705/demo-legacy-bug/blob/main/src/components/control/text.vue#L8

System Info

System:
    OS: Windows 7 6.1.7601
    CPU: (4) x64 Intel(R) Core(TM) i5-3470 CPU @ 3.20GHz
    Memory: 3.03 GB / 11.96 GB
  Binaries:
    Node: 12.22.7 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Managers:
    RubyGems: 3.0.3 - C:\Ruby26-x64\bin\gem.CMD
  Utilities:
    Git: 2.33.0. - /mingw64/bin/git
  Languages:
    Bash: 4.4.23 - C:\Program Files\Git\usr\bin\bash.EXE
    Perl: 5.34.0 - C:\Program Files\Git\usr\bin\perl.EXE
    Ruby: 2.6.6 - C:\Ruby26-x64\bin\ruby.EXE
  Browsers:
    Internet Explorer: 8.0.7601.17514
    Chrome: 63.0.3223.0
  npmPackages:
    vite-plugin-vue2: ^1.9.0
    vite: ^2.5.10 => 2.7.12
    @vitejs/plugin-legacy: ^1.6.4

Used Package Manager

npm

Logs

No response

Validations

@dang0705 dang0705 changed the title A bug in the internal import of asyn components in lower versions of chrome In lower versions of Chrome, the dependencies inside the asynchronous components of vue2 are packaged and an error is reported Jan 14, 2022
@dang0705 dang0705 changed the title In lower versions of Chrome, the dependencies inside the asynchronous components of vue2 are packaged and an error is reported In lower versions of Chrome, the dependencies inside the async components of vue2 reported errors in the production environment Jan 14, 2022
@dang0705
Copy link
Author

I looked at the source code of vite and found that there is a registerAssetToChunk method in src/node/plugins/asset.ts, I guess it is a logic error inside this method

@sapphi-red
Copy link
Member

Closing as I confirmed upgrading plugin-legacy to 1.7.1 fixed the issue.
Perhaps #6584 fixed this.

@github-actions github-actions bot locked and limited conversation to collaborators May 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants