What is the correct way to import a React component?

Photoshop UXP Plugin API
1

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:

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;

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.

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.

3

import should work - see the React Starter

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

4

The issue persists even using import like this:

My App:

import { HeaderPicker } from "./HeaderPicker";

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

My Component:

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.)

5

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

1 Like
6

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

1 Like