Module parsing fails on import

[TheCodeSummoner]

Error:

./node_modules/react-navigation-shared-element/build/SharedElement.js 6:7
Module parse failed: Unexpected token (6:7)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| class SharedElement extends React.Component {
>   node = null;
|   sharedId = "";
|   sceneData = null;

Deps:

"react-native-shared-element": "^0.8.2",
"react-navigation-shared-element": "^3.1.3",

Code causing failure:

import 'react-navigation-shared-element/build/v4';

I'm not very good with React yet, so I don't really know what would cause this. I'm using react-native-web. All I'm trying to do is to use the shared element navigator by replacing const Stack = createStackNavigator();. I've used yarn to install the packages.

Note: When calling import 'react-navigation-shared-element'; I get something similar:

./node_modules/react-navigation-shared-element/build/SharedElementRendererData.js 17:9
Module parse failed: Unexpected token (17:9)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| export default class SharedElementRendererData {
>   scenes = [];
|   updateSubscribers = new Set();
|   sharedElements = null;

[whck6]

What's your react-navigation version?

[TheCodeSummoner]

@whhotw

"@react-navigation/native": "^6.0.2",
"@react-navigation/stack": "^6.0.7",

Would you suggest a downgrade?

Here's a full list of my deps:

"dependencies": {
    "@react-native-firebase/app": "^12.7.4",
    "@react-native-firebase/auth": "^12.7.4",
    "@react-native-firebase/firestore": "^12.7.4",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.7",
    "firebase": "^9.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native": "^0.65.1",
    "react-native-dotenv": "^3.2.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.6.0",
    "react-native-toast-notifications": "^3.1.1",
    "react-native-web": "^0.17.1",
    "react-native-web-linear-gradient": "^1.1.2"
  }

[TheCodeSummoner]

I still get:

./node_modules/react-navigation-shared-element/build/SharedElement.js 6:7
Module parse failed: Unexpected token (6:7)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| class SharedElement extends React.Component {
>   node = null;
|   sharedId = "";
|   sceneData = null;

after downgrading to:

"@react-navigation/native": "5.9.8",
"@react-navigation/stack": "5.14.9",

[IjzerenHein]

I think this has to do with how you setup react-native-web in your project. The output in build uses modern JavaScript features which are not supported by your bundler setup. You probably need to upgrade your setup to support there features.

An alternative could be to use Expo to bootstrop your project. It will generate a project with support for react-native-web build in. You can then eject it to see how the web bundling is configured.

[TheCodeSummoner]

Thanks @IjzerenHein, I will try to use webpack instead of Metro and see if this changes anything. Unless you'd recommend a different bundler.

[TheCodeSummoner]

Thanks, @IjzerenHein, the library seems to work with webpack.

Unfortunately, the animations don't really work out of the box. Is there a place I can ask for some help on adding a simple move animation to a View element? It contains TextInput though, and I'm not sure if this is supported.

[IjzerenHein]

The web-implementation is not finished and highly experimental. I do not recommend using it until it has been completed

[TheCodeSummoner]

Ok. Since the original issue is fixed through using Webpack, I will close the issue, and continue observing the development process (and maybe try to achieve desired results through other means). Thank you for your help.