Import into react-native is broken

[vanjaoljaca]

I'm having trouble getting this to load into a mobile app, I think it is incorrectly detecting the environment and using some incompatible libraries.

npx create-expo-app MyAwesomeApp
cd MyAwesomeApp
npx expo install adze

I tried to workaround with polyfills but couldn't get it working

[AJStacy]

Hi @vanjaoljaca , you are correct. This is a known issue that needs to be addressed and you are correct that it is related to environment detection. It was mentioned previously in this ticket: #175

I will leave this ticket open as it directly addresses the bug in question.

[AJStacy]

So, after investigation, the issue is related to commonjs vs esm modules. Chalk 5, which is what Adze uses by default is ESM only. Expo tries to bundle Adze using commonjs, and then explodes when it tries to bundle chalk. There is no solution to resolving this issue directly in Adze. The solution is to add a small overrides declaration in package.json to use Chalk v4 vs the default v5 that comes with Adze.

Add this to your package.json.

{
  "overrides": {
     "adze": {
       "chalk": "^4.1.2"
     }
  }
}

I will be putting these directions in the documentation under the FAQ's section which should solve this issue for expo users.

[vanjaoljaca]

Thanks for investigating. Chalk override fixed most of the issues, though there were still two adze code changes I had to do. I'm not sure how these would be generalized to not require manual node_modules hacking.

in global.js:32

/**
 * Validates that the current environment is `Window`.
 */
export function isBrowser() {
    return false;
    // return typeof window !== 'undefined' && !isDeno();
}

in util.js:38 downgrading to chalk v4 requires a small change

import Chalk from 'chalk';
// ...
export function applyChalkStyles(str, styles) {
    // Force chalk colors
    // const chalk = new Chalk();
    return styles.reduce((acc, style) => {
        return Chalk[style](acc);
    }, str);
}

for yarn, package.json overrides is written as:

"resolutions": {
    "adze/chalk": "4.1.2"
  },

[AJStacy]

@vanjaoljaca , why did you need to comment this code block out?

/**
 * Validates that the current environment is `Window`.
 */
export function isBrowser() {
    return false;
    // return typeof window !== 'undefined' && !isDeno();
}

What issue did that resolve for you?

[vanjaoljaca]

without that change I get errors because _glbl.navigator.userAgent is undefined

global.js:75

/**
 * Validates the current environment is Firefox.
 */
export function isFirefox() {
    const _glbl = globalThis;
    if (envIsWindow(_glbl)) {
        return _glbl.navigator.userAgent.includes('Firefox');
    }
    return false;
}

constants.js:173

/**
 * Default log configuration for warn logs.
 */
export function getWarnConfig(overrides = {}) {
    return {
        levelName: 'warn',
        level: 2,
        style: `font-size: 12px; border-radius: 4px;  background: linear-gradient(to right, #fff, #fff0a8); color: #715100; border-color: #e3d696; padding-right: ${isFirefox() ? '44px' : '30px'};`,
        terminalStyle: ['white', 'bgYellow'],
        method: 'warn',
        emoji: '🔔',
        ...overrides,
    };
}

[AJStacy]

Thank you. That's helpful. Expo is somehow thinking window exists when it doesn't. I'll see if I can replicate that issue and resolve it.

[vanjaoljaca]

ah yes I see envIsWindow maps to isBrowser, which is how I ended up making isBrowser return false

export function envIsWindow(_) {
    return isBrowser();
}

[tiagobnobrega]

Hi... I was experimenting with picocolors instead of Chalk to address some of the issues I found. I also spotted the isBrowser check issue. I created this PR to replace Chalk and fix some of these issues. Not sure that using piccocolors is the direction you want to take, but The PR should at least be insightful to some of the issues when running on Hermes/Expo

Here's the link to the PR: #181

[AJStacy]

I have merged @tiagobnobrega 's changes from his PR. @vanjaoljaca , can you confirm that this has resolved your issues?

[vanjaoljaca]

Thanks @AJStacy this worked great. Thanks @tiagobnobrega as well