Make compatible for web

[otim]

Is your feature request related to a problem? Please describe.
I am working on a react-native-web project. When I naively tried to use this module inside my project I was getting the error:
Support for the experimental syntax 'jsx' isn't currently enabled

Describe the solution you'd like
I think this module is just missing the proper configuration to be used for react-native / react-native-web or classic react

Describe alternatives you've considered
Modules targeted for react web rely on things on window and/or document calls. These are not available in react native as far as I know.

Additional context
I have tried to come up with a way to compile this module to be used for web. However, I am really lacking the basics here. Nonetheless, if it helps, have a look at my attempt here: https://github.com/otim/matomo-tracker-react-native/tree/feature/react_native_web

[donni106]

Hi @otim, interesting topic. I never did some work "for" react-native-web yet, just used it in some cases. The projects i use matomo-tracker-react-native in are "app only". Making this package work for react-native-web should work, as there is nothing really special "native". We use hooks and fetches at the end. I would setup a basic react native project in the following days with react-native-web enabled, install the package, wrap the main app container to fire a trackAppStart and see what happens. I hope it brings more clarity.

[otim]

Hi @donni106! Thanks for your reply and sharing your thoughts!
Now that I thought more about it, I think it's not necessarily specific to react-native-web. It might be easier (and sufficient) to reproduce this in a pure react (web) project.
I was able to make this work by copying the source files into my project. I know this is not the clean way to do it but I lost patience and to me it proved that there is nothing in the way to make this work for web.
Thanks a lot for looking into it! If there is anything I can help you with, please let me know 🙌

[donni106]

good infos and well done 👍
but i still want to address this and keep it on my map. i will come back to you for anything, thanks.

[nickvanboven]

Any update on this, or is there a easy way to exclude the tracking for web. We have an app which is for ios/android and web. Tracking in ios and android works but web wont build. For us it not required that web also support tracking but would be nice if it would build

[donni106]

Hi @nickvanboven

web wont build

can you elaborate a bit? What are you running and what is the failing outcome? Are there logs you can share?

[nickvanboven]

@donni106 Yes of course, will provide some information this afternoon

[nickvanboven]

@donni106 When running expo start, and starting the web browser we recieve the following error

[donni106]

@nickvanboven I was able to reproduce the same error. My research shows up some webpack/babel topics. Can you show you config files used in the project? Which expo version are you using?
The following issue seems to be appropriate, although unfortunately not clearly solved: expo/expo#16673

[donni106]

I played around with webpack custom configs but without success. There is a way to merge custom configs in expo webpack configs (webpack.config.js) in the following way:

const { merge } = require('webpack-merge');
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

const matomoTrackerConfiguration = {
  test: /.*matomo-tracker-react-native.*\.(mjs|[jt]sx?)$/,
  use: {
    loader: 'babel-loader'
  }
};

// Expo expects a function so we can pass around options.
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  return merge(config, {
    module: {
      rules: [matomoTrackerConfiguration]
    }
  });
};

But as I do not understand the problem exactly at transpiling or something, I could not figure out a correct working custom config yet.

Any ideas?

[otim]

Sorry, I don't fully understand where you are going with the expo config. For completeness, I am not using expo for my react native build.

If I remember correctly, what I concluded was that there is a fundamental difference between how react native and react web projects are built. For react native, dependencies (node_modules) are built from source. This might be done by running pod update (for ios) but I am not sure. React web on the otherhand seems to expect dependencies to be pre-compiled and bundled in some specific way. I guess this needs to be done before or during publishing to npm.

It's been a while that I looked into this issue, so I might be mixing up things. Also, I am far from being an expert in all these topics, so I might be using wrong terminology here and there. Sorry about that

[donni106]

I guess this needs to be done before or during publishing to npm.

This is something I would need to look up first, never done that before. But it is a good hint, thanks @otim.

[uzun0ff]

I played around with webpack custom configs but without success. There is a way to merge custom configs in expo webpack configs (webpack.config.js) in the following way:

const { merge } = require('webpack-merge');
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

const matomoTrackerConfiguration = {
  test: /.*matomo-tracker-react-native.*\.(mjs|[jt]sx?)$/,
  use: {
    loader: 'babel-loader'
  }
};

// Expo expects a function so we can pass around options.
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  return merge(config, {
    module: {
      rules: [matomoTrackerConfiguration]
    }
  });
};

But as I do not understand the problem exactly at transpiling or something, I could not figure out a correct working custom config yet.

Any ideas?

Had the same issue, what fixed it for me was similar to this but had to add the node modules to the config path.

const { merge } = require('webpack-merge');
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

const matomoTrackerConfiguration = {
  test: /node_modules\/matomo-tracker-react-native\/src\/[a-zA-Z]+\.js/,
  use: {
    loader: 'babel-loader'
  }
};

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  return merge(config, {
    module: {
      rules: [matomoTrackerConfiguration]
    }
  });
};

[donni106]

Coming back to this, I achieved running it a few more steps further with:

const { merge } = require('webpack-merge');
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

const matomoTrackerConfiguration = {
  test: /node_modules\/matomo-tracker-react-native\/src\*.(mjs|[jt]sx?)$/,
  use: {
    loader: 'babel-loader'
  }
};

// Expo expects a function so we can pass around options.
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  return merge(config, {
    module: {
      rules: [matomoTrackerConfiguration]
    }
  });
};

The error now says: