1

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

8
  • 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. – Denis Molodtsov Apr 15 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 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) – Denis Molodtsov Apr 15 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 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 at 3:05

Your Answer

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

Browse other questions tagged or ask your own question.