DevAppContainer.js: Unexpected token, expected "," (6:13)

Expo SDK
1
  1. SDK Version: 36
  2. Platforms(Android/iOS/web/all): Android, iOS (Dev mode)

I’ve been trying to compile my app, yet every time I try to run it in Dev Mode via LAN, the Expo NPM module fails to run. I receive a message like this:

SyntaxError: ./my-app/node_modules/expo/build/environment/DevAppContainer.js: Unexpected token, expected "," (6:13)

  4 |     render() {
  5 |         return (<>
> 6 |         {this.props.children}
    |              ^
  7 |         <DevLoadingView />
  8 |       </>);
  9 |     }

or this:

SyntaxError: ./my-app/node_modules/expo/build/launch/withExpoRoot.js: Unexpected token, expected "</>/<=/>=" (26:28)

  24 |         if (__DEV__) {
  25 |             return (<RootErrorBoundary>
> 26 |           <AppRootComponent {...combinedProps}/>
     |                             ^
  27 |         </RootErrorBoundary>);
  28 |         }
  29 |         else {
Failed building JavaScript bundle.

or this:

SyntaxError: ./my-app/node_modules/expo/build/environment/DevAppContainer.js: Unexpected token (5:17)

  3 | export default class DevAppContainer extends React.Component {
  4 |     render() {
> 5 |         return (<>
    |                  ^
  6 |         {this.props.children}
  7 |         <DevLoadingView />
  8 |       </>);
Failed building JavaScript bundle.

I’ve tried fixing these issues by modifying the node_modules files slightly, but that only presented further issues within the same folder. I’ve tried creating 2 new apps to test if this is the case, and they both worked, until I deleted the node_modules folder and reinstalled it for the second one. I have no idea what I’ve done wrong, or how I can fix this.

I can provide my package.json or package-lock.json upon request, it’s extremely short.

2

Hi

You definitely shouldn’t need to modify stuff in node_modules. That implies there’s some underlying problem which is why making one change just causes another error to show up.

Did you upgrade this app from an earlier SDK or was it newly created on SDK 36?

I suspect there’s some caching going on. You might want to try removing node_modules and running npm install again. Then run expo start -c.

Also, what version of expo-cli are you running?

3

Thank you for your quick response.

I tried modifying stuff in node_modules to see if I could narrow down the problem, but a simple whitespace change changed the behaviour of the compilation. I also tried changing <></> to <React.Fragment /> elements to no avail.

I originally built the app in SDK 35 and upgraded it to SDK 36. The issue was present in both SDKs, across Mac and PC computers and on iOS and Android. I’m running Expo CLI version 6.13.1.

I’ve tried rm -rfing and re-installing node_modules a few times now. I didn’t have this issue until my first reinstall; for my colleagues, it was present throughout. I’ve also tried expo start -c to no avail. I don’t believe it’s a caching issue, as it was present on the devices of my colleagues as well on their first installation.

The files are .js rather than .jsx. I know that filename shouldn’t have any effect, but could it be an issue with Babel/React recognizing the file?

4

A quick update (without progress): I deleted node_modules, moved my src folder outside the Expo project, and the issue is still present. It looks like it’s definitely an issue with Expo and my source code is likely not affecting it.

5

It’s a very strange problem.

Do you also have the same problem if you expo init a new blank app?

Do you perhaps have some sort of global babel config that might be interfering with your app?

If you expo init a new blank SDK 36 app, compare the app.json, package.json, babel config etc. with the corresponding files from your app to see if that helps to figure out what’s wrong.

6

I tried to create a new blank app successfully. From there, I added in each npm package with an rm -rf node_modules && npm i && npm start every time. Every package installed successfully. Finally, I copied over my src folder and it worked. I even copied over the Babel config and it ran perfectly.

Is it possible that there’s an issue with the file name? It’s so weird that I can’t recreate this on any file other than one named bunsen-dating-app/.

7

if you can share an example of an app that reproduces the problem it would be most helpful!

8

Hello, here is a branch of the app that is not working: https://github.com/WulffHunter/bunsen-branch Let me know if this helps! It was all working fine until I modified the app.json name.

9

the problem is that you added an additional babel plugin in babel.config.js: ['@babel/plugin-transform-typescript', { allowNamespaces: true }] - typescript is already stripped out by default in react-native / expo. when you customize the babel config you should make sure you know exactly what you’re trying to do and test the change afterwards, in order to do so you need to restart the expo / metro server and clear the cache. shift+r in expo-cli will do that.

it looks like the reason you enabled it was because of the use of namespace in authentication.ts. keep in mind that as the error message states support for namespaces in babel’s typescript plugin are only supported experimentally.

10

That worked! Thank you so much. Do we have any idea when namespaces are going to be fully integrated into Babel/Expo?

Happy Holidays!

11

no idea, we are not working on that, it’s up to the typescript/babel teams or community members like yourself :slight_smile:

12

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.