Import JSON as module

[akaFTS]

Importing JSON files as modules causes a deno-ts error:

import classes from "~/data/classes/classes.json";

Module '~/data/classes/classes.json' was resolved to 'file:///workspaces/bcc-data/data/classes/classes.json', but '--resolveJsonModule' is not used.

Seems to be just a matter of adding the above flag to Aleph's tsconfig.

[ije]

because deno doesn't support json as module ye, check https://github.com/denoland/deno/issues/7623

[ije]

but in your case i guess you can add a json file loader like:

import type { Plugin } from 'aleph/types.d.ts'

export default <Plugin>{
  name: 'json-loader',
  setup: aleph => {
    aleph.onLoad(/\.json$/i, async ({ specifier }) => {
      const { content } = await aleph.fetchModule(specifier)
      return {
        code: `export default ` + new TextDecoder().decode(content)
      }
    })
  }
}

[ije]

anyway, i added a json-loader here: https://github.com/alephjs/aleph.js/blob/master/plugins/json.ts

[akaFTS]

Thanks. Would you be interested in a YAML loader as well? I can send a PR.

[ije]

cool, can you please create a deno module? like https://github.com/ije/aleph-plugin-windicss, then add it to https://github.com/alephjs/alephjs.org/blob/master/pages/docs/plugins/community-plugins.md, if you're interested, thanks @akaFTS

[akaFTS]

In fact, deno-ts still complains when importing a JSON module using the plugin. Any way to fix that?

[hazae41]

That's expected because Deno doesn't have a builtin JSON importer

You can use @ts-ignore to ignore this warning

index.tsx

// @ts-ignore
import json from "~/assets/test.json"

export default function Home() {
  const [count, isSyncing, increase, decrease] = useCounter()
  const version = useDeno(() => Deno.version.deno)

  console.log(json)

  ...

Don't forget to install the plugin

aleph.config.ts

import type { Config } from 'aleph/types'
import json from "aleph/plugins/json.ts"

export default <Config>{
  plugins: [json()]
}

[akaFTS]

But I assume Deno also does not have a built-in CSS importer and still deno-ts does not complain when you import those in Aleph. Is there no way to customize it and whitelist some extensions?

Also as Aleph evolves and other third-party loaders are added (i.e. GraphQL or YAML), they will also face the same issue and adding @ts-ignore to everything is very cumbersome.

[hazae41]

I think that may be because the CSS import doesn't have a name:

import "myfile.css"

While the JSON does have a name:

import myfile from "myfile.json"

[gurk]

Deno now supports importing JSON as module.

https://deno.com/blog/v1.17#import-assertions-and-json-modules

Dynamic importing works with Aleph, but local and remote seem to not.

TypeError: Expected a "JavaScript" module but loaded a "JSON" module. at async Aleph.getAPIRoute (https://deno.land/x/aleph@v0.3.0-beta.19/server/aleph.ts:486:29) at async Server.handle (https://deno.land/x/aleph@v0.3.0-beta.19/server/server.ts:240:23) at async https://deno.land/x/aleph@v0.3.0-beta.19/server/server.ts:382:15