# What is the correct way to import a React component?

**URL:** https://forums.creativeclouddeveloper.com/t/what-is-the-correct-way-to-import-a-react-component/7011
**Category:** UXP Plugin API
**Tags:** uxp
**Created:** [October 23, 2023, 4:25pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-correct-way-to-import-a-react-component/7011 "2023-10-23T16:25:07Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Hesse](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/hesse/32/3317_2.png) [@Hesse](https://forums.creativeclouddeveloper.com/u/Hesse)
#### Post date: [October 23, 2023, 4:25pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-correct-way-to-import-a-react-component/7011/1 "2023-10-23T16:25:07Z")

</div>

Hello, I have a problem importing my React component into the App.

I’ve already tried the import method and now I’m trying the require method, both without success.

What would be the correct method?

Here’s an example of my code:

```auto
const { HeaderPicker } = require("./HeaderPicker");

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <Theme theme="spectrum" scale="medium" color="light">
        <Menu selects="single">
          <MenuItem selected>Sample Menu</MenuItem>
          <HeaderPicker/>
          <MenuDivider></MenuDivider>
          <MenuItem>Select Option 1</MenuItem>
          <MenuItem>Select Option 2</MenuItem>
          <MenuItem>Select Option 3</MenuItem>
          <MenuItem>Select Option 4</MenuItem>
          <MenuItem disabled>Disabled Option</MenuItem>
        </Menu>
      </Theme>
    </div>
  );
}

export default App;

```

```auto
function HeaderPicker() {
    return (
        <>
            <sp-field-group>
                <div>
                    <Picker theme="dark" id="picker-s" size="s" label="Selection type">
                        <sp-menu-item id="sb-header">SB Header</sp-menu-item>
                        <sp-menu-item id="con-header">Con Header</sp-menu-item>
                        <sp-menu-divider></sp-menu-divider>
                        <sp-menu-item id="aw-header">Alienware Header</sp-menu-item>
                        <sp-menu-item id="gaming-header">Gaming Header</sp-menu-item>
                        <sp-menu-divider></sp-menu-divider>
                        <sp-menu-item id="outlet-header">Outlet Header</sp-menu-item>
                        <sp-menu-item id="experts-header">Experts Header</sp-menu-item>
                    </Picker>
                </div>
            </sp-field-group>
        </>
    );
}

module.exports = { HeaderPicker };

```

This is the error that keeps appearing on my console. The same error for both component import methods.

```auto
uxp://uxp-internal/domjs_scripts.js:2 Uncaught Error: Module not found: "./HeaderPicker". Parent module folder was: "./".

```

I’m using the UXP 7.3 on PSD 25.2.0.

---

<div class="post-metadata">

### Author: ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)
#### Post date: [October 23, 2023, 8:16pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-correct-way-to-import-a-react-component/7011/3 "2023-10-23T20:16:41Z")

</div>

`import` should work - see the [React Starter](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/blob/main/ui-react-starter/src/index.jsx)

Your error suggests that your path is wrong or your component doesn’t have a valid export.

---

<div class="post-metadata">

### Author: ![Hesse](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/hesse/32/3317_2.png) [@Hesse](https://forums.creativeclouddeveloper.com/u/Hesse)
#### Post date: [October 23, 2023, 8:34pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-correct-way-to-import-a-react-component/7011/4 "2023-10-23T20:34:58Z")

</div>

The issue persists even using import like this:

My App:

```auto
import { HeaderPicker } from "./HeaderPicker";

function App() {
  return (
    <div>
      <Theme theme="spectrum" scale="medium" color="light">
        <HeaderPicker />
    </Theme>
    </div >
  );
}

```

My Component:

```auto
function HeaderPicker() {
    return (
        <>
            <sp-field-group>
                <div>
                    <Picker theme="dark" id="picker-s" size="s" label="Selection type">
                        ...
                    </Picker>
                </div>
            </sp-field-group>
        </>
    );
}

export default HeaderPicker();

```

Note: Both are in the same folder, in this case (main-dir/src/both-js.)

---

<div class="post-metadata">

### Author: ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)
#### Post date: [October 23, 2023, 8:48pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-correct-way-to-import-a-react-component/7011/5 "2023-10-23T20:48:27Z")

</div>

You’ve got your imports/exports mixed up.

Get rid of the parenthesis here:  
`export default HeaderPicker();`

And the curly braces here:  
`import { HeaderPicker } from "./HeaderPicker`

---

<div class="post-metadata">

### Author: ![Hesse](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/hesse/32/3317_2.png) [@Hesse](https://forums.creativeclouddeveloper.com/u/Hesse)
#### Post date: [October 23, 2023, 10:04pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-correct-way-to-import-a-react-component/7011/6 "2023-10-23T22:04:28Z")

</div>

Thank you very much, that was it. I was also missing putting the .js in the HeaderPicker.