Skip to content

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

Closed
@klyuevtech

Description

@klyuevtech

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions