I have created an SPFx project with reactJS. I am using .jsx extension - functional components.

Now, the spfx webpart is already working fine, but I saw a material kit that I want to reuse its components.

When I referenced the components, I am presented with this error

[SPLoaderError.loadComponentError]: ***Failed to load component (WebPart). Original error: ***Failed to load entry point from component WebPart). Original error: Module parse failed: Unexpected token (30:4) File was processed with these loaders: ./node_modules/source-map-loader/index.js You may need an additional loader to handle the result of these loaders.

enter image description here

It seems that I cannot use the "footer" tag?

enter image description here

Here's the 3rd screenshot, I created a .js component that I tried to insert in my WebPart.tsx but still the same error.

enter image description here

  • I have tried adding <footer> in my .tsx component, in my project and it works just fine. What if you remove all child components from <footer> and the className? Just to keep it as simple as possible. Apr 15, 2021 at 1:10
  • I already tried using <footer> in my other component and is working, however, if I use the Footer.js component from Material Kit, the error above appears. I already commented the child components inside <footer className={footerClassess}> but still the error in the 1st screenshot exists
    – Aventus
    Apr 15, 2021 at 2:02
  • is it really important to use the footer tag? maybe it's OK to use a good old div instead? Second question: is it possible to modify the Footer.js file to give this component a different name? maybe the names somehow collide (although that's not supposed to happen) Apr 15, 2021 at 2:24
  • good idea. I just tried replacing footer tag with div, however, it seems that the cause is not really in the <footer> the same error as the 1st screenshot but arrow is pointing to the <div className={footerClasses}>, my guess is as wht the error is showing that I need additinal load to handle the result, but I am not sure how to do that. been searching google for quite some time now.
    – Aventus
    Apr 15, 2021 at 2:37
  • I also tried creating my own component with a .JS file extension, even if it is just a simple component that displays a <p> tag, the same error is showing. it seems there's a problem if I use .js components
    – Aventus
    Apr 15, 2021 at 3:05


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.