search

octopitus / rn-sliding-up-panel

Draggable sliding up panel implemented in React Native https://octopitus.github.io/rn-sliding-up-panel/
MIT License
929 stars 157 forks source link

React-native-web / nextjs - You may need an appropriate loader to handle this file type, #187

Open chas13 opened 3 years ago

chas13 commented 3 years ago

Hi there,

I installed react-native-web in my NextJS project so that I could use rn-sliding-up-panel. However, I am getting the below error:

`error - ./node_modules/rn-sliding-up-panel/SlidingUpPanel.js 37:19 Module parse failed: Unexpected token (37:19) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | class SlidingUpPanel extends React.PureComponent {

static propTypes = { | height: PropTypes.number, | animatedValue: PropTypes.instanceOf(Animated.Value), wait - compiling...`

I followed the with-react-native-web example https://github.com/vercel/next.js/tree/master/examples/with-react-native-web

Any help would be appreciated.

chas13 commented 3 years ago

I was able to resolve that by adding this in my next.conf.js 

config.module.rules.push({
  test: /@?(rn-sliding-up-panel|SlidingUpPanel).*\.(ts|js)x?$/,
  use: defaultLoaders.babel,
  include: [path.resolve(__dirname, "node_modules")],
})
chas13 commented 3 years ago

I am left with this error:

SyntaxError: Cannot use import statement outside a module

octopitus commented 3 years ago

Can you try adding this babel plugins to your project? https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

chas13 commented 3 years ago

Hi @octopitus, thank you for your help. I added the plugin but I am still getting the following error :( 


/root/box1/node_modules/rn-sliding-up-panel/SlidingUpPanel.js:1
import React from 'react'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1053:16)
    at Module._compile (internal/modules/cjs/loader.js:1101:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at eval (webpack-internal:///rn-sliding-up-panel:1:18)
    at Object.rn-sliding-up-panel (/root/box1/tripfinder/.next/server/pages/rn.js:206:1)
    at __webpack_require__ (/root/box1/tripfinder/.next/server/pages/rn.js:29:31)
event - build page: /next/dist/pages/_error

I've been trying to resolve this since yesterday. Thank you again for your help.

chas13 commented 3 years ago

I was able to kind of resolve that after seeing this https://github.com/vercel/next.js/discussions/18029

But now I get Cannot read property 'style' of undefined


TypeError: Cannot read property 'style' of undefined
    at eval (webpack-internal:///./node_modules/rn-sliding-up-panel/SlidingUpPanel.js:534:97)
    at Module../node_modules/rn-sliding-up-panel/SlidingUpPanel.js (/root/box1/tripfinder/.next/server/pages/rn.js:104:1)
    at __webpack_require__ (/root/box1/tripfinder/.next/server/pages/rn.js:23:31)
    at eval (webpack-internal:///./shared/components/Demo.js:12:77)
    at Module../shared/components/Demo.js (/root/box1/tripfinder/.next/server/pages/rn.js:200:1)
    at __webpack_require__ (/root/box1/tripfinder/.next/server/pages/rn.js:23:31)
    at eval (webpack-internal:///./pages/rn.js:11:80)
    at Module../pages/rn.js (/root/box1/tripfinder/.next/server/pages/rn.js:188:1)
    at __webpack_require__ (/root/box1/tripfinder/.next/server/pages/rn.js:23:31)
    at /root/box1/tripfinder/.next/server/pages/rn.js:91:18
chas13 commented 3 years ago

Still trying to get this to work with no luck so far :(