Expo and build for web fails

[dackom]

Hello

I just started a new expo project today. Managed flow, empty js project. I added dripsy and few other stuff, it builds and works correctly in native versions, on iOS simulator at least. But web version doesn't build and I am getting this:

Failed to compile:

Module parse failed: Unexpected token (15:12)
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
|     // if (options) setDripsyOptions(options)
|     const ResponsiveContextProvider = Platform.OS === 'web' ? MediaContextProvider : React.Fragment;
>     return (<ResponsiveContextProvider>
|       <DripsyContext.Provider value={dripsyOptions}>
|         <ThemeUIProvider {...props}/>

node_modules/@dripsy/core/build/provider/fresnel.js 17:29
Module parse failed: Unexpected token (17:29)
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
| });
| const ssrStyleReset = createMediaStyle();
> const SSRStyleReset = () => (<style type="text/css" dangerouslySetInnerHTML={{ __html: ssrStyleReset }}/>);
| export { SSRMediaQuery, SSRStyleReset, ssrStyleReset, MediaContextProvider };
| //# sourceMappingURL=fresnel.js.map

... and few more similar errors...

Package json dependencies:

 "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.9",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.4",
    "axios": "^0.21.1",
    "dayjs": "^1.10.4",
    "dripsy": "^1.5.5-alpha.6",
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "firebase": "^8.3.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.2",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  }, 

Web version is working correctly, until I import any dripsy component... Any ideas?

[nandorojo]

Could you try v1.4?

[dackom]

Yup, it works with 1.4. Thanks.

[nandorojo]

This might be due to using expo module scripts. Will have to investigate.

[nandorojo]

Could you please upgrade to the latest and try doing this:

yarn add -D @expo/webpack-config

Create a custom webpack.config.js file:

const createExpoWebpackConfigAsync = require('@expo/webpack-config')

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: { dangerouslyAddModulePathsToTranspile: ['dripsy', '@dripsy'] },
    },
    argv
  )

  return config
}

Please let me know if this solves it!

[dackom]

It's working now. Thank you.

[nandorojo]

Sounds good! If you run yarn add dripsy, I just released a version with improved web performance.