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

use decorator before export default may cause compilation problems #6318

Closed
linshuohao opened this issue Jul 20, 2022 · 1 comment · Fixed by #6320
Closed

use decorator before export default may cause compilation problems #6318

linshuohao opened this issue Jul 20, 2022 · 1 comment · Fixed by #6320

Comments

@linshuohao
Copy link
Contributor

linshuohao commented Jul 20, 2022

Version

3.2.37

Reproduction link

stackblitz.com

Steps to reproduce

After open the above reproduction, you will see the console shows the error: [vite] Internal server error: Cannot overwrite across a split point

What is expected?

rewriteDefault can transform

@Component
export default class App extends Vue {
  a = ';export default';
}

into

@Component
class App extends Vue {
  a = ';export default';
}
const ${as} = App

so that vite can work correctly

What is actually happening?

export function rewriteDefault(
  input: string,
  as: string,
  parserPlugins?: ParserPlugin[]
): string {
 ...

  // if the script somehow still contains `default export`, it probably has
  // multi-line comments or template strings. fallback to a full parse.
  const s = new MagicString(input)
  const ast = parse(input, {
    sourceType: 'module',
    plugins: parserPlugins
  }).program.body
  ast.forEach(node => {
    if (node.type === 'ExportDefaultDeclaration') {
      s.overwrite(node.start!, node.declaration.start!, `const ${as} = `)
    }

   ...
}

when the script still contains default export, and fallback to a full parse.

"@babel/parser" parse

@Component
export default class xxx {}

to

{
    "type": "ExportDefaultDeclaration",
    "start": 11,
    "end": 38,
    "loc": {
        "start": {
            "line": 2,
            "column": 0,
            "index": 11
        },
        "end": {
            "line": 2,
            "column": 27,
            "index": 38
        }
    },
    "exportKind": "value",
    "declaration": {
        "type": "ClassDeclaration",
        "start": 0,
        "end": 38,
        "loc": {
            "start": {
                "line": 1,
                "column": 0,
                "index": 0
            },
            "end": {
                "line": 2,
                "column": 27,
                "index": 38
            }
        },
        "decorators": [
            {
                "type": "Decorator",
                "start": 0,
                "end": 10,
                "loc": {
                    "start": {
                        "line": 1,
                        "column": 0,
                        "index": 0
                    },
                    "end": {
                        "line": 1,
                        "column": 10,
                        "index": 10
                    }
                },
                "expression": {
                    "type": "Identifier",
                    "start": 1,
                    "end": 10,
                    "loc": {
                        "start": {
                            "line": 1,
                            "column": 1,
                            "index": 1
                        },
                        "end": {
                            "line": 1,
                            "column": 10,
                            "index": 10
                        },
                        "identifierName": "Component"
                    },
                    "name": "Component"
                }
            }
        ],
        "id": {
            "type": "Identifier",
            "start": 32,
            "end": 35,
            "loc": {
                "start": {
                    "line": 2,
                    "column": 21,
                    "index": 32
                },
                "end": {
                    "line": 2,
                    "column": 24,
                    "index": 35
                },
                "identifierName": "xxx"
            },
            "name": "xxx"
        },
        "superClass": null,
        "body": {
            "type": "ClassBody",
            "start": 36,
            "end": 38,
            "loc": {
                "start": {
                    "line": 2,
                    "column": 25,
                    "index": 36
                },
                "end": {
                    "line": 2,
                    "column": 27,
                    "index": 38
                }
            },
            "body": []
        }
    }
}

node.start is larger than node.declaration.start , that cause compilation problem

@Dids
Copy link

Dids commented Jul 21, 2022

I can both confirm this issue, as well as that the fix in #6320 works.

See also this StackOverflow question for more context:
https://stackoverflow.com/questions/72743336/vite-vue3-throws-internal-server-error-experimental-syntax-missing-parser-plu

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