Support for Web

[TNAJanssen]

Hi,

I get the following error when trying to use with expo web: Uncaught Error: Module parse failed: Unexpected token (70:41) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Is there support for expo web or is this not yet supported?

[gabrieldonadel]

Hi @TNAJanssen, expo web is still not but I can have a look into this weekend

[gabrieldonadel]

Hi @TNAJanssen, I'm currently working on a fix for this but I've found a temporary solution that you can apply to your project while I work on a new version of rn-material-ui-textfield.

It seems that the version of Webpack used by Expo doesn't support nullish coalescing, so we need to run rn-material-ui-textfield through Babel first. Here's an example code you can apply to your webpack.config.js

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["rn-material-ui-textfield"],
      },
    },
    argv
  );
  return config;
};

[TNAJanssen]

@gabrieldonadel At least it render now instead of crashing, only the label is off the screen (it's too far to the left).

See the attached screenshot.

[TNAJanssen]

left: -100%; width: 200%; padding-left: 50%;

That seems to be the issue

[gabrieldonadel]

left: -100%; width: 200%; padding-left: 50%;

That seems to be the issue

Thanks for the investigation @TNAJanssen, it seems that supporting Expo web might require a couple more changes than I initially thought, but if you managed to fix this PRs are definitely welcome.

Regarding the nullish-coalescing operator parsing error I've just released version 1.0.8 which includes a fix for it and the dangerouslyAddModulePathsToTranspile work around should no longer be necessary.

[TNAJanssen]

@gabrieldonadel i just opened a PR, the have moved the styling logic for native apps to styling.native.js and looked at the logic of MUI.com, they use a transform-origin of "top left". This seems to fix the issue, together with removing the left, padding and width.

[gabrieldonadel]

I'm closing this as v1.0.9 has just been released