The error Uncaught TypeError: Failed to resolve module specifier "@notionhq/client". Relative references must start with either "/", "./", or "../".
to understand my code
notion.js
import config from './config.js'
import { Client } from '@notionhq/client';
// Initialize the Notion client
const notion = new Client({
auth: config.NOTION_API_TOKEN, // Use the environment variable for API key
});
// Retrieve the database ID from the environment variable
const databaseId = config.NOTION_DATABASE_ID;
// Function to create a new bookmark page in Notion
async function createBookmarkPage(bookmarkData) {
try {
const response = await notion.pages.create({
parent: {
database_id: databaseId,
},
properties: {
title: {
title: [
{
text: {
content: bookmarkData.title,
},
},
],
},
languages: {
rich_text: [
{
text: {
content: bookmarkData.languages,
},
},
],
},
url: {
url: bookmarkData.url,
},
tags: {
multi_select: bookmarkData.tags.split(',').map(tag => ({ name: tag.trim() })),
},
notes: {
rich_text: [
{
text: {
content: bookmarkData.notes,
},
},
],
},
},
});
console.log('Bookmark page created:', response);
return response; // Return the created page data
} catch (error) {
console.error('Error creating bookmark page:', error);
throw error; // Throw the error for the caller to handle
}
}
// Export the createBookmarkPage function
export default {
createBookmarkPage,
};
popup.js
import notion from './notion.js';
const createBookmarkPage = notion.createBookmarkPage;
document.getElementById("bookmarkForm").addEventListener("submit", async function (event) {
event.preventDefault();
// Retrieve form values
var title = document.getElementsByName("title")[0].value;
var languages = document.getElementsByName("languages")[0].value;
var url = document.getElementsByName("url")[0].value;
var tags = document.getElementsByName("tags")[0].value;
var notes = document.getElementsByName("notes")[0].value;
// Create an object with the bookmark data
var bookmark = {
title: title,
languages: languages,
url: url,
tags: tags,
notes: notes,
};
console.log(bookmark);
try {
// Call the createBookmarkPage function
await createBookmarkPage(bookmark);
console.log('Bookmark page created successfully');
// Perform additional actions or show success message
} catch (error) {
console.error('Error creating bookmark page:', error);
// Handle errors and show error message
}
// Clear form inputs
document.getElementById("bookmarkForm").reset();
});
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/assets/static/css/3111790e63d7a482.css" />
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any" />
</head>
<body>
<div class="max-w-md mx-auto p-4">
<h1 class="text-2xl font-bold mb-4">Save to Notion Bookmarks</h1>
<form id="bookmarkForm">
<div class="mb-4">
<label class="block mb-1">Title</label>
<input type="text" title="" required="" class="w-full border border-gray-300 px-2 py-1 rounded" name="title" value="" />
</div>
<div class="mb-4">
<label class="block mb-1">Languages</label>
<input type="text" class="w-full border border-gray-300 px-2 py-1 rounded" name="languages" />
<small>Separate Languages with Commas</small>
</div>
<div class="mb-4">
<label class="block mb-1">URL</label>
<input type="url" title="" required="" class="w-full border border-gray-300 px-2 py-1 rounded" name="url" value="" />
</div>
<div class="mb-4">
<label class="block mb-1">Tags</label>
<input type="text" class="w-full border border-gray-300 px-2 py-1 rounded" name="tags" />
<small>Separate Tags with Commas</small>
</div>
<div class="mb-4">
<label class="block mb-1">Notes</label>
<textarea name="notes" rows="3" class="w-full border border-gray-300 px-2 py-1 rounded"></textarea>
</div>
<div>
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded"><span>Save</span></button>
</div>
</form>
</div>
<script type="module" src="./notion.js"></script>
<script type="module" src="./popup.js"></script>
</body>
</html>
manifest.json
{
"manifest_version": 3,
"name": "Notion Bookmarks",
"short_name": "notion-bookmark",
"version": "1.0.1",
"description": "Store Links to Notion",
"icons": {
"16": "/icon-16.png"
},
"permissions": ["activeTab"],
"host_permissions": ["<all_urls>"],
"action": {
"default_popup": "index.html"
},
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'",
"sandbox": "sandbox allow-scripts; script-src 'self' 'unsafe-eval' https://www.notion.so https://cdn.jsdelivr.net"
},
"content_scripts": [
{
"matches": [
"https://*/*",
"http://*/*"
],
"js": [
"inject.js"
]
}
]
}
I tried lot of stuff from bundling to everything but what I think is there is an issue to access Client in
import { Client } from '@notionhq/client';
but when i use that and reference to the intended file in the modulelike this
import { Client } from './node_modules/@notionhq/client/build/src/index.d.ts';
it gives me error like
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
Has anyone else faced this ???
