# Build could not import my component

**URL:** <https://forum.dfinity.org/t/build-could-not-import-my-component/2015>\
**Category:** Getting Started\
**Created:** [February 20, 2021, 7:34am UTC](https://forum.dfinity.org/t/build-could-not-import-my-component/2015 "2021-02-20T07:34:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rbolog](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/rbolog/32/239_2.png) [@rbolog](https://forum.dfinity.org/u/rbolog)\
**Post date:** [February 20, 2021, 7:34am UTC](https://forum.dfinity.org/t/build-could-not-import-my-component/2015/1 "2021-02-20T07:34:46Z")

</div>

Hi,

I am at the beginning of my application, I have integrated react + typescript (depending on the doc. and the phonebook example).  
With index.tsx it works (build deploy etc…) when I add an App.tsx component and I import it. During the build it does not find it I have the following error: (Of course I verified the path)

`Module not found: Error: Can't resolve './App' in '/home/kurdy/dev/dfx_PostIt/src/www/public'`

I check with other example and I don’t find where is the issue and I don’t know how to debug to find my mistake.

Thanks for advices

---

<div class="post-metadata">

**Author:** ![Gabriel](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/gabriel/32/546_2.png) [@Gabriel](https://forum.dfinity.org/u/Gabriel)\
**Post date:** [February 20, 2021, 9:31am UTC](https://forum.dfinity.org/t/build-could-not-import-my-component/2015/2 "2021-02-20T09:31:21Z")

</div>

Not sure we can help until you share your code but for me this example worked very well:

> **[FloorLamp/dfinity-react-ts-tailwind-starter](https://github.com/FloorLamp/dfinity-react-ts-tailwind-starter)**
>
> Create DFINITY React App. Contribute to FloorLamp/dfinity-react-ts-tailwind-starter development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![rbolog](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/rbolog/32/239_2.png) [@rbolog](https://forum.dfinity.org/u/rbolog)\
**Post date:** [February 20, 2021, 1:02pm UTC](https://forum.dfinity.org/t/build-could-not-import-my-component/2015/3 "2021-02-20T13:02:03Z")

</div>

Hi,  
Thanks I already have a look to that project. I agree to setup a project rapidly it’s the best base I found. I am more in discovery and learning path so I started by create a project using dfx and add step by step dependencies to react Typescript etc… I follow the documentation and it works fine using index.tsx the issue is when I tried to continue and add a component. I uncomment webpack part add tsconfig.json, etc… I suspect a miss configuration on that part but I could not find it.

The code:  
**index.tsx**

```
 import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App name="PostIt"/>
  </React.StrictMode>,
  document.getElementById('app')
);

document.title="PostIt";

```

**App.tsx**

```
import * as React from "react";

```

…

```
class App extends React.Component<Props> {
    state : State = {
        postIts: {}
    };
    
    constructor(props: Props) {
        super(props);
    };

    componentDidMount() {
        console.debug('App mount...')
    }

    componentWillUnmount() {
        console.debug('App will unmount...')
    }

    render() {
        const { name } = this.props;
        const { postIts } = this.state

        return (
            <React.Fragment>
                <div>{name}</div>
            </React.Fragment>
        );
    }
}

export default App;

```

**webpack.config.js the part I uncomment** :

```
 module: {
      rules: [
          { 
            test: /\.(ts|tsx|jsx)$/, 
            loader: "ts-loader" 
          },
          { 
            test: /\.css$/,
            use: ['style-loader','css-loader'] 
          }
        ]
      },

```

**dfx.json**

```
{
  "canisters": {
    "dfx_PostIt": {
      "main": "src/dfx_PostIt/main.mo",
      "type": "motoko"
    },
    "www": {
      "dependencies": [
        "dfx_PostIt"
      ],
      "frontend": {
        "entrypoint": "src/www/public/index.tsx"
      },
      "source": [
        "src/www/assets",
        "src/www/public",
        "dist/www/"
      ],
      "type": "assets"
    }
  },
  "defaults": {
    "build": {
      "packtool": ""
    }
  },
  "dfx": "0.6.23",
  "networks": {
    "local": {
      "bind": "127.0.0.1:8000",
      "type": "ephemeral"
    }
  },
  "version": 1
}

```

The structure is:

- src
  - www
    - public
      - index.tsx
      - App.tsx

    - assets

  - dfx\_PostIt