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.

Sign up for GitHub

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

Jump to bottom

use systemjs in index #1059

Closed
musashiM82 opened this issue Nov 11, 2020 · 7 comments
Closed

use systemjs in index #1059

musashiM82 opened this issue Nov 11, 2020 · 7 comments
Labels
duplicate This issue or pull request already exists

Comments

@musashiM82
Copy link

Describe the bug

is there a way to use systemjs in index.html for importing dynamically some library?
this is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
  <script type="systemjs-importmap">
    {
      "imports": {
        "main": "http://localhost:3000/src/main.js",
        "lodash": "https://unpkg.com/[email protected]/lodash.js"
      }
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    System.import('main');
  </script>
</body>
</html>

but I get this error on dev mode

Uncaught SyntaxError: Cannot use import statement outside a module

thanks in advance

System Info

  • required vite version: [email protected]
  • required Operating System: macos catalina 10.15.7
  • required Node version: v14.8.0
  • Optional:
    • npm version: 6.14.7
    • Installed vue version (from yarn.lock or package-lock.json): 3.0.1
    • Installed @vue/compiler-sfc version: 3.0.1
@aleclarson
Copy link
Member

aleclarson commented Nov 11, 2020 •
edited
Loading

Duplicate of #554, solved by #588

@aleclarson aleclarson added duplicate This issue or pull request already exists and removed pending triage labels Nov 11, 2020
@musashiM82
Copy link
Author

musashiM82 commented Nov 11, 2020 •
edited
Loading

hi @aleclarson
thanks for help, but if I clone, build and serve this project https://github.com/aleclarson/repro/tree/vite-588, I receive this error in browser console, "Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".",
why?

thanks

@aleclarson
Copy link
Member

@musashiM82 You need to clone Vite, use gh pr checkout 588, run yarn && yarn build && yarn link in Vite, then run yarn link vite in that reproduction. More info on gh here: https://cli.github.com/

@musashiM82
Copy link
Author

@aleclarson thanks again and sorry for boring you

but Im getting this error now Uncaught (in promise) Error: https://unpkg.com/[email protected]/umd/react.production.min.js (SystemJS https://git.io/JvFET#2)

thanks in advance

@aleclarson
Copy link
Member

Turns out the minimal loader (which is embedded in your index.html when useSystemJs: true is defined) does not support UMD bundles, and React doesn't have a SystemJS bundle.

You can get around this by using the full-featured loader instead:

useSystemJs: 'https://unpkg.com/[email protected]/dist/system.min.js',

@musashiM82
Copy link
Author

thanks

@filoxo
Copy link

filoxo commented Nov 18, 2020

For future reference, @esm-bundle/react is a System bundle of React. See also "An ESM bundle for any NPM package" for a full explanation.

@github-actions github-actions bot locked and limited conversation to collaborators Jul 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
duplicate This issue or pull request already exists
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@aleclarson @filoxo @musashiM82