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

Receive "Uncaught ReferenceError: _sfc_main is not defined" when using "export" and "default" strings in one line #7038

Closed
klyuevtech opened this issue Nov 6, 2022 · 1 comment · Fixed by #7068

Comments

@klyuevtech
Copy link

Vue version

3.2.41

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-xeg2wy?file=src%2Fcomponents%2FMyComponent.vue&terminal=dev

Steps to reproduce

Bug description

I receive error message in browser:

Uncaught ReferenceError: _sfc_main is not defined

when I try to use component like this:

./components/MyComponent.vue file:

<script lang="ts"> export const foo = 'default'; </script>
in App.vue file:

<script setup lang="ts"> import { foo } from './components/MyComponent.vue' const bar = foo; </script>
But when I replace 'default' word in ./components/MyComponent.vue file with anything else, for example:
./components/MyComponent.vue file:

<script lang="ts"> export const foo = 'custom'; </script>
Then all is compiled properly and I don't receive any error.

This is happening due to this reg ex in node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js

const namedDefaultExportRE = /((?:^|\n|;)\s*)export(.+)(?:as)?(\s*)default/s;
It gives false positives when line contains any 'default' sub-string in it.

Error goes from vite code: it does not add "const _sfc_main = {}" to compiled file in genScriptCode function of node_modules/@vitejs/plugin-vue/dist/index.cjs file, but it seems the root of the problem goes from vue script.

Steps to reproduce

% npm create vite@latest vitejs-vite-jtwu7b-- --template vue

% cd vitejs-vite-jtwu7b && npm i

% touch ./src/components/MyComponent.vue

% echo '<script lang="ts">
export const foo = "default";
</script>' > ./src/components/MyComponent.vue

% echo '<script setup lang="ts">
import { foo } from "./components/MyComponent.vue"
const bar = foo;
</script>' > ./src/App.vue;

% npm run dev

Now check web browser

What is expected?

'default' substring in string in line of code after 'export' substring should not be parsed as reserved word. It should stay string.

What is actually happening?

It is parsed as "default" reserved word

System Info

System:
    OS: macOS 13.0
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 11.93 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.19.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Firefox: 106.0.5
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-vue: ^3.2.0 => 3.2.0 
    vite: ^3.2.0 => 3.2.2

Any additional comments?

I first reported this issue to vite maintenance team. It seems they confirmed the bug, but asked to repost it to vue team since it seems that the issue on your side.

@productdevbook
Copy link
Contributor

image

I guess this is not the same problem?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
4 participants