Cannot include third party packages like react-native-web-lists #5443
Comments
tychovbh
changed the title
tychovbh
changed the title
tychovbh
changed the title
timneutkens
added
help wanted
good first issue
|
I've struggled with this for a couple of hours too. Specifically, the fix for (7) is to use next-transpile-modules. Also, you shouldn't need to explicitly define babel loader for js files; it was causing a bunch of problems that went away when I removed it from the config and just relying on the defaults. Here's our const path = require('path')
const withImages = require('next-images')
const withTM = require('next-transpile-modules')
const withTypescript = require('@zeit/next-typescript')
module.exports = withImages(
withTypescript(
withTM({
transpileModules: [
'react-native-elements',
'react-native-paper',
'react-native-ratings',
'react-native-safe-area-view',
'react-native-status-bar-height',
'react-native-vector-icons',
],
webpack(config, options) {
return {
...config,
module: {
...config.module,
rules: [
...config.module.rules,
{
test: /\.ttf$/,
loader: 'url-loader', // or directly file-loader
include: path.resolve(
__dirname,
'node_modules/react-native-vector-icons'
),
},
],
},
resolve: {
...config.resolve,
extensions: [
'.web.ts',
'.web.tsx',
'.ts',
'.tsx',
'.web.js',
'.web.jsx',
'.js',
'.jsx',
...config.resolve.extensions,
],
alias: {
...config.resolve.alias,
'mobx-react/native$': 'mobx-react',
'react-native$': 'react-native-web',
},
},
}
},
})
)
)Hope it helps! |
|
@petrbela thanks for this, super helpful. Did you have to do anything else special to get react-native-vector-icons working? I believe it's having trouble resolving the
which is just importing... was just wondering if you had to do anything else to get it working in rnw + nextjs. Thanks in advance. |
|
@followbl This looks like it's trying to pull native modules as it probably still thinks it's a React Native project, not web. Make sure you have the alias set up: alias: {
...config.resolve.alias,
'react-native$': 'react-native-web',
},Also, inject the stylesheets as described in https://github.com/oblador/react-native-vector-icons#web-with-webpack |
|
yea, you're right, it's not resolving to the proper module. wasn't able to solve it...pretty positive it's related to this. appreciate the response 😺 |
|
@petrbela I followed your guide but without success , Please check my repo You will be be my hero if can help me . I got this error Failed to compile |
|
@abdullah-almesbahi A lot of things have changed since I posted this. Next.js has now built-in support for TypeScript, and most other things shouldn't need extra compilation steps either. There's an officially maintained example of using Next.js with RNW at https://github.com/zeit/next.js/tree/master/examples/with-react-native-web which I recommend you check out first. |
|
@petrbela I checked and tried it , I got the following errors And this is my next.config.js I'll be really thankful if you just give me a hint or workaround |
|
@abdullah-almesbahi Hmm I'm not sure off the top of my head what the problem/solution might be in your case. Btw are you using expo? They have their own Next.js integration https://docs.expo.io/versions/latest/guides/using-nextjs/ |
|
Hello, this my next.config.js and finally it works after struggle few hours to setup the config. and this is my babel.config.js hope it helps. |
|
@kucira , i tested your config, but don't work to me, are you using also the react-native-elements ? this is my config and the error i have : #858 (comment) |
|
@aethiss yes, i also using the react native elements. Maybe you can try clone this repository and run the project https://github.com/kucira/nextjs-rnweb-rnelements |
|
Tnx a lot @kucira , i tested your repo and works. Appreciated a lot ! |
|
Closing as we have proper examples with https://github.com/vercel/next.js/tree/canary/examples/with-expo |
|
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Examples bug report
Example name
with-react-native-web
Describe the bug
How can I include react-native packages to get them to work? In the React version of react-native-web (create-react-native-app my-app --with-web-support). React includes react-native-packages. You can see this in webpack.config.js line 15 something like:
Every time I added a new library I added a row here. So for react-native-web-lists (https://github.com/react-native-web-community/react-native-web-lists):
path.resolve(appDirectory, 'node_modules/react-native-web-lists')after that it just worked.In nextjs with-react-native-web I cannot get packages like react-native-web-lists to work (this is not the only one). I tried including this in next.config.js
But this results in Failed to compile error. Since i'm a noob in webpack I really need some help here?
To Reproduce
Expected behavior
To be able to use packages like react-native-web-lists as in React react-native-web.
The text was updated successfully, but these errors were encountered: