mmazzarolo / react-native-universal-monorepo

React Native boilerplate supporting multiple platforms: Android, iOS, macOS, Windows, web, browser extensions, Electron.
MIT License
1.7k stars 150 forks source link

Webpack error on Windows #12

Closed OkancanCosar closed 2 years ago

OkancanCosar commented 2 years ago

Hello, first of all thank you very much for this guide. It was really good. But I'm stuck at one place. After completing the mobile and web installations, I get an error when I start it with "yarn web:start". I've created a repository and added the error screenshot to readme.md so you can test the faulty code.

https://github.com/OkancanCosar/react-personal-monorepo

Thank you for your help :)

mmazzarolo commented 2 years ago

Hey @OkancanCosar ! Thanks for reporting :) I assume you're on Windows, right? At a first glance, it looks like the issue is caused by getWebpackTools not setting correctly the slashes? I don't have a windows machine around, but could you try changing the workspace (in packages/web/node_modules/react-native-monorepo-tools/src/get-webpack-tools.js) variable referenced in that line of code to use Windows-compatible slashes and then run yarn web:start again to see if it solves the issue?

OkancanCosar commented 2 years ago

hi, sorry for late response. I have no experience with webpack. That's why I'm asking for your help again. I looked where you said. I edited the babelLoader.include list. But this time I get the error

"Module not found: Can't resolve '@my-app/app' in 'C:\Users\ENFOTEK25\Desktop\my-app\packages\web\src'". 

I updated the repository I mentioned above. You can see the details there.

mmazzarolo commented 2 years ago

@OkancanCosar I've found the issue :) It's actually a mistake I've made in the tutorial. Could you please rename packages/app/src/app.js to packages/app/src/index.js? It should fix the issue. You should also add a "logo" image to packages/app/src/logo.png. Thanks for reporting, I'll update the blog post 👍

OkancanCosar commented 2 years ago

oh I think Im blind. Thank you for everything. works well

OkancanCosar commented 2 years ago

i was so disturb to you but when running android, getting this.

error: Error: Unable to resolve module react from C:\Users\ENFOTEK25\Desktop\my-app\packages\app\src\index.js: react could not be found within the project or in these directories:
  ..\app\node_modules
  ..\..\node_modules  

react couldnt found. actually react inside ../../../node_modules right?

kthompson commented 2 years ago

Hey @OkancanCosar ! Thanks for reporting :) I assume you're on Windows, right? At a first glance, it looks like the issue is caused by getWebpackTools not setting correctly the slashes? I don't have a windows machine around, but could you try changing the workspace (in packages/web/node_modules/react-native-monorepo-tools/src/get-webpack-tools.js) variable referenced in that line of code to use Windows-compatible slashes and then run yarn web:start again to see if it solves the issue?

I worked around this issue by doing the following in my craco.config.js(very hacky and not a permanent solution):

      webpackConfig.module.rules[1].oneOf[2].include =
        webpackConfig.module.rules[1].oneOf[2].include.map(include => 
            include.match(/^[A-Za-z]:/) ? include.replaceAll('/', '\\') : include
        )
mmazzarolo commented 2 years ago

@kthompson the code you're patching is defined here https://github.com/mmazzarolo/react-native-monorepo-tools/blob/621c3e44c34999b9333ba84d3584c46849f0020b/src/get-webpack-tools.js if you'll ever wanna try tackling it with a PR 👍