Poncho•4mo ago

Module not found error when importing plugin islands

I'm trying to add islands to my plugin so that they "will treat them the same way as if they had been placed inside the islands/ directory." according to the docs (https://fresh.deno.dev/docs/concepts/plugins#islands). But when I try to import my island with: import Chiplist from '@/islands/Chiplist.tsx'; I get a "Module not found" error. Any ideas on why would be appreciated. This is how I'm adding the islands to my plugin:

export default function lunchboxPlugin(): Plugin {
  return {
    name: 'lunchbox',
    islands: {
      baseLocation: import.meta.url,
      paths: [
        './src/components/organisms/Chiplist/Chiplist.tsx',
      ],
    },
  };
}

export default function lunchboxPlugin(): Plugin {
  return {
    name: 'lunchbox',
    islands: {
      baseLocation: import.meta.url,
      paths: [
        './src/components/organisms/Chiplist/Chiplist.tsx',
      ],
    },
  };
}

Thank you

2 Replies

Deno AI Helper•4mo ago

It seems like you're encountering an issue with importing islands within your plugin for a Fresh project. Let's go through the steps to ensure everything is set up correctly according to the documentation. First, ensure that the path you're providing to the islands object in your plugin configuration is correct and relative to the file where the plugin is defined. The baseLocation should be the URL of the plugin module, and paths should be an array of strings pointing to the island files relative to the baseLocation. Here's an example from the documentation on how to add islands from plugins:

import { Plugin } from "$fresh/server.ts";
import * as path from "https://deno.land/std@0.208.0/path/mod.ts";

const __dirname = path.dirname(path.fromFileUrl(import.meta.url));

export default function myIslandPlugin(): Plugin {
  return {
    name: "my-island-plugin",
    islands: {
      baseLocation: import.meta.url,
      paths: [
        "./plugin-islands/MyIsland.tsx",
        "./plugin-islands/OtherPluginIsland.tsx",
      ],
    },
  };
}

import { Plugin } from "$fresh/server.ts";
import * as path from "https://deno.land/std@0.208.0/path/mod.ts";

const __dirname = path.dirname(path.fromFileUrl(import.meta.url));

export default function myIslandPlugin(): Plugin {
  return {
    name: "my-island-plugin",
    islands: {
      baseLocation: import.meta.url,
      paths: [
        "./plugin-islands/MyIsland.tsx",
        "./plugin-islands/OtherPluginIsland.tsx",
      ],
    },
  };
}

In your case, you're trying to import Chiplist from a path that seems to be aliased with @. However, the error suggests that the module resolution isn't working as expected with the alias. Make sure that the path you provide in the paths array is correct and that it's relative to the file where the plugin is defined. If you're using a path alias like @, ensure that it's configured correctly in your import_map.json and that Deno is aware of the import map. If you're not using an import map or if the alias isn't set up, you should use a relative or absolute path to import your island component. Here's how you might adjust your plugin configuration: ```ts export default function lunchboxPlugin(): Plugin {

Deno AI Helper•4mo ago

return { name: 'lunchbox', islands: { baseLocation: import.meta.url, paths: [ './src/components/organisms/Chiplist/Chiplist.tsx', // Adjust this path if necessary ], }, }; }

``

Make sure that the path

'./src/components/organisms/Chiplist/Chiplist.tsx' is correct relative to the file where lunchboxPlugin` is defined. If the file structure is different, you'll need to adjust the path accordingly. If you continue to face issues, double-check the file structure and paths, and ensure that there are no typos or incorrect relative paths. Remember that paths are case-sensitive on many file systems, so ensure that the case matches exactly. 🦕

Helpful Links: Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more Interactive islands | Fresh docs Fresh 1.3 – Simplified Route Components and More A Gentle Introduction to Islands Fresh 1.4 – Faster Page Loads, Layouts and More Fresh 1.6: Tailwind CSS plugin, simplified typings and more Fresh 1.1 - automatic JSX, plugins, DevTools, and more