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:
Thank you2 Replies
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:
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 {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