Build could not import my component

Developers Getting Started
#1

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

#2

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

1 Like
#3

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