Magento2: Product Edit Page Can't Load

Created on 3 Aug 2016  路  15Comments  路  Source: magento/magento2

Preconditions

  1. Magento 2.1
  2. php 7.0.7
  3. MariaDB 10.1

Steps to reproduce

  1. Delete: rm -R pub/static/*
  2. Delete: rm -R var/view_preprocessed/*
  3. Deploy static file: bin/magento setup:static-content:deploy
  4. Go do any backend product edit page

Expected result

  1. Product Edit page load successfully

Actual result

  1. [Screenshot, logs]
  2. There are many javascript error

    bugshoot
Fixed in 2.3.x Clear Description Confirmed Format is valid Ready for Work Reproduced on 2.1.x Reproduced on 2.2.x Reproduced on 2.3.x bug report

Most helpful comment

Hi @Nerogee,
I can confirm that i18n.js gets broken (even on the latest 2.1.3) by being concatenated/minified even if JS Minification is turned off.

What I noticed, when in the Advanced > Developer > JavaScript Settings the Translation Strategy is set to the Embedded (Translation on Admin side), the issue occurs on both sides - adminhtml and frontend. But when the settings variable is set to Dictionary (Translation on Storefront side), the i18n.js is not invoked on frontend, but the dictionary file translation.json is loaded instead.

I went through the minified code of the i18n.js and the lines in the end of both adminhtml and frontend side must be replaced as follows (either manually, or by another method like Nginx substitute for a temporary fix):

BEFORE:

if (inlineTranslation) { setTranslateProp(el, original); } else { setText(el, "'" .addAttribute('translate', { binding: 'i18n' }); });

AFTER:

if (inlineTranslation) { setTranslateProp(el, original); } else { setText(el, "'" .addAttribute('translate', { binding: 'i18n' })); }}; });

OR.... just override all file instances of i18n.js both in adminhtml and frontend of /pub/static/frontend/THEME_PRIVIDER/THEME/LOCALE/Magento_Ui/js/lib/knockout/bindings/i18n.js with original file from /app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/i18n.js.

Here is a link to a Gist for a console file I have created in order to simplify the copy/symlink job for broken files that you are willing to replace after static content compilation.

All 15 comments

Try to click on those problematic lines to open *.js files - as there are some syntax errors, looks like they are not fully loaded from web server.

Here is a broken function from i18n.js

execute = function (element, valueAccessor, isUpdate) {
var original = ko.unwrap(valueAccessor() || ''),
el = getRealElement(element, isUpdate),
inlineTranslation = (module.config() || {}).inlineTranslation;

        if (inlineTranslation) {
            setTranslateProp(el, original);
        } else {
            setText(el, "'"
    .addAttribute('translate', {
        binding: 'i18n'
    });

yes, it is. The newly generated file seem to be broken. @orlangur do you have solution. I have newly installed magento2.1 which seems to be working well. So I don't know what caused this issue? My products data ? or some implicit configuration? To mention here, I don't enable any JS binding/merging/ minifying at all.

Do materialized files in pub/static correspond to original file versions in your installation?

It's hard to say why your browser receives incorrect version, it could be web server misconfiguration or some malfunction in browser cache. For example, such problem can be easily emulated with no free space on device.

At first I did use signed static file, but I can't find materialized files. I realized that function may cause this issue so that I turned it off. But no matter how, It still has error. BTW, how do you know my browser receives incorrect version? As I already noticed, the newly generated file is not the same one of the origin. What should I check further? thanks

Hi @orlangur. Could you please give me hints on why this issue happen and what should I do to solve.
As you mentioned above it may because of no free space, but I don't think it's the case. My reason is simply because there are lots of space and this file looks complete. Saying so because the final ending }) is there. The file is broken in the middle way.
So I highly suspect it's the function that generated it got glitch.

Any suggestion would be appreciated.

Finally, I found out the reason.. The "translate_strategy" is culprit. I set it to embedded which caused this issue. Cost me almost a daytime to find it out. hope can help others who suffer the same.

uff.. Thanks you are my hero of the day. After an upgrade for mage 2.1 i had several error of JS, that one being one I had no idea how to tackle. Thanks again.

@Nerogee thank you for your feedback.
Please, recheck it on the latest 2.1 version of Magento.

Hi @Nerogee , closed as we don't receive update more than 2 week, feel free to write here/reopen or to open new issue

Hi @Nerogee,
I can confirm that i18n.js gets broken (even on the latest 2.1.3) by being concatenated/minified even if JS Minification is turned off.

What I noticed, when in the Advanced > Developer > JavaScript Settings the Translation Strategy is set to the Embedded (Translation on Admin side), the issue occurs on both sides - adminhtml and frontend. But when the settings variable is set to Dictionary (Translation on Storefront side), the i18n.js is not invoked on frontend, but the dictionary file translation.json is loaded instead.

I went through the minified code of the i18n.js and the lines in the end of both adminhtml and frontend side must be replaced as follows (either manually, or by another method like Nginx substitute for a temporary fix):

BEFORE:

if (inlineTranslation) { setTranslateProp(el, original); } else { setText(el, "'" .addAttribute('translate', { binding: 'i18n' }); });

AFTER:

if (inlineTranslation) { setTranslateProp(el, original); } else { setText(el, "'" .addAttribute('translate', { binding: 'i18n' })); }}; });

OR.... just override all file instances of i18n.js both in adminhtml and frontend of /pub/static/frontend/THEME_PRIVIDER/THEME/LOCALE/Magento_Ui/js/lib/knockout/bindings/i18n.js with original file from /app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/i18n.js.

Here is a link to a Gist for a console file I have created in order to simplify the copy/symlink job for broken files that you are willing to replace after static content compilation.

@viktor-zhuromskyy, nice finding, but closed issues are most likely not monitored by Magento folks. Please report a new one if it is still relevant.

issue is reopened based on @viktor-zhuromskyy reply

Hi, @Nerogee.
We've created internal ticket MAGETWO-70599 to address this issue.

@Nerogee, thank you for your report.
We've created internal ticket(s) MAGETWO-70599 to track progress on the issue.

Hi @Nerogee.

Thank you for your report and collaboration!

The issue was fixed by Magento team. The fix was delivered into magento/magento2:2.3-develop branch(es).
Related commit(s):

The fix will be available with the upcoming 2.3.3 release.

Was this page helpful?
0 / 5 - 0 ratings