Build failing in monorepo

[shivamsingha]

I'm getting this error. I've tried various stuffs but can't fix. I have a monorepo using workspaces and the react-native side is working well. I've setup wml and all. But gatsby is not working.

ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve '@pmmmwh/react-refresh-webpack-plugin/src/overlay' in '*******/web/.cache'

File: .cache/error-overlay-handler.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Unexpected token (14:12)

File: node_modules/@myapp/common/dist/App.js:14:12

Also the second error is really weird, it points to this

const App = () => {
    return (<>
           ~~~^~~~~
      <StatusBar barStyle="dark-content"/>

[slorber]

Hi,

Could you try to use a lower version of @expo/webpack-config (implementation detail of this plugin)

I've also had this error on newer version (maybe you just need to add the fast refresh dependency to solve it?)

On my website it works fine with

  "resolutions": {
    "@expo/webpack-config": "0.11.19"
  },

cc @EvanBacon any idea?

[shivamsingha]

Added the fast-refresh package and the first error is gone. Didn't have to lower expo version.
But I'm still getting the second error.

My App right now is just the initial react-native landing screen in a mono repo.

[slorber]

Actually I think the expo webpack config does not permit to transpile the code of @myapp/common monorepo package.

It has to define its own list of packages to transpile (like react-native-, expo- etc...), and @myapp is not in that list.

I'm going to check what we can do to solve that.

In the meantime you have 2 potential solutions:

• ensure @myapp/common is transpiled locally (ie, have "main": "dist/main.commonjs.js")
• try this package: https://www.gatsbyjs.org/packages/gatsby-plugin-compile-es6-packages/

This probably won't work if your common package has code though but could unlock you

As I'm planning to make my site a monorepo as well, I definitively want to support this setup

[shivamsingha]

Alright I got it working, kinda. Since I'm using typescript in my common repo I was able to transpile it to give commonjs modules with react.createElement. I didn't have to add anything extra.

But I've run into a problem here. Typescript doesn't copy over non-js files like images, text, etc. to the dist folder. So maybe I need use gulp for that?

But now I'm wondering is going through this much trouble worth it.

Since metro bundler doesn't work with symlinks and I'm having to use wml to copy over the common files. I think I should just drop the monorepo and have separate repos with wml copying over the common folder into both react-native and gatsby repos. That would probably be a lot less messy.

[slorber]

Great if you made it work by building the common package.

Keep in mind that there's no standard for a shared package to expose assets. Using assets require is proprietary to the bundler. It's say your shared package should not use fancy non-std loaders and you'd rather directly your assets from the consuming app, in a way that is understandable by its loader (Webpack or Metro or other...). Just a random idea but you could also provide your shared image urls through a context provider or something. This is not ideal but I don't have a solution for this, it's a problem many monorepos deal with.

People have been able to make Metro work with symlinks. In Expo I've seen this package being used: https://github.com/expo/expo/tree/master/packages/expo-yarn-workspaces

[shivamsingha]

Yeah, that's a problem. Need to figure out a way so that it works with both webpack and metro.

expo-yarn-workspaces looks interesting. Unfortunately I'm not using expo. I'll see if I can make that work.

[shivamsingha]

It's working great with gulp watch. And require assets is working well with react-native-web.