This error is popping up, and this is weird

Hey y’all,
I am getting an error in playgrounds such as:

There was a problem running this playground. Check your code for mistakes.

I am using Swift Playgrounds Mac version 3.4.1, and this is my code:

import SwiftUI
import PlaygroundSupport

struct MenuTile: View {
    var menu: Menu
    
    var body: some View {
        HStack {
            Image(uiImage: menu.image)
                .renderingMode(.original)
                .resizable()
                .scaledToFit()
                .frame(width: 80, height: 80, alignment: .center)
                .shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.3), radius: 3, x: 2, y: 2)
            VStack(alignment: .leading, spacing: 5){
                Text(menu.title)
                    .font(.title)
                    .fontWeight(.bold)
                Text(menu.headline)
                    .font(.caption)
                    .foregroundColor(Color.secondary)
                
            }
        }
    }
}

PlaygroundPage.current.setLiveView(MenuTile(menu: menuData[0])) //This is where the error pops up...


// MARK: - MENU DATA MODEL

struct Menu: Identifiable {
    var id = UUID()
    var title: String
    var headline: String
    var image: UIImage
    var description: String
    var nutrition: String
    var price: String
}

// MARK: - MENU DATA

let menuData: [Menu] = [
    Menu(  title:"Chapathi",
           headline:"An Indian bread served fresh from the tawa.",
           image: #imageLiteral(resourceName: "Chapathi.png"),
           description:"Chapathi is a type of roti bread that is served all around the world.It is made of of wheat flour, oil, and water. Rolled and placed on a tawa.",
           nutrition: "104 Calories",
           price: "$2.99"),
    Menu(title:"Methi Paratha",
         headline: "A spicy North Indian bread made with fenugreek leaves.",
         image: #imageLiteral(resourceName: "Methi-Paratha-3-removebg-preview-2.png"),
         
         description:"Methi Paratha is a healthy type of flaky bread that is made of fenugreek and spices. It is very healthy, and is served with Masala Curd and Lettuce.",
         nutrition: "159 Calories",
         price: "$3.59"),
    Menu(title:"Aloo Paratha",
         headline: "A spicy potato filled bread served.",
         image:#imageLiteral(resourceName: "AlooParatha-removebg-preview.png"),
         description:"Aloo Paratha is a stuffed paratha made with cumin and potatoes. It is very healthy in nutrients, and is served with Masala Curd and Lettuce.",
         nutrition: "177 Calories",
         price: "$3.59"),
    Menu(title: "Idli",
         headline: "One of the world’s healthiest foods to eat.",
         image:#imageLiteral(resourceName: "idli-removebg-preview.png"),
         description:"Idli is one of the worlds healthiest foods to eat. It is a steamed lentil cake, with softness and fluffiness than a pillow. It is served with coconut chutney.",
         nutrition: "39 Calories",
         price: "$2.59"),
    Menu(title: "Dosa",
         headline: "Crispy lentil crisp with pure ghee.",
         image:#imageLiteral(resourceName: "image-removebg-preview-15.png"),
         description:"A soft and crispy lentil crisp made with urad dal is something to give your engine a kickstart. It is made from in house fermented batter, and also very healthy. Served with Sambar, Coconut Chutney, and Tomato Chutney.",
         nutrition: "133 Calories",
         price: "$2.99"),
    Menu(title: "Paniyaram",
         headline: "A bite sized breakfast for yours truly.",
         image:#imageLiteral(resourceName: "image-removebg-preview-9.png"),
         description:"A snack to a dinner, Paniyaram is great for everyone. It is made out of lentils, and crispy on the outside with fluffiness on the inside. Served with coconut chutney.",
         nutrition: "278 Calories",
         price: "$2.49"),
    Menu(title: "Pongal",
         headline: "A delicacy made with ghee in South India.",
         image:#imageLiteral(resourceName: "image-removebg-preview-2.png"),
         description:"Pongal is a great way to start your day. The presence of ghee and curry leaves make it so scrumptious. Great taste with cashews as well. Served with coconut chutney.",
         nutrition: "212 Calories",
         price: "$3.49"),
    Menu(title:  "Vegetable Rava Kichidi",
         headline: "A type of meal to dig straight in.",
         image: #imageLiteral(resourceName: "Kichidi-removebg-preview.png"),
         description:"A rava deliciousness. Filled with carrots, beans, and many more. Just a hint of ghee will make your day. Served with coconut chutney.",
         nutrition: "168 Calories",
         price: "$4.49"),
    Menu(title:  "Tomato Idiyappam",
         headline: "Steamed lentil noodles cover with masala",
         image: #imageLiteral(resourceName: "image-removebg-preview-4.png"),
         description:"A common delicacy found in South India, and is prepared fresh in-house. With lentil noodles being tossed with masala, onions, and tomatoes, this will surely make a difference in your day.",
         nutrition: "468 Calories",
         price: "$4.99"),
    Menu(title:"Methi Corn Pulav",
         headline: "An alternate to biriyani, with fenugreek and corn.",
         image:#imageLiteral(resourceName: "Unknown-removebg-preview-2.png"),
         description:"A veg masala rice. Made with corn and methi. With the aroma of basmati rice and fresh masala. Served with onions and raita.",
         nutrition: "226 Calories",
         price: "$6.59"),
    Menu(title:"Vegetable Biryani",
         headline: "An option for vegetarians, who devour masala.",
         image:#imageLiteral(resourceName: "image-removebg-preview-16.png"),
         description:"A savory lunch, filled with steamed carrots, beans, and cauliflower. With the aroma of a traditional seeraga samba rice, this biriyani boasts due to it's in-house masala. This is served with raita and kurma.",
         nutrition: "241 Calories",
         price: "$7.99"),
    Menu(title:"Curd Rice",
         headline: "Give yourself a cool day.",
         image:#imageLiteral(resourceName: "image-removebg-preview-5.png"),
         description:"A cooler and refrsher to your hot sunny day. Rice mixed with in-house homemade curd, this will be devouring and scrumptious.",
         nutrition: "312 Calories",
         price: "$4.99"),
    Menu(title:"Chicken Biryani",
         headline: "Straight from the rice to chicken, all natural.",
         image:#imageLiteral(resourceName: "chkbiriyani.png"),
         description:"This yummy biriyani is made up of organic chicken, amd filled with the most aromatic biryani rice ever, seeraga samba. With our in house masala, this day just gets better and is served with raita and kurma.",
         nutrition: "290 Calories",
         price: "$8.99"),
    Menu(title:"Chilli Paneer",
         headline: "A great option for cheese lovers.",
         image:#imageLiteral(resourceName: "8870677_chilli-chilli-paneer-png-hd-png-download-removebg-preview.png"),
         description:"Cottage cheese marinated in curd and fried, with sautted vegetables, this makes the perfect starter for vegetarians and non - vegetarians. Served with mint chutney and avocado dip.",
         nutrition: "185 Calories",
         price: "$4.99"),
    Menu(title:"Cauliflower 65",
         headline: "An option for both veg and non veg lovers.",
         image:#imageLiteral(resourceName: "food-indian-cuisine-gobi-manchurian-menu-removebg-preview.png"),
         description:"Cauliflower steamed and cooled, and then dipped in batter as fried in peanut oil. This crispy starter will leave the plate finished, and is served with mint chutney and avocado dip.",
         nutrition: "290 Calories",
         price: "$4.59"),
    Menu(title:"Red Chicken Fry",
         headline: "A sauteed chicken with endless taste.",
         image:#imageLiteral(resourceName: "1__#$!@%!#__image-removebg-preview-3.png"),
         description:"Chicken cut into bite sized pieces and then marinated in spices and curd. Then pan seared to make it taste and feel elegant. Served with mint chutney and avocado dip.",
         nutrition: "314 Calories",
         price: "$5.49"),
    Menu(title:"Egg Kurma",
         headline: "A medium option for tasty gravy.",
         image:#imageLiteral(resourceName: "1-removebg-preview.png"),
         description:"Slit eggs boiled and mixed with gravy. Made up of spices and coconut. Great for both rice and chapathi.",
         nutrition: "156 Calories",
         price: "$6.49"),
    Menu(title:"Chicken Kheema",
         headline: "Minced chicken made into a delicacy.",
         image:#imageLiteral(resourceName: "image-removebg-preview-10.png"),
         description:"Chicken minced and made into a curry with great flavored curry leaves. Eat with anything of your choice.",
         nutrition: "220 Calories",
         price: "$7.49"),
    Menu(title:"Sambar",
         headline: "A dal to Idli and Pongal, with vegetables.",
         image:#imageLiteral(resourceName: "image-removebg-preview-6.png"),
         description:"A great South Indian way to start your day. Dal boiled with drumsticks and onions. A great taste with many dishes.",
         nutrition: "139 Calories",
         price: "$3.99"),
    Menu(title:"Paneer Butter Masala",
         headline: "A side to Chapathi, and literally greatness.",
         image:#imageLiteral(resourceName: "paneermasala-removebg-preview.png"),
         description:"Cottage cheese gravy with methi and all creamy deliciousness. The best gravy to eat with any flaky bread.",
         nutrition: "635 Calories",
         price: "$4.49"),
    Menu(title:"Gulab Jamun",
         headline: "Fried dough balls soaked in sugar syrup.",
         image:#imageLiteral(resourceName: "gj-removebg-preview.png"),
         description:"Fried flour balls soaked in warm sugar syrup. A common delicacy found in India. Topped with pistachios and saffron.",
         nutrition: "112 Calories",
         price: "$2.49"),
    Menu(title:"Jalebi",
         headline: "A North Indian sweet found fresh at any stall.",
         image:#imageLiteral(resourceName: "1__#$!@%!#__jalebi-removebg-preview.png"),
         description:"An epic sweet found in almost every street of India. Juicy and hot, this will make you lick your fingers one by one. Fried mixture soaked in hot sugar syrup, just for you.",
         nutrition: "44 Calories",
         price: "$2.49"),
    Menu(title:"Rose Milk",
         headline: "Beat the heat with Rose Milk",
         image:#imageLiteral(resourceName: "image-removebg-preview-14.png"),
         description:"An cooled drink made from real rose eccence, mixed with milk. To keep you fresh all day long.",
         nutrition: "315 Calories",
         price: "$1.49"),
    Menu(title:"Mango Lassi",
         headline: "The ones who drink are cool.",
         image:#imageLiteral(resourceName: "image-removebg-preview-17.png"),
         description:"A fresh, ripe mango peeled and blended with cardamom and curd to make a thick beverage which will last one minute.",
         nutrition: "211 Calories",
         price: "$1.99"),
    Menu(title:"Aam Paana",
         headline: "A minty mangoey drink.",
         image:#imageLiteral(resourceName: "image-removebg-preview-7.png"),
         description:"A North Indian delicacy that is pure of taste and minty fresh. Served fresh and cooled.",
         nutrition: "93 Calories",
         price: "$1.49"),
    Menu(title:"Lemon Juice",
         headline: "When life gives you lemons, make lemon juice.",
         image:#imageLiteral(resourceName: "image-removebg-preview-11.png"),
         description:"A tangy beverage for a perfect summer day. From the lemon to the sugar, it's all organic. Available either sweet or salty.",
         nutrition: "99 Calories",
         price: "$1.29"),
    
]

you cant do this on swift playground since this is a swiftui app, make a new project in swiftui and put your codes there

@fuerte.francis

But I need to create this in swift playgrounds, is there a way?

no and why do you need to create it in playgrounds?

You can totally use SwiftUI in a Playground, although it’s not perfect by any means.

Try putting your model data before your View code. Playgrounds execute code from top to bottom.

you cant see the preview though so its pretty useless

or is it possible now?

Yep, you can now, by using setLiveView().

ah didn’t know its possible to run something like this on playgrounds now it thanks @roosterboy for pointing that out

as he pointed out you should create the class and the data first before showing the menu tile so MenuTile and PlaygroundPage.current.setLiveView(MenuTile(menu: menuData[0])) should be all the way at the bottom

@fuerte.francis
I am trying to make something for the swift student challenge.

I have another error. When I am working in sub-files and want to preview it, I set the line of:

PlaygroundPage.current.setLiveView(ContentView())

I get an error that says:

Expressions are not allowed at the top level

It isn’t like the code only doesn’t work in that specific file, it doesn’t work in any subfile, but when I do it in the main view, it works. Below is an example file where the error happens:

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    
    
    
    var menus: [Menu] = menuData
    
    var body: some View {
        
        List{
            ForEach(menus) { item in
                
                MenuTile(menu: item)
                    .padding(.vertical,4)
                
                
            }
        }
        .navigationBarTitle("Menu")
        
    }//: NAVIGATION
    
}

PlaygroundPage.current.setLiveView(ContentView())// This is where the error happens.

Also, thank you so much for helping with the other problem, that definitely worked after I tried it.

where is your MenuTile located? it should be above this not in another file i think

@fuerte.francis

Hmm… I tried this, but it still gave me the same error. It works in the main file with the exact same code.