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

Vue SFC compilation breaking during SSR in Vite due to strip-literal #4

Closed
5 tasks done
AaronBeaudoin opened this issue Jan 30, 2023 · 0 comments
Closed
5 tasks done

Comments

@AaronBeaudoin
Copy link

AaronBeaudoin commented Jan 30, 2023

Describe the bug

Suppose I have a Vite SSR project with a simple App.vue file like this:

<script>
const getTestData = async () => {
  const filename = "message";
  console.log(await import(`./data/something/${filename}.json`));
  console.log(await import(`./data/whatever/${filename}.json`));
};

getTestData();
export default {};
</script>

<template>
  <div class="whatever">
    {{ new Date() }}
  </div>
</template>

As you can I see, I dynamically import two .json files, which I might do in the real world to get data. When I run my project, I get the following error:

/App.vue:8
  console.log(await __vite_ssr_import_0__.default((__vite_ssr_import_meta__.glob("./data/whatever/*.json")), `./data/whatever/${filename}.json`));
                                                                            ^

TypeError: __vite_ssr_import_meta__.glob is not a function
    at getTestData (/App.vue:8:77)

The error can be avoided by either:

  1. Removing the class="whatever" attribute.
  2. Removing one of the dynamic imports.

The reason for this is because the cause of the issue is the stripLiteral function used internally by Vite. For a more detailed explanation, please read the README of the minimal reproduction repository.

Reproduction

https://github.com/AaronBeaudoin/vite-ssr-issue-vue-sfc-dynamic-import

System Info

System:
    OS: macOS 12.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 146.80 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.volta/tools/image/node/16.19.0/bin/node
    npm: 8.19.3 - ~/.volta/tools/image/node/16.19.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Safari: 15.6

Used Package Manager

npm

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.
@AaronBeaudoin AaronBeaudoin changed the title Acorn trips up on this input, and the regex fallback does too Vue SFC compilation breaking during SSR due to strip-literal Feb 2, 2023
@AaronBeaudoin AaronBeaudoin changed the title Vue SFC compilation breaking during SSR due to strip-literal Vue SFC compilation breaking during SSR in Vite due to strip-literal Feb 2, 2023
@antfu antfu closed this as completed in 2a35abf Feb 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant