capo_greco•3mo ago

Fresh: front end import map goes where?

hey team - I am trying to use threejs in my blog posts I am using this blog template: https://github.com/capogreco/blog_template where would I put an import map for front end javascript module imports? I tried putting one in the PostPage function in [slug].tsx but I don't think it likes having JSON in the JSX ? error: Uncaught (in promise) TypeError: The module's source code could not be parsed: Expected '}', got ':'

GitHub

GitHub - capogreco/blog_template: Deno Fresh Blog Template

Deno Fresh Blog Template. Contribute to capogreco/blog_template development by creating an account on GitHub.

4 Replies

Deno AI Helper•3mo ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the error message you've provided, it seems like there might be a syntax issue with the JSON you've included in your code. The error suggests that there is an unexpected ':' character where a '}' was expected. This could mean that your JSON object is not properly closed with a '}' or there might be a syntax error near the location of the ':' character. Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of the advice given. Make sure that your JSON is valid and properly structured. JSON objects should be enclosed in curly braces {} and key-value pairs should be separated by commas. Here's an example of a correctly formatted JSON object:

{
  "imports": {
    "three": "https://cdn.skypack.dev/three"
  }
}

{
  "imports": {
    "three": "https://cdn.skypack.dev/three"
  }
}

If you're trying to include an import map in your front-end code, it typically needs to be a separate JSON file that is referenced in a <script> tag with type="importmap" in your HTML file. Here's an example of how you might include it:

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.skypack.dev/three"
  }
}
</script>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.skypack.dev/three"
  }
}
</script>

Remember to validate your JSON and ensure that it is included correctly in your project. If you continue to experience issues, you may want to refer to the documentation or community resources for the specific template or framework you are using.

Helpful Links: How to Build a Blog with Fresh Configuring JSX in Deno | Deno Docs How to build a static site with Lume Fresh 1.1 - automatic JSX, plugins, DevTools, and more You Don't Need a Build Step

marvinh.•3mo ago

The import map goes into deno.json under the imports key. See https://docs.deno.com/runtime/manual/basics/import_maps

Import Maps | Deno Docs

In order for Deno to resolve a bare specifier like "react" or "lodash", it

capo_greco•3mo ago

the template I am using uses an import map:

{
  "tasks": {
    "start": "deno run -A --watch=static/,routes/ dev.ts"
  },
  "importMap": "./import_map.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

{
  "tasks": {
    "start": "deno run -A --watch=static/,routes/ dev.ts"
  },
  "importMap": "./import_map.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

which looks like this:

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.1.0/",
    "preact": "https://esm.sh/preact@10.10.6",
    "preact/": "https://esm.sh/preact@10.10.6/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.3/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
    "twind": "https://esm.sh/twind@0.16.17",
    "twind/": "https://esm.sh/twind@0.16.17/",
    "$std/": "https://deno.land/std@0.160.0/",
    "@/": "./",
    "./": "./",
    "$gfm": "https://deno.land/x/gfm@0.6.0/mod.ts",
    "feed": "https://esm.sh/feed@4.2.2"
  }
}

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.1.0/",
    "preact": "https://esm.sh/preact@10.10.6",
    "preact/": "https://esm.sh/preact@10.10.6/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.3/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
    "twind": "https://esm.sh/twind@0.16.17",
    "twind/": "https://esm.sh/twind@0.16.17/",
    "$std/": "https://deno.land/std@0.160.0/",
    "@/": "./",
    "./": "./",
    "$gfm": "https://deno.land/x/gfm@0.6.0/mod.ts",
    "feed": "https://esm.sh/feed@4.2.2"
  }
}

but if I add this:

"three": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.168.0/examples/jsm/"

"three": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.168.0/examples/jsm/"

... to the imports key in that file, "three" is still not registered as an import specifier for imports I am trying to do inside script tags in the .md files in the posts subfolder which is where I want to be importing scripts to

marvinh.•3mo ago

that sounds correct. Externalising the import map like you've done here works as well. It sounds more like it's going wrong somewhere in the build toolchain of that project. I'm not familiar with how they pull markdown etc together and tie it up with javascript