Trying to get Google Playgrounds to work with served CDN libraries

Hi, I’m trying to use Google Playgrounds library to create code sandbox for code examples.
Link to github:
GitHub - google/playground-elements: Serverless coding environments for the web.

So far I have:

  1. this in head:
    <script type="module" src=" https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/playground-ide.min.js "></script>

  2. and inside body:

<playground-project>
  <script type="sample/html" filename="index.html">
    <!doctype html>
    <head>
      <script type="module" src="javascript.js">&lt;/script>
      <script type="module" src="typescript.js">&lt;/script>
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <p>Hello World!</p>
    </body>
  </script>

  <script type="sample/js" filename="javascript.js">
    console.log('hello from javascript');
  </script>

  <script type="sample/ts" filename="typescript.ts">
    console.log('hello from typescript');
  </script>

  <script type="sample/css" filename="styles.css">
    body { color: blue; }
  </script>
</playground-project>

But I’m getting this error in the console:

Uncaught TypeError: The specifier “tslib” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “…/” or “/”.

Any help is appreciated.

Here the solution

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.