Skip to main content

Notifications

Power Apps Pro Dev & ISV
Answered

Couldn't import components

Posted on by 28
I am getting Couldn't import components when trying to import a TinyMCE pcf into Canvas App. 
There is no error message in the console or network which makes debugging very difficult as I don't know what the issue is. 
 
 
Does anyone know how to get about solving this? 
My pcf is a TinyMCE rich text editor. 
 
Things that I think could be an issue: 
Control Manifest. I added a skins folder manually to the same folder as index.ts to call the css files. 
<resources>
      <code path="index.ts" order="1"/>
      <css path="skins/content/default/content.css" order="1" />
      <css path="skins/ui/oxide/content.min.css" order="1" />
      <css path="skins/ui/oxide/skin.min.css" order="1" />
      <css path="skins/ui/oxide/content.css" order="1" />
      <css path="skins/ui/oxide/skin.css" order="1" />
 
Using require in the constructor 
  constructor() {
    this._tinymce = require("tinymce/tinymce");
    require("tinymce/themes/silver");
    require("tinymce/icons/default");
    require("tinymce/models/dom");
    require("tinymce/plugins/link");
    require("tinymce/plugins/autolink");
    require("tinymce/plugins/autoresize");
    require("tinymce/plugins/table");
    require("tinymce/plugins/lists");
    require("tinymce/plugins/advlist");
    require("tinymce/plugins/image");
    require("tinymce/plugins/preview");
  }
 
Maybe it's the XMLHttpRequest? 
images_upload_handler: (
        blobInfo: { blob: () => Blob; filename: () => string | undefined },
        success: (arg0: any) => void,
        failure: (arg0: string) => void
      ) => {
        const xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
 
        xhr.open("POST", "http://localhost");
 
        xhr.onload = () => {
          if (xhr.status < 200 || xhr.status >= 300) {
            failure("HTTP Error: " + xhr.status);
            return;
          }
          const json = JSON.parse(xhr.responseText);
          success(json.location); // URL of the uploaded image
        };
 
        const formData = new FormData();
        formData.append("file", blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
      },
 
      file_picker_callback: (
        callback: (arg0: string) => void,
        value: any,
        meta: { filetype: string }
      ) => {
        if (meta.filetype === "image") {
          // Open a file picker dialog
          const input = document.createElement("input");
          input.setAttribute("type", "file");
          input.setAttribute("accept", "image/*");
 
          input.onchange = () => {
            // Check if input.files is not null and has at least one file
            if (input.files && input.files.length > 0) {
              const file = input.files[0];
              const reader = new FileReader();
 
              reader.onload = (e) => {
                // Use type assertion to ensure e.target is defined
                const target = e.target as FileReader;
                if (target.result) {
                  // Call the callback with the image URL
                  callback(target.result as string);
                } else {
                  console.error("Failed to read file.");
                }
              };
 
              reader.readAsDataURL(file);
            } else {
              // Handle the case where no file was selected
              console.warn("No file selected or file input is null.");
            }
          };
 
          input.click();
        }
      },
  • AChng Profile Picture
    AChng 28 on at
    Couldn't import components
    Thanks Diana. Yes it does import now but it could not find GET any of the css files. Weird since I can confirm the skins folder is inside the solution zip file. 
    All good. You have helped answer my original question. 
    Thanks again. 
  • Verified answer
    Diana Birkelbach Profile Picture
    Diana Birkelbach 3,052 on at
    Couldn't import components
    I think I've found the issue.
    It's because in the manifest, there are 2 css resources with the same name (content.css). After removing one of them, I was able to import the component in a Canvas App.
  • AChng Profile Picture
    AChng 28 on at
    Couldn't import components
    Thanks Diana. I restart the project from scratch and change require to import but the error still persist. 
    The constructor is autogenerated and my other pcf also have it in lowercase so I don't think that's the issue. 
     
    I am not sure if it's because the skin file which contain the css is too big. 
    I push folder to Github so if you can have a look at it, that would be great. 
     
     
  • Diana Birkelbach Profile Picture
    Diana Birkelbach 3,052 on at
    Couldn't import components
    My 2 cents on this:
     - the manifest looks ok. But the constructor is written in lowercase. Not sure if that's an issue... but usually it should be in "PascalCase". If you rename it, don't forget to rename also the class in the index.ts
    - don't forget to increment the version in your manifest, before uploading the PCF again, close the app designer, and reopen the app in edit mode to update the component. Otherwise the app won't see your changes.
     
    - the require in the constructor could be an issue (I don't think it gets bundled, so it cannot work). I don't think it would work like this (and even less inside a CanvasApp).
    Not sure if that's the reason for the import error, but try to switch to "import" statements, instead of "require in the constructor"
  • AChng Profile Picture
    AChng 28 on at
    Couldn't import components
    I did look at my manifest too. Thinking that the property name or namespace may clash so I updated it but it did not work. 
    Below are my manifest. 
     
    <?xml version="1.0" encoding="utf-8" ?>
    <manifest>
      <control namespace="wordeditor" constructor="wordeditor" version="0.0.1" display-name-key="wordeditor" description-key="wordeditor description" control-type="standard" >
     
        <external-service-usage enabled="false">
     
        </external-service-usage>
        <property name="wordeditortextfield" display-name-key="wordeditortextfield" description-key="wordeditortextfield" of-type="Multiple" usage="bound" required="true" />
     
        <resources>
          <code path="index.ts" order="1"/>
          <css path="skins/content/default/content.css" order="1" />
          <css path="skins/ui/oxide/content.min.css" order="1" />
          <css path="skins/ui/oxide/skin.min.css" order="1" />
          <css path="skins/ui/oxide/content.css" order="1" />
          <css path="skins/ui/oxide/skin.css" order="1" />
        </resources>
     
      </control>
    </manifest>
     
    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <manifest>
      <control namespace="wordeditor" constructor="wordeditor" version="0.0.1" display-name-key="wordeditor" description-key="wordeditor description" control-type="standard" api-version="1.3.15">
        <external-service-usage enabled="false"/>
        <property name="wordeditortextfield" display-name-key="wordeditortextfield" description-key="wordeditortextfield" of-type="Multiple" usage="bound" required="true"/>
        <resources>
          <code path="bundle.js" order="1"/>
          <css path="skins/content/default/content.css" order="1"/>
          <css path="skins/ui/oxide/content.min.css" order="1"/>
          <css path="skins/ui/oxide/skin.min.css" order="1"/>
          <css path="skins/ui/oxide/content.css" order="1"/>
          <css path="skins/ui/oxide/skin.css" order="1"/>
        </resources>
        <built-by name="pac" version="1.34.3"/>
      </control>
    </manifest>
  • Diana Birkelbach Profile Picture
    Diana Birkelbach 3,052 on at
    Couldn't import components
    The error "couldn't import components" has always something to do with the manifest.
    It could be the name of the property (could be reserved words). Or maybe some special chars in the labels/description.
    Or maybe combination of types that are not supported.,
    If it's possible, seeing the manifest could help.
    Otherwise, you try to remove properties and try again. Maybe you find the issue that way.

     
     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

September 2024 Newsletter…

September 2024 Community Newsletter…

Community Update Sept 16…

Power Platform Community Update…

Welcome to the new Power Platform Community!…

We are excited to announce our new Copilot Cookbook Gallery in the Community…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 141,157

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 63,414

Leaderboard