Using native modules when there is no webpack.config

So from what I have read online if I want to use some modules made for react-native (not -web) I need to set an alias in my webpack.config.js … where is that supposed to be ?

From the docs I see it should be under @expo/webpack.config/webpack.config.js. or at the root but my @expo only has vector-icons and websql folders, how come?

I tried running expo customize:web, but I get a Cannot read property ‘ConfigJsonAsync’ of undefined

I am quite lost with all this …

EDIT :
As an exemple if I want to use react-native-web-maps (which uses react-native-maps) I need to add

resolve: {
    alias: {
        'react-native': 'react-native-web',
        ...
        'react-native-maps': 'react-native-web-maps',
    }
}

To my webpack config sooo what do I do?
If I try using it without webpack config, I get a Attemted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'

I have just tested this on an app newly created with expo init and I get the same error:

$ EXPO_DEBUG=true expo customize:web
Cannot read property 'readConfigJsonAsync' of undefined
TypeError: Cannot read property 'readConfigJsonAsync' of undefined
    at action (/expo-cli@3.0.10/src/commands/customize.ts:78:25)
    at Command.<anonymous> (/expo-cli@3.0.10/src/exp.ts:82:13)

But from the documentation it looks like you can get the same effect by adding @expo/webpack-config and then copying webpack.config.js to the root of your project.

So something like this might get you started:

$ yarn add --dev @expo/webpack-config
yarn add v1.17.3
[1/4] Resolving packages...
[...]
$ cp node_modules/@expo/webpack-config/webpack.config.js .

@wodin Thanks for the quick answer!
But now when I run expo r -c it tells me Cannot find module './webpack/utils/getConfigAsync’
And the expo customize:web still gives me Cannot read property ‘readConfigAsync’ of undefined
Do I need to install another package?

UPDATE : So my webpack.config.js in root (copied from @expo/webpack-config) imports from ./webpack/getConfigAsync … but if it is in the root it should not be able to access it, or is it the expected behaviour?
So I tried deleting the root webpack.config.js and bringing the modifications to @expo/webpack-config/webpack.config.js and here are the results :
TL;DR : with root webpack.config : Cannot read property ‘readJsonAsync’ of undefined
with @expo/webpack-config/webpack.config.js : Attempted import error: ‘requireNativeComponent’ is not exported from 'react-native-web/dist/index’

This is what my webpack.config.js looks like :

module.exports = async function(env = {}, argv) {
  // Fill all config values with PWA defaults
  if (!env.config) {
    env.config = await getConfigAsync(env);
  }

  const mode = getMode(env);
  let config;
  if (mode === 'development') {
    config = await developmentConfig(env, argv);
    config.resolve.alias['react-native'] = 'react-native-web';
    config.resolve.alias['react-native-maps'] = 'react-native-web-maps';
  } else {
    config = await productionConfig(env, argv);
  }

  if (env.info) {
    Diagnosis.reportAsync(config, env);
  }

  return config;
};

My bad I was actually importing the component from react-native-maps instead of react-native-web-maps in my page.
… Which leads to my second question: since I can’t expo customize:web, how do I get my apiKey set in the index.html as I don’t have one?
Tried creating manually index.html with script to google maps apikey which did nothing.

The error I get is image

By the way, setting the apikey directly in the front files is not good so what should I do about that? Is restricting the key to my website only enough? then showing the key is not a problem since it cannot be used (right?). Like with firebase where the apikey is shown but you restrict data access?

I feel like it should be in a new post by now, or even on the module github issues but it is not very lively

I see someone has created an issue for the expo customize:web problem:

It’s been fixed, so it should be in the next version of expo-cli. If you want to try it before then you could clone the expo-cli repository and try the Setting up the repository for development instructions.

As to what to do with API keys, I’m afraid I don’t know.

Thanks again, this seems quite complicated, I’m not sure I understand …
1- run git clone on expo-cli repo (anywhere? Does it have to overwrite the actual expo-cli?)
2- yarn run bootstrap: ok straightforward
3- git config commit.template .github/.COMMIT_TEMPLATE : what is this for?

And then how do I run it with my project?
expo r -c will still call the globally installed, right?

Sorry to take so much of your time but you are really saving me, I was getting quite desperate :sweat_smile:

Lots of love for you :heart:

Sorry for not giving more info up front :slight_smile:

For step 1 you just need to find a place to put it. e.g. in your home directory. Do it somewhere that does not already have a subdirectory called expo-cli and the git clone will create the expo-cli directory and put the source code within that.

Step 2, as you say, is straightforward. It takes a few minutes and spits out a bunch of output. During this “bootstrap” process it builds expo-cli based on the currently checked out version of the expo-cli source code.

Step 3 is only really needed if you want to make changes to the expo-cli source code and submit it back to the Expo developers for inclusion into the next version of expo-cli. Also yarn start is only useful if you’re going to be making changes to the expo-cli source code.

After the “bootstrap” process you should find an expo command in the node_modules/.bin/ directory. If you just run expo customize:web it will run your globally installed version of the expo command, because that will be in your PATH, while this newly compiled version will not. There are two ways to run the newly compiled version.

  1. Specify the full path when you run it, like: /Users/michael/expo-cli/node_modules/.bin/expo customize:web
  2. Add the node_modules/.bin directory to your PATH before the directory that contains the official version of the expo command. (This can be done permanently or just for the current shell session.)

You probably want to run the official version of the expo command for everything except the customize:web option, in case there are any bugs in the version compiled from the Git repository. Also, expo customize:web is not something you’re going to have to run every 10 minutes, so I would just go with the first option.

I have just tried this and was able to get it to generate a webpack.config.js (but I had to first remove the one I had copied there) and also the other files.

1 Like

Claps of honor! :clap::clap:
Thanks for the very clear details, I will try it ASAP and come back to you for the results

1 Like

Yes ! This finally worked!
I will just note some steps I had to do to make it work:
-Being on windows, the yarn bootstrap return errors when tryin to use rm -rf, I had to use git bash to make it work.
-After that it crashed because NODE_ENV was not set, this again seems to be because I am on windows environment, I fixed it by running a npm install -g win-node-env
-Ran a bit of trial and retry when using the new customize:web (references not working, errors when launching expo r -c…) I ended up deleting both root ans@expo/webpack-config’s webpack.config.js and running npm i @expo/webpack-custom again.

now it works correctly which seems weird to me since I did not reset the alias in webpack.config but well … happy :sweat_smile:
EDIT : relaunching expo, it required me to set the aliases again, so all came back together
PROBLEM SOLVED

1 Like