RNVanillaTV blank screen on Tizen and Webos

[MomoDeLuxe]

Describe the bug
RNVanillaTV with template-starter blank screen on Tizen and Webos

To Reproduce
Steps to reproduce the behavior:

1. rnv new
2. rnv run -p tizen -r -s debug -t 10.10.10.5

Expected behavior
template-starter landing page

[mihaiblaga89]

@MomoDeLuxe known issue, actively working on it

[MomoDeLuxe]

Any update on this?

[Govindsa421]

Hello , related this issues RNVanillaTV blank white screen on Tizen TV facing issue same here also.

**targeting tizen smart tv : **

rnv run -p tizen -d -t 192.168.1.167

can some tell me how to solve this issue or can some one helps us.
thank you

[Govindsa421]

@mihaiblaga89 any update on this?

[DevGupta004]

Any Update on this?

[pauliusguzas]

Same happens when doing rnv build -p webos and then installing generated ipk to device

[trokohl]

in my case a

    "browserslist": [
        ">0.2%",
        "samsung 4"
    ]

in the package.json fixed this problem for tizen

[MomoDeLuxe]

in my case a

    "browserslist": [
        ">0.2%",
        "samsung 4"
    ]

in the package.json fixed this problem for tizen

Confirmed, it works

[wwwebgainss0]

I wanted to inquire if there have been any updates regarding the issue we're experiencing. As of now, we're still encountering a white or blank screen on LG WebOS. Any assistance or guidance you could provide would be greatly appreciated. Thank you for your continued support.

[andread95]

Hi everybody,

same issue here, It does work on --hosted mode, but on target it shows a blank/white screen after the splash one.
I guess the same issue happens on Tizen...I haven't tried yet...I know It's a known issue but It would be appreciated a workaround or a temporary fix waiting for the next release...at least a support to solve on our end.

Thank you for your great work!

[andread95]

Hi again,

the issue occurs also on release...blank/white page on WebOS...it works only on hosted mode.
In addition, I don't know if It's related, the app can't be installed on Tizen...both platform use the same engine (react-native-web).

Thank you

[pauliusguzas]

TV9 SAMSUNG UE32T4302AK, os version 2501 - fully works
TV7 Samsung 5 Series, os version 525 - blank screen

[pauliusguzas]

this is mostly solved, ramaining issues moved to #1557 and #1490

[ali-sao]

My problem was the nullish coalescing operator ?? used in a library. Despite my assigned browserlist is supposed to transpile to ES5 it's still producing new ECMA.

I tried every possible fix and nothing really worked.

I installed babel plugin
yarn add @babel/plugin-proposal-nullish-coalescing-operator -D

I modified babel.config.js and passed the plugin to withRNVBabel :

const { withRNVBabel } = require('@rnv/adapter');
module.exports = withRNVBabel((config) => {
  return {
    ...config,
    plugins: [
      ...config.plugins,
      ['@babel/plugin-proposal-nullish-coalescing-operator'],
    ],
  };
});

My browserlist :

"browserslist": {
        "production": [
            "> 0.25%, not dead",
            "samsung 4"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },

[DinaSZH]

@ali-sao Hello, did you fix it?

[ali-sao]

Nope @DinaSZH, there's a way to do this by re-transpiling the bundle manually

[wwwebgainss0]

For me still blank screen on LG webos. Is there any workaround to fix this?

[DinaSZH]

I don’t know, still trying to fix it.

…

On Thu, 13 Jun 2024 at 20:07 wwwebgainss ***@***.***> wrote: For me still blank screen on LG webos. Is there any workaround to fix this? — Reply to this email directly, view it on GitHub <#925 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AW4IR2NSTUV2XRIMUELKKWDZHGYU3AVCNFSM6AAAAAARGAPSZOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRVHE2TENZWGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[pauliusguzas]

Try using 1.0.0-rc.19 version of rnv, on that version this issue is fixed on most devices

[ali-sao]

For whomever still stuck with this. I created a script to re-transpile your main.xxxxxxxx.js so it overcome the nullish coalescing operator improper transpilation and to copy the app.css file inside your build/static folder (no overrides are working), to link it properly into your html file.

create a new file, call it transpile.js :

const fs = require('fs');
const path = require('path');
const { exec } = require('child_process');

// Define the exact path where the JS file and CSS file are generated
const targetDir = path.join(__dirname, 'platformBuilds', 'app_webos', 'build', 'static', 'js');
const htmlFilePath = path.join(__dirname, 'platformBuilds', 'app_webos', 'build', 'index.html');
const cssFilePath = path.join(__dirname, 'platformBuilds', 'app_webos', 'app.css');
const cssDestDir = path.join(__dirname, 'platformBuilds', 'app_webos', 'build', 'static');

// Function to search for main.xxxxxxxx.js file
function findMainJsFile(dir) {
  const files = fs.readdirSync(dir);
  return files.find(file => /^main\.[a-zA-Z0-9]+\.js$/.test(file));
}

// Find the main JS file in the target directory
const mainJsFile = findMainJsFile(targetDir);

if (mainJsFile) {
  const inputFilePath = path.join(targetDir, mainJsFile);
  const outputFilePath = inputFilePath; // Overwrite the original file

  // Define the Babel transpilation command
  const babelCommand = `npx babel ${inputFilePath} --out-file ${outputFilePath} --config-file ./babel.postbuild.config.js`;

  console.log(`Transpiling ${inputFilePath}...`);
  exec(babelCommand, { cwd: __dirname }, (err, stdout, stderr) => {
    if (err) {
      console.error(`Error during transpilation: ${err}`);
      return;
    }
    if (stderr) {
      console.error(`Babel stderr: ${stderr}`);
    }
    console.log(`Successfully transpiled ${outputFilePath}`);

    // Edit the HTML file to include app.css
    if (fs.existsSync(htmlFilePath)) {
      let htmlContent = fs.readFileSync(htmlFilePath, 'utf8');
      if (!htmlContent.includes('<link rel="stylesheet" href="./static/app.css"/>')) {
        htmlContent = htmlContent.replace(
          '<head>',
          '<head><link rel="stylesheet" href="./static/app.css"/>'
        );
        fs.writeFileSync(htmlFilePath, htmlContent, 'utf8');
        console.log(`Updated ${htmlFilePath} to include app.css`);
      }
    } else {
      console.error(`${htmlFilePath} does not exist.`);
    }

    // Copy app.css to the static folder
    if (fs.existsSync(cssFilePath)) {
      fs.copyFileSync(cssFilePath, path.join(cssDestDir, 'app.css'));
      console.log(`Copied ${cssFilePath} to ${cssDestDir}`);
    } else {
      console.error(`${cssFilePath} does not exist.`);
    }
  });
} else {
  console.error('main.xxxxxxxx.js file not found in the directory.');
}

Then create a new babel config file, call it babel.postbuild.config.js (you need to npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev ):

module.exports = {
    presets: [
      ['@babel/preset-env', {
        targets: "> 0.25%, not dead"
      }]
    ],
    plugins: ['@babel/plugin-proposal-nullish-coalescing-operator'],
    compact: false  // Disable compacting even for large files
  };

then let node execute the file after your release command. inside npm package.json scripts, do something like :

"scripts": {
        "releaseWebOS": "npx rnv build -p webos -s release && node transpile.js",
    },

Lastly, npm run releaseWebOS to build a release build and re-transpile the bundle

@DinaSZH @pavjacko

[pauliusguzas]

@ali-sao thanks for comment, the above you tested of what version of rnv? 1.1.0 should have this working out of the box

[ali-sao]

Hello @pauliusguzas , I am already on 1.1.0. still seeing the error on webos 4.0