Wrapping React is not working for some libraries

[qu3vipon]

Describe the bug Wrapping React is not working for some libraries.

I had to modify {page}.js manually to import them.

// created by pynecone, it breaks
import {DateRangePicker} from "react-daterange-picker"

// it works
import DateRangePicker from "react-daterange-picker"

troublesome libraries

• react-daterange-picker
• react-datepicker
• react-date-picker

To Reproduce

class DateRangePicker(pc.Component):
    library = "react-daterange-picker"
    tag = "DateRangePicker"

config = pc.Config(
    app_name="example",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.DEV,
    frontend_packages=[
        "react-daterange-picker",
        "moment", "moment-range",  # dependencies
    ]
)

def index():
    return pc.center(DateRangePicker())

Error message Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Specifics (please complete the following information):

• Python Version: 3.8.7
• Pynecone Version: 0.1.12
• OS: Mac OS

[Alek99]

Ok got I we should allow users to specify whether brackets are need in the import. Thanks for pointing this out

[masenf]

I'm currently working around this issue by overriding get_custom_code and emitting the import myself.

For example, to wrap Script, the default export from next/script:

class Script(pc.Component):
    tag = "Script"

    def get_custom_code(self) -> Set[str]:
        return {"import Script from 'next/script'"}.union(super().get_custom_code())

[zhangxiubo]

It would some libraries require the brackets in the import (e.g. react-tabulator), but Pynecone is not generating them in the script.

[robingie]

+1

[ElijahAhianyo]

I believe this issue is resolved now. You should be able to specify default imports by setting is_default = True in your custom component