Uncaught SyntaxError: Unexpected token 'export'

[Weiyi-Feng]

Describe the bug

If we use vite worked with some 3rd library like pyodide, they will get an error like Uncaught SyntaxError: Unexpected token 'export'.

Reproduction

Download pyodide full version from the release page and extract it to src/lib/pyodide.

<script src="/src/lib/pyodide/pyodide.js"></script>
<script type="text/javascript">
    async function main(){
        let pyodide = await loadPyodide({
            indexURL: "/src/lib/pyodide",
        });
        console.log(pyodide.runPython("1 + 2"));
    }
    main();
</script>

Error: Uncaught SyntaxError: Unexpected token 'export'

And we can see the /src/lib/pyodide/pyodide.js content in chrome devtool, it's converted to the following content:

export default "/src/lib/pyodide/pyodide.js"

but in fact, we only want the original content of it, so is there has a way to let users get the original js content?

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
    Memory: 1.27 GB / 7.81 GB
  Binaries:
    Node: 17.0.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.62)
    Internet Explorer: 11.0.19041.1202

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

pyodide.js is a UMD file. Vite only works with ESM if you put it under src. The only way to get UMD to work is either prebundle it, or put it in public and link to the script in html. And I think the latter solution would work for this case.

[Weiyi-Feng]

pyodide.js is a UMD file. Vite only works with ESM if you put it under src. The only way to get UMD to work is either prebundle it, or put it in public and link to the script in html. And I think the latter solution would work for this case.

I tried putting the library in the public folder but it still doesn't work, vite adds import { injectQuery as __vite__injectQuery } from "/@vite/client"; to the file header and causes this error:

Uncaught SyntaxError: Cannot use import statement outside a module

[Eliav2]

for whoever want vite to produce a umd build use this in your vite.config.ts file:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    target: "es2015",
    lib: {
      entry: "src/main.tsx",
      formats: ["umd"],
      name: "App",
    },
  },
});

Then you could import functions and vars from this file by accessing "App.*"
I got this error Uncaught SyntaxError: Unexpected token 'export' when using vite but not with webpack because vite does not build umd file by default and CRA do, so check what kind of js build you need and then configure vite to build whatever you need

[bluwy]

I tried putting the library in the public folder but it still doesn't work, vite adds import { injectQuery as __vite__injectQuery } from "/@vite/client"; to the file header and causes this error:

Uncaught SyntaxError: Cannot use import statement outside a module

Interesting. This looks like a bug to me.

[sapphi-red]

I was not able to reproduce this in my environment.
It was working successfully.

$ tree -I node_modules -L 4
.
├── index.html
├── package-lock.json
├── package.json
└── public
    └── src
        └── lib
            └── pyodide

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "2.8.6"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script src="/src/lib/pyodide/pyodide.js"></script>
    <script>
        async function main(){
            let pyodide = await loadPyodide({
                indexURL: "/src/lib/pyodide",
            });
            console.log(pyodide.runPython("1 + 2"));
        }
        main();
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

---

Also when I put it in src folder a different error occured. (I think this error is correct.)

[plugin:vite:import-analysis] Failed to resolve import "node-fetch" from "src\lib\pyodide\pyodide.js". Does the file exist?

[Weiyi-Feng]

I was not able to reproduce this in my environment. It was working successfully.

$ tree -I node_modules -L 4
.
├── index.html
├── package-lock.json
├── package.json
└── public
    └── src
        └── lib
            └── pyodide

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "2.8.6"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script src="/src/lib/pyodide/pyodide.js"></script>
    <script>
        async function main(){
            let pyodide = await loadPyodide({
                indexURL: "/src/lib/pyodide",
            });
            console.log(pyodide.runPython("1 + 2"));
        }
        main();
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Also when I put it in src folder a different error. (I think this error is correct.)

[plugin:vite:import-analysis] Failed to resolve import "node-fetch" from "src\lib\pyodide\pyodide.js". Does the file exist?

yarn add node-fetch@2 should work.

I will make a repo to show the bug tomorrow

[sapphi-red]

@Weiyi-Feng Did you able to create a reproduction?

[github-actions]

Hello @Weiyi-Feng. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[Weiyi-Feng]

This issue was solved by updating vite to 2.9.2

[gajus]

This issue sounds related to #8037

[michaelwooley]

My vite is up to date but I was still seeing this in a worker file generated by emscripten.

The solution was to rename the the relevant file with a *.umd extension.

System info

❯ npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers

  System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 2.79 GB / 15.34 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.6.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Brave Browser: 101.1.38.111
    Chromium: 101.0.4951.54
    Firefox: 100.0

[Eliav2]

if you developing in older browser make sure your transpile target is compatible.
for example to develop in chrome 75 you will need this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  esbuild:{
    target:"es2018"
  }
});