Build could not import my component


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

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

1 Like

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:

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

    <App name="PostIt"/>



import * as React from "react";

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

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

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

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

        return (

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'] 


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

The structure is:

  • src
    • www
      • public
        • index.tsx
        • App.tsx
      • assets
    • dfx_PostIt