Error: ./src/plugins/tinymce couldn't be resolved

[sklinet]

Error: ./src/plugins/tinymce couldn't be resolved

[Sklico]

@FieldMarshallVague I found something and made new version with fix. The problem was that API key is fetched in useEffect, so in first render, there is no API key and from some reason that TinyMCE Editor component won't rerender / reinitialize in some cases with fetched API key. Can you please try version 1.0.2 ? Don't forget to refresh browser when you change API key.

[FieldMarshallVague]

Awesome work, dude! that's working.

The warning about the unlinked account is gone. I'm still getting plugin-specific 404s, but I guess they are premium content or something. (they are the same errors as the ones in error pic above, but the URLs now have my api key in them).

[Sklico]

@FieldMarshallVague yes you need an account on TinyMCE, but it's free.

[Sklico]

Hey @FieldMarshallVague, just for info, we have updated our README file, it could resolve your errors, there are a few changes in TinyMCE v6 config file, I mentioned it in this issue #6 (comment)

[Sklico]

@FieldMarshallVague because we use official npm package from TinyMCE for React - https://www.npmjs.com/package/@tinymce/tinymce-react and it needs an API Key. This is not self hosted version, so you need to provide an API key, otherwise you will see this error. It's not something we could change, it's from tinymce package. So our plugin needs that API key to works right, because tinymce package needs it.

[Sklico]

@FieldMarshallVague have you whitelisted your domain in TinyMCE account ? We tried it with clean strapi install & didn't notice any problem with this.

[FieldMarshallVague]

Yep, that worked! I had a few 404s from plugins that seem to be no longer relevant, which I removed and it's not appeared without any errors and no warning about the API key.

Thanks for your help :)

[FieldMarshallVague]

Ah, I didn't use the right nesting for the editorConfig and this actually runs when I just remove the 'resolve' line.

But all I'm seeing in a test single content type with a rich text field is a single bar with 'media library' button.

[FieldMarshallVague]

[jbednar97]

Hello @FieldMarshallVague ,
I've forgotten to remove the "resolve" line from default config. I'm going to update the Readme file asap, sorry. As far as not seeing the editor goes try to copy the whole default config from readme, but remove only the "resolve" line. I'm going to check it out just in case, but please try the method I've mentioned. Also check out your TinyMCE api key in your settings page in tinymce/configuration.If you're getting any terminal or console errors, please attach them too.

[jbednar97]

Hello @FieldMarshallVague ,
We've recently updated our readme file, and as far as we can see the problem was in CSP setting in your middlewares. Please check out the updated readme file, and update your middlewares based on provided code.

Thank you.

[FieldMarshallVague]

Thanks, I'll check this out. Just to clarify, you mention the API key, does it need an account with TinyMCE to work at all or just for some feature? I was previously using a self-hosted version with V3 before the migration.

[FieldMarshallVague]

Just wondering, but why do we need the key? It says during the signup for tinymce that they need to whitelist our domain. What kind of check is occurring there? Does it need access to some remote server? I didn't need to do this with my previous version, so just wondered what purpose you see in it.

[FieldMarshallVague]

Ok, thanks for the info :)

[Sklico]

@FieldMarshallVague no problem :) Can we now close this issue, or your problem still occurs ?

[FieldMarshallVague]

I haven't been able to test yet, but will do shortly :)

[FieldMarshallVague]

I'm getting a 'domain not registered' warning despite signing up and pasting my key into the config section for tinymce. It's saved and I've rebuilt and reloaded many times, but it's still showing the warning.

There are several errors in the console, which are 404s for tinymce plugins that all have 'no api key' in the url.

[FieldMarshallVague]

I'm just developing locally. It's localhost which is included by default.

[FieldMarshallVague]

I'm just upgrading all packages to latest. Will try again.

[Sklico]

@FieldMarshallVague ok, please can you provide link to repository, so we can try it ? We're just guessing what is wrong now, so if you can provide us e.g. your repository, or maybe project on https://codesandbox.io, we can check where is problem.

[FieldMarshallVague]

That didn't help, sadly.

I can't give you access, as it's a private repo for work. Sorry, but thanks for trying.

I don't know if it's helpful or not, but I originially created a new single type and added a rich text field for testing BEFORE I added the api key, so maybe the string got hard-coded then? I'll have a hunt around for it and let you know.

[FieldMarshallVague]

There's no record of the 'no-api-key' outside of the tinymce remote package, and I can't find out where/how it's being stored incorrectly, so I'm going to give up. Thanks for trying anyway, I'll get the self-hosted version working somehow :)

[Sklico]

@FieldMarshallVague ok I understand. Have you tried that with clean Strapi install ? Maybe you can provide us at least your config for that plugin. There was other issue with CSP problem (#4) and it works for that guy, so I think there is something in your code, or maybe you wrong copied API key, some cache from TinyMCE CDN, or in your Strapi instance. Have you tried run Strapi in watch mode (strapi develop --watch-admin) ?

[FieldMarshallVague]

Hey, thanks for following up. No, I haven't tried with clean install, I'm working with a mature project, so not sure how that will help (I believe it works for you).

I'll copy my config below:

  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'script-src': ["'self'", "'unsafe-inline'", '*.tinymce.com', '*.tiny.cloud', 'https:'],
          'connect-src': ["'self'", '*.tinymce.com', '*.tiny.cloud', 'https:'],
          'img-src': [
            "'self'",
            '*.tinymce.com',
            '*.tiny.cloud',
            'data:',
            'blob:',
            process.env.STORAGE_URL,
            process.env.STORAGE_CDN_URL,
            'cdn.jsdelivr.net',
            'strapi.io',
            's3.amazonaws.com'
          ],
          'style-src': [
            "'self'",
            "'unsafe-inline'",
            "*.tinymce.com",
            "*.tiny.cloud",
          ],
          'media-src': [
            "'self'",
            'data:',
            'blob:',
            process.env.STORAGE_URL,
            process.env.STORAGE_CDN_URL
          ],
          "font-src": ["'self'", "*.tinymce.com", "*.tiny.cloud"],
          // 'report-uri': ['https://logging.perfectit.com/csp-violation-reports'],
          upgradeInsecureRequests: null
        }
      }
    }
  },

tinymce: {
    enabled: true,
    config: {
      editor: {
        outputFormat: 'html',
        editorConfig: {
          language: 'en',
          height: 500,
          menubar: false,
          extended_valid_elements: 'span, img, small',
          forced_root_block: '',
          convert_urls: false,
          entity_encoding: 'raw',
          plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'table emoticons nonbreaking',
            'insertdatetime media table paste code help wordcount'
          ],
          toolbar:
            'undo redo | styleselect | bold italic forecolor backcolor | \
                    alignleft aligncenter alignright alignjustify | \
                    table emoticons visualblocks code|\
                    nonbreaking bullist numlist outdent indent | removeformat | help',
          style_formats: [
            {
              title: 'Headings',
              items: [
                { title: 'h1', block: 'h1' },
                { title: 'h2', block: 'h2' },
                { title: 'h3', block: 'h3' },
                { title: 'h4', block: 'h4' },
                { title: 'h5', block: 'h5' },
                { title: 'h6', block: 'h6' }
              ]
            },

            {
              title: 'Text',
              items: [
                { title: 'Paragraph', block: 'p' },
                {
                  title: 'Paragraph with small letters',
                  block: 'small'
                }
              ]
            }
          ]
        }
      }
    }
  }

I had already used 'copy' button and pasted twice, but I manually copied from text and pasted, double-checked and the key is correct, but as you can see in the image, there is no key being parsed into to the request url.

[FieldMarshallVague]

Sorry, I should point out, in case it's not clear, that I am seeing the editor appear now, but the warning about 'domain not listed' and the debug log errors appear anyway. So the editor is not linked to my API key.

Is there some initial writing to disk or DB other than simply storing the key? Some part of the build process? Because it feels like that is where something went wrong.

I've tried clearing cache many times, and have run 'watch-admin' but not sure what that is doing exactly. It doesn't change the issue I'm seeing.