Template editor does not work as expected

[stevenlavine]

Bug report

Describe the bug

When I open the Email designer, I see the table of templates, but when I go to edit the template, the HTML and text tabs are blank. In DevTools. the following error is shown

editor.js:2 RangeError: Incorrect locale information provided
    at Function.supportedLocalesOf (<anonymous>)
    at editor.js:2:4272941
    at q (editor.js:2:4274616)
    at t.getDerivedStateFromProps (editor.js:2:4275246)
    at pi (editor.js:2:4125179)
    at qa (editor.js:2:4147152)
    at Hl (editor.js:2:4188980)
    at Ms (editor.js:2:4175131)
    at ks (editor.js:2:4175059)
    at ws (editor.js:2:4174922)

I have a local dev environment using the same version of Strapi, Node and NPM/Yarn, however the designer works as expected.

System

• Node.js version: 14.20.0
• NPM version: 6.14.16 / Yarn 1.22.5
• Strapi version: 3.6.10
• Plugin version: 1.1.9
• Database: PostgreSQL
• Operating system: Ubuntu 20.0.4

[github-actions[bot]]

Thank you!! This is your first issue on this repo

[NickWhiu]

Now you seem to be getting a similar error as mine. I wonder if this applies - It may not, but I think it will.

Open your LocalStorage in developer tools, and check the key strapi-admin-language. For me, it was "null" where it should be something like "en". If it is null, delete the key or set it to "en". What is yours?

Why was it set to null for me? A bug, which I'm pretty sure ive fixed/patched by adding the following file into my Strapi v3 project:

FILE: admin/src/containers/LanguageProvider/reducer.js:

/*
 *
 * LanguageProvider reducer
 *
 */

import { fromJS } from "immutable";
import { get, includes, split } from "lodash";

// Import supported languages from the translations folder
import trads from "../../translations";
import { CHANGE_LOCALE } from "./constants";

const languages = Object.keys(trads);

// Define a key to store and get user preferences in local storage.
const localStorageKey = "strapi-admin-language";

// Detect user language.
const userLanguage =
  (window.localStorage.getItem(localStorageKey) != "null" &&
    window.localStorage.getItem(localStorageKey)) ||
  window.navigator.language ||
  window.navigator.userLanguage;

let foundLanguage = includes(languages, userLanguage) && userLanguage;

if (!foundLanguage) {
  // Split user language in a correct format.
  const userLanguageShort = get(split(userLanguage, "-"), "0");

  // Check that the language is included in the admin configuration.
  foundLanguage = includes(languages, userLanguageShort) && userLanguageShort;
}

const safeLocale = (locale) => (locale != "null" && locale) || "en";

const initialState = fromJS({
  locale: safeLocale(foundLanguage),
});

function languageProviderReducer(state = initialState, action) {
  switch (action.type) {
    case CHANGE_LOCALE:
      // Set user language in local storage.
      const locale = safeLocale(action.locale);
      window.localStorage.setItem(localStorageKey, locale);

      strapi.currentLanguage = locale;

      return state.set("locale", locale);
    default:
      return state;
  }
}

export default languageProviderReducer;

This file is a slightly modified version of node_modules/strapi-admin/admin/src/containers/LanguageProvider/reducer.js basically with a null check. The languageProviderReducer() function was receiving a CHANGE_LOCALE event of null or "null". The problem evidently originates from elsewhere, but this seems to have fixed it for me.

Hope that helps! Was driving me crazy for ages.

[BenGardiner123]

hey stevenlavine I had the exact same problem, but on a separate chrome profile i COULD see it.

This is how i fixed the issue.

go to your strapi user profile top right corner of strapi admin page and click profile.

navigate to the bottom of the page and find the tab called "Experience"---- it should be not set to anything------------

set it to your desired language and you should be back in business.

i feel like it should be able to guess your locale if its null, but that another problem.

hope this works for anyone else who has this problem.