Lightbox error "Cannot find module 'wix-wixWindow' in 'public/pages/mos8c.js"

Ask the community
,
1

Hello,
i am trying to connect a button in a repester where upon clicking it, opens a lightbox with the current repeater item however, i have been unable to due to the above error. upon clicking the button, it only opens the lightbo with getting the context and it shows this error.
I am following the totally codable code. Below is the code:

for the dynamic page:
after import wixwimdow,
then,
$w.onReady(() => {
$w(“#dataset7”).onReady(() => {
$w(“#repeater1”).onItemReady(($item, itemData, index) => {
$item(‘#button10’).onClick(() => {
let item = $item(‘#dataset7’).getCurrentItem();
wixWindow.openLightbox(‘Comment’, item)
});
});
});
})

for the light box,
import { lightbox } from ‘wix-wixWindow’;
import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;
$w.onReady(() => {
let theItem = lightbox.getContext() //this is the item you took from page
let postID = theItem._id // this is the field key for the item ID in the database collection
$w(“#dataset3”).setFilter(wixData.filter()
.eq(“_id”, postID) //we are now filtering to display only the item that matches this ID
)
.then(() => {
console.log(“Dataset is now filtered”);
})
. catch ((err) => {
console.log(err);
});
});

Thank you very much

2

You need to check the code again…

You have:

import wixwimdow

It should be:

import wixWindow from 'wix-window';
3

Have you added the imports onto the page code too?

import wixWindow from 'wix-window';

Also, if you are going by Totally Codeable tutorial, then that is from @Code Queen Nayeli and if you have any issues with using some of her code or tutorials, then you should start by going through Nayeli first through her own website at https://www.totallycodable.com/

4

Hello,
sorry for my late reply. I have checked the code over 5 times but it is still not working.
About the import window, it is written properly on the page code. I made a typo while typing here but it is correct on the site.
Can you tell me what the “Cannot find module ‘wix-wixWindow’ in 'public/pages/mos8c.js” means? and please help me resolve it.

Thank you very much

5

Hello,
I have added the import window to the page code. Before I made this topic, I tried reaching @code-queen through her website and the wix forum but I have been unsuccessful as one can only make an appointment for a project through her website. on the website, I cannot send her a personal message to let her know of my problem. Any other suggestion or help with the code/error?

Thank you very much

6

Okay, so you are using this tutorial from Nayeli.
https://support.totallycodable.com/en/article/open-a-lightbox-when-clicking-an-item-in-a-repeater-using-a-button?fbclid=IwAR39xj1908HcqDlPj9gJRsntCBc07TrOnM1mLdcNaJyQbs6BvBn8t9rqTTE

So if you follow the tutorial slowly and carefully then you shouldn’t go wrong as it is all clearly laid out with the pictures and text and code fully explained for you.

Lightbox Code.

import { lightbox } from 'wix-window';
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';

$w.onReady(() => {
let theItem = lightbox.getContext(); //this is the item you took from page
let postID = theItem._id; // this is the field key for the item ID in the database collection

$w("#mushroomDataset").setFilter(wixData.filter()
.eq("_id", postID) //we are now filtering to display only the item that matches this ID
)
.then(() => {
console.log("Dataset is now filtered");
})
.catch((err) => {
console.log(err);
});

});

Page Code

import wixWindow from 'wix-window';

$w.onReady(() => {

$w("#pizzaDataset").onReady(() => {

$w("#buyRepeater").onItemReady(($item, itemData, index) => {
$item('#viewButton').onClick(() => {
let item = $item('#pizzaDataset').getCurrentItem();
wixWindow.openLightbox('Cheese', item)
});
});

});

});

Or you can write it like this.

import wixWindow from 'wix-window';

$w.onReady(() => {

$w("#pizzaDataset").onReady(() => {

$w("#buyRepeater").onItemReady(($item, itemData, index) => {
$item('#viewButton').onClick(() => {
wixWindow.openLightbox('Cheese', itemData)
});
});

});

});

Make sure that you are not missing any ‘;’ from the end of your code lines too as it looks like you have missed a few out in your code from your post.

If you need to do ‘Step 8: Understanding the Page Code to modify it’
In the beginning of the code we are importing the Window API in order to open a lightbox window.

import wixWindow from 'wix-window';

Or ‘Step 9: Understanding the Lightbox Code to modify it’

import { lightbox } from 'wix-window';
import wixData from 'wix-data';
import wixWindow from 'wix-window';

$w.onReady(() => {
let theItem = lightbox.getContext(); //this is the item you took from page
let postID = theItem._id; // this is the field key for the item ID in the database collection

$w("#mushroomDataset").setFilter(wixData.filter()
.eq("_id", postID) //we are now filtering to to
)
.then(() => {
console.log("Dataset is now filtered");
})
.catch((err) => {
console.log(err);
});

});

Then make sure that you read the text below that step carefully and make sure that you understand it all and what the code does.

Finally, also note that Nayeli has done this tutorial with her repeater on a normal page and not a dynamic page.

Step 6: Add a repeater to a regular page and connect it
Add a repeater to a regular page and add elements to the repeater. Style and design as desired.