1

This is my first post here, I guess :)

I am writing because I have a task to make a Shopping app which should be made in SharePoint Framework and use React as a framework.

My current problem is that, I have two components, one in a file called ShoppingWebpart.tsx (which should render other components) and an inner component in the file Cart.tsx which I want to render in ShoppingWebpart.tsx.

The problem is I get an error in ShoppingWebpart.tsx when trying to render the content in Cart.tsx. The error is:

enter image description here

Here I will attach the code:

Cart.tsx:

import * as React from 'react';
import styles from './ShoppingWebpart.module.scss';
import { IShoppingWebpartProps, ISPList, ISPLists } from './IShoppingWebpartProps';
import { escape } from '@microsoft/sp-lodash-subset';

export interface IShoppingWebpartState{
  items: ISPLists[];
}

export default class Cart extends React.Component<IShoppingWebpartProps, any> {
  constructor(props: IShoppingWebpartProps){
    super(props);

    this.state = {
      items: this.props.list
    }
  }

  public render(): React.ReactElement<IShoppingWebpartProps> {
    console.log("Render: ", this.state.items);
    let products = [];

    return (
      <div className={ styles.shoppingWebpart }>
        <div className={ styles.container }>

          <div className={ styles.row }>
            <div className={ styles.column }>
              <span>Cart details should go here</span>
            </div>
          </div>

        </div>
      </div>
    );
  }
}

module.exports = Cart;

ShoppingWebpart.tsx:

import * as React from 'react';
import styles from './ShoppingWebpart.module.scss';
import { IShoppingWebpartProps, ISPList, ISPLists } from './IShoppingWebpartProps';
import { escape } from '@microsoft/sp-lodash-subset';
var Cart = require('./Cart.tsx');

export interface IShoppingWebpartState{
  items: ISPLists[];
}

export default class ShoppingWebpart extends React.Component<IShoppingWebpartProps, any> {
  constructor(props: IShoppingWebpartProps){
    super(props);

    this.state = {
      items: this.props.list
    }
  }

  public render(): React.ReactElement<IShoppingWebpartProps> {
    console.log("Render: ", this.state.items);
    let products = [];

    for(let i = 0; i < this.state.items.length; i++){
      products.push(<div key={this.state.items[i].Id} className={styles.productItem}>
        {this.state.items[i].Product} <br/>
        {this.state.items[i].Category} <br/>
        {this.state.items[i].ProductDescription} <br/>
        {this.state.items[i].Price}<br/>
        <button>Add to Cart</button>
      </div>)
    }

    return (
      <div className={ styles.shoppingWebpart }>
        <div className={ styles.container }>

          <div className={ styles.row }>
            <span className={ styles.title }>Welcome to Kevins webshop</span>
            <p className={ styles.subTitle }>Produkter till enastående priser.</p>

            <Cart></Cart>

            <div className={ styles.productItem }>
              {products}
            </div> 
          </div>

        </div>
      </div>
    );
  }
}

Here is the file structure:

enter image description here

All help is appreciated.

2

In your code, you are mixing up the Node "require" with a module export and a default export for the class "Cart".

You should try the following:

  • Remove the module export from Cart.tsx (last line)
  • Replace var Cart = require('./Cart.tsx'); in ShoppingWebPart.tsx with import Cart from './Cart';
  • Provide the required props to the Cart element in the render function of ShoppingWebPart.tsx

    <Cart items={ this.state.items } />

  • Thanks a lot Anon, but now I get another error. It says: Module '"../../../../../../../../........../src/webparts/shoppingWebpart/components/Cart"' has no exported member 'Cart'. on import { Cart } from './Cart'; in ShoppingWebpart.tsx. Please forgive me for asking to much, I am a beginner when it comes to React. Thanks – kelank Feb 25 at 21:10
  • I assume that the Cart.tsx is actually in the same folder as ShoppingWebPart.tsx? If not, can you share a partial screenshot of the folder structure? How did you create the project - using the yeoman generator? – Anon Feb 26 at 9:26
  • Yes, Cart.tsx and ShoppingWebPart.tsx are in the same folder and yes, I did use yeoman generator. Then ShoppingWebPart.tsx is created automatically after typing yo @microsoft/sharepoint but Cart.tsx I created myself in the same folder as ShoppingWebPart.tsx. – kelank Feb 26 at 10:31
  • Could you provide a screenshot of the files that the folder contains? I guess there is no additional file called Cart.ts? Try explicitely stating import { Cart } from './Cart.tsx'; if such a file exists. – Anon Feb 26 at 10:43
  • 1
    I now added a screenshot of my filestructure to my original post. Hope its clear and ShoppingWebPart.tsx and Cart.tsx are in the components folder. When I write import { Cart } from './Cart.tsx'; then I get following error: An import path cannot end with a '.tsx' extension. Consider importing './Cart' instead. – kelank Feb 26 at 10:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.