It seems that an import such as

import styled from 'styled-components/native';

is being treated as an npm package in it's own right.

Snack displays this toast:

and renders with this error:

This is causing the Styled Components demo to fail:
https://snack.expo.io/@danielmschmidt/styled-components

The demo is referenced in the styled-components react native docs.

I am having trouble with snack being different than my current expo project that use:

└─┬ @expo/[email protected]
  └─┬ [email protected]
    └── [email protected] 

For some reason, the minification is breaking the web app when used on snack.expo.io

As an example https://snack.expo.io/@kopax/restless-turkish-delight

When I import a project from GitHub that's using version 38 of the SDK, it loads up in snack using version 37. I'm using some of the changes from 38, so this makes the application crash.

Is there a way to force Snack to load with a particular version of the SDK (e.g., via a query string parameter perhaps), or some configuration I can set in my repository?

My primary use case is being able to share the link with people for them to play with a demo. Seeing the red screen of death and then manually changing the SDK version and reloading is not the ideal workflow.

Edit:
Link to reproduction example (this is a fresh blank project built with Expo): https://snack.expo.io/@git/github.com/joebochill/testsnack38
Expo version specified in package.json: https://github.com/joebochill/testsnack38/blob/master/package.json#L11

This is a critical bug as Expo Snack won't load in any browser that hasn't visited snack.expo.io before. So almost everybody is affected, especially people trying Expo Snack for the first time.

(This issue has originally been posted to Expo's main repo: github.com/expo/expo/issues/2646

Steps to Reproduce

1. Make sure you open a new private browser tab
2. Open https://snack.expo.io

Expected Behavior

Snack Expo is successfully opened

Actual Behavior

Reproducible Demo

https://snack.expo.io in private browser tab

Importing (newly?) published modules will fail with the following error

Request failed with status 403: undefined

I've tried 2 ways: creating from a scratch and importing from github.

Sample

I've been seeing the following a lot while working on my project:

• I make some changes in one of the project files
• The Save button lights up (presumably indicating that I now have unsaved changes)
• I click the Save button
• The "Your Snack was saved" modal pops up
• I dismiss the modal
• At this point, even though I have only just dismissed the modal and have not made any further edits, the Save button counterintuitively lights back up by itself almost immediately. I am able to press it again, at which point I get the modal again. After that second save, the button stays dimmed until I make a new change.

This seems wrong, but more importantly, it feels very bad.

Example: https://snack.expo.io/@smitel/typeorm-snack-oom

I took the sample snack, added typeorm/browser to the imports and package.json and now Chrome runs out of memory with an 'Aw, Snap!' when trying to load it. Watching it in task manager shows it to peak at 6GB.

It doesn't seem to happen when the blue warning of slow network appears.

Also doesn't seem to happen with Firefox.

Any clue?

My problem is that a part of my code does not work in my snack. But the same code works when copied in another snack. When I downloaded the code for both these projects it seems the only difference is the sdkVersion which is specified in app.json file. (My snack is using "sdkVersion": "32.0.0" while the snack where the code works is using "sdkVersion": "26.0.0".

The app.json file is not visible when I browse to the snack link. It seems it can only be accessed when I export the file. Now I know I could run the app locally with the changed version but I would like to continue working in the snack online environment. Is there a solution to this?

Thanks :)

You're probably fully aware about this already, but scanning QR codes with the camera on an iOS device works perfectly. Despite the message:

* As of March 29, 2018 , the Expo client on iOS can no longer scan QR codes. Read more.

I don't know if there has always been a semantic glitch, i.e. that the camera always has worked on iOS but not the Expo client. However, it's a pity to mislead as it works fine if you just scan with the camera app.

I'm on an iPhone SE and iOS 12.1.

Charlie and I noticed that the custom fonts on Snack aren't resolving. Font.loadAsync is rejected with the error:

Unexpected type number expected a URI string or Asset from expo-asset

You can find an example snack here. I think the code below should just work without changes on Snack, right?

import React from 'react';
import { Text, View } from 'react-native';
import * as Font from 'expo-font';

export class ClassExample extends React.Component {
  state = {
    fontLoaded: false,
  };

  async componentDidMount() {
    try {
      await Font.loadAsync({
        'OpenSans-Regular': require('../assets/OpenSans-Regular.ttf'),
      });
      console.log('ClassExample: font loaded!');
    } catch (error) {
      console.log('ClassExample: font error!');
      console.error(error);
    } finally {
      this.setState({ fontLoaded: true });
    }
  }

  render() {
    return (
      <View>
        <Text
          style={{
            fontFamily: 'OpenSans-Regular',
            paddingTop: 100,
            paddingHorizontal: 15,
            fontSize: 35,
          }}>
          Open Sans Regular
        </Text>
      </View>
    );
  }
}

Hello Everybody,

First thanks for the very good job, efforts and your valuable time put into this toolkit.

I followed steps outline in the readme but clone the repo, issued commands, etc...
Then I issue the yarn start command, the server start but the hotel app crashed. Please see below the screenshot of it:

I think it is the following: ==> /var/www/html/site6/snack-web/node_modules/nullthrows/nullthrows.js:9
throw error;
^

Please help!
Hear from you soon!
Many thanks for your continuous support.

God blesses!!!

Best regards,
Sanyaade

Hi,
After cloning this repo. I'm facing an issue where I'm getting (failed)net::ERR_EMPTY_RESPONSE for app.34240727.chunk.js.

This script is injected in /web-player/index.html?initialUrl=... html file and script file is mandatory to preview. Attaching screenshot below:

I'm using SNACK_APP_URL = http://s3.us-west-1.amazonaws.com/snack-web-player/36

Please fix this issue

Expo is a great project. Could you kindly provide a license file? It could be an open-source license like AGPL/GPL/MIT, or you can just make it proprietary. This can help developers avoid legal pitfalls?

I would like to lock orientation option like I do with local project

"orientation": "portrait" 

https://docs.expo.io/versions/latest/workflow/configuration/#orientation

i not know why i not can import a Git repository
it is show us this An error occurred during import. This could be because the data provided was invalid, or because the repository referenced is not a properly formatted Expo project.
but actually it is really use expo so tell me the reason okay thanks

I am trying to import git repository, but i get the following error: "An error occurred during import. This could be because the data provided was invalid, or because the repository referenced is not a properly formatted Expo project."

Git repository: https://github.com/ariel-narciso/eco-exploracao

The project was created with the following command: expo init 'nameProject'

Subj. On v31 snack works well for now

this is my repo: https://github.com/gpbaculio/cs50project3.git

i've imported git repos until i updated my expo, help?

Something in my project is triggering the #130 'Element type is invalid' React error, which is supposedly caused by incorrect import syntax. But the error message gives nothing that I can understand as a clue re: where the error might be. It would be....really, really nice if that clue was there (or was easier to decipher, if it is).

Thank you for a super useful tool!

when I clone the repo and start it the web preview does not show.

Terminal Output

λ ~/Desktop/Tests/snack-web/ master* yarn start                                   
yarn run v1.21.1
$ if-env NODE_ENV=production && yarn start:prod || yarn start:dev
$ yarn domain
$ hotel start && hotel add http://localhost:3011 --name snack.expo
Started http://localhost:2000
Create ~/.hotel/servers/snack.expo.json
$ nodemon -e json,js,ts,tsx --watch src/server src/server/index.tsx --exec babel-node --extensions '.ts,.tsx'
[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): src/server/**/*
[nodemon] watching extensions: json,js,ts,tsx
[nodemon] starting `babel-node src/server/index.tsx --extensions .ts,.tsx`
The Snack web server is listening on http://:::3011

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3



  Error: The "SNACK_APP_URL" environment variable must be defined to proxy the Web player.
      at /home/prasanta/Desktop/Tests/snack-web/src/server/routes.tsx:145:13
      at dispatch (/home/prasanta/Desktop/Tests/snack-web/node_modules/koa-router/node_modules/koa-compose/index.js:44:32)
      at next (/home/prasanta/Desktop/Tests/snack-web/node_modules/koa-router/node_modules/koa-compose/index.js:45:18)
      at /home/prasanta/Desktop/Tests/snack-web/node_modules/koa-router/lib/router.js:346:16
      at dispatch (/home/prasanta/Desktop/Tests/snack-web/node_modules/koa-router/node_modules/koa-compose/index.js:44:32)
      at /home/prasanta/Desktop/Tests/snack-web/node_modules/koa-router/node_modules/koa-compose/index.js:36:12
      at dispatch (/home/prasanta/Desktop/Tests/snack-web/node_modules/koa-router/lib/router.js:351:31)
      at dispatch (/home/prasanta/Desktop/Tests/snack-web/node_modules/koa-compose/index.js:42:32)
      at /home/prasanta/Desktop/Tests/snack-web/node_modules/koa-compose/index.js:34:12
      at dispatch (/home/prasanta/Desktop/Tests/snack-web/node_modules/koa-compose/index.js:42:32)
      at bodyParser (/home/prasanta/Desktop/Tests/snack-web/node_modules/koa-bodyparser/index.js:95:11)
      at processTicksAndRejections (internal/process/task_queues.js:97:5)
      at /home/prasanta/Desktop/Tests/snack-web/src/server/index.tsx:63:5
      at /home/prasanta/Desktop/Tests/snack-web/src/server/sw.tsx:18:5


ℹ ｢wdm｣: wait until bundle finished: /dist/assets/bc351fd24f9bd32bc131f122d42c1a77.svg
ℹ ｢wdm｣: wait until bundle finished: /dist/assets/8d8826a0f65854e909f64c244e1230b9.svg
ℹ ｢wdm｣: wait until bundle finished: /dist/assets/d14a681a76bdb229e305aa965b54dd18.png
ℹ ｢wdm｣: wait until bundle finished: /dist/assets/d93a5d445d7b7a8be13f38362a9dcf7e.png
ℹ ｢wdm｣: wait until bundle finished: /dist/assets/9682e34e1f058feab75a232e3b9f33c6.png
ℹ ｢wdm｣: wait until bundle finished: /dist/assets/c51d82a43adccd86d66477bfc28dd39b.png

Browser Preview

snack-web-master\src\server\index.tsx:3
import path from 'path';
^^^^

SyntaxError: Unexpected identifier
at new Script (vm.js:84:7)
at createScript (vm.js:264:10)
at Object.runInThisContext (vm.js:312:10)
at Module._compile (internal/modules/cjs/loader.js:684:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
at Object. (D:\REACT\snack-web-master\node_modules@babel\node\lib_babel-node.js:234:23)
[nodemon] app crashed - waiting for file changes before starting...

The editor used in snack is pretty good actually, but it lacks some small feature that makes the development more productive. here are my suggestions:
1- Adding shortcuts, creating new files, navigating around opened files, opening the logs tab...etc. I'm using the VIM plugin, and i find myself using the mouse whenever i want to navigate between files.
2- Renaming the files or directories instantly after creating them.

Issue

Greetings. I'm trying to run the code example for React Native's Modal component but inside the web, the toggle is rendered both the modal content and the button trigger, this only happens on the web, for Android and iOs work as expected. Is this because Modal doesn't have a web implementation yet?

I attach the code I'm trying to run and some images:

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';

class App extends Component {
  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

export default App;

It looks like this on the web:

And like this on iOs for example:

Expected behavior

It should work in the web tab as expected?

Thank you 🙏

this error only occurs on snack with v 35 and 36

https://snack.expo.io/@freakcruz/blissful-popcorn

Device: (892:881) Unable to resolve module 'module://fbjs/lib/areEqual.js'
Evaluating module://fbjs/lib/areEqual.js
Evaluating module://react-native-gesture-handler/Swipeable.js
Evaluating module://components/swipeable/AppleStyleSwipeableRow.js.js
Evaluating module://components/swipeable/index.js.js

Following this guide, https://docs.npmjs.com/files/package.json#git-urls-as-dependencies, currently, it is not possible to import the github repos. I'm not sure if it is a feature incompleteness or bug or 'wont-be-a-feature'.

When import Animated from "react-native-reanimated" using expo 36 or expo 35 I'm getting the following error:

Device: (0:0) Unable to resolve module 'module://fbjs/lib/invariant.js'
  Evaluating module://fbjs/lib/invariant.js
  Evaluating module://react-native-reanimated.js
  Evaluating module://App.js.js
  Loading module://App.js

expo 34 works.

Repro:
https://snack.expo.io/@computerjazz/reanimated-bug

Thanks!

Hello,
I am trying the course CS50M to improve my knowledge about react native.
They strongly suggest your ide so I would like to know which path
do I have to enter

when your UI asks me to

"Import an Expo project from a Git repository.
Git URL"

I have tried with this URL but I always get the red error message.
"
An error occurred during import. This could be because the data provided was invalid, or because the repository referenced is not a properly formatted Expo project.
"

Thank you in advance for your reply,
Best Regards,
LP

Hey,

So I set this up on my local machine and had to do two things differently from the instructions:

1. yarn install --production=false to get dev dependencies like gulp included
2. yarn add isomorphic-fetch as it's a missing dependency

Without isomorphic-fetch I get these errors:

ERROR in ./snack/auth/withAuth.js
Module not found: Error: Can't resolve 'isomorphic-fetch' in '/Users/marcussanatan/projects/snack-web/snack/auth'
 @ ./snack/auth/withAuth.js 13:0-26
 @ ./snack/components/App.js
 @ ./snack/components/Router.js
 @ ./snack/index.js
 @ multi ./snack/index

ERROR in ./snack/auth/authManager.js
Module not found: Error: Can't resolve 'isomorphic-fetch' in '/Users/marcussanatan/projects/snack-web/snack/auth'
 @ ./snack/auth/authManager.js 57:0-26
 @ ./snack/components/App.js
 @ ./snack/components/Router.js
 @ ./snack/index.js
 @ multi ./snack/index

ERROR in ./snack/components/DeviceInstructions/SendProjectLink.js
Module not found: Error: Can't resolve 'isomorphic-fetch' in '/Users/marcussanatan/projects/snack-web/snack/components/DeviceInstructions'
 @ ./snack/components/DeviceInstructions/SendProjectLink.js 13:0-26
 @ ./snack/components/DeviceInstructions/AccountTab.js
 @ ./snack/components/DeviceInstructions/DeviceInstructionsModal.js
 @ ./snack/components/Preferences/PreferencesProvider.js
 @ ./snack/index.js
 @ multi ./snack/index

The dev dependencies produce more if not installed. Not sure if they're missing from the instructions, I missed some of the instructions, if my setup doesn't meet requirements or something else.

By the way, isomorphic-fetch is not actively developed as well, maybe something like cross-fetch which is actively maintained can be used instead?

This is so difficult to deal with, is there a workaround?

Clearly, a dismiss all button is needed. right?

When using the code generated to embed an expo snack in HTML, it only produces a blank canvas. Have tested multiple different projects and browsers. Other people seem to have this problem to. To replicate, go to snack.expo.io, save, then generate the embedded code and try to put that into a website.

When trying to run https://snack.expo.io/H1nJvH8H8 on S6 / Android 7, I receive the following error. Works fine on other devices. App has the latest version of Expo (v2.14.0, SDK 36) installed.

But this Working locally ... only i get error in snack expo ..so i think its error of snack .. any one can tell me .. what happends..??

{
"dependencies": {
"uuid": "3.3.2",
"firebase": "5.2.0",
"react-navigation": "2.6.0",
"react-navigation-header-buttons": "^1.2.1",
"firebase/firestore": "7.0.0"
}
}
firebase.firestore is not a function. (In 'firebase.firestore()', 'firebase.firestore' is undefined)
Evaluating module://Fire.js.js
Evaluating module://screens/FeedScreen.js.js
Evaluating module://App.js.js
Loading module://App.js

https://snack.expo.io/@sadikali.mm/github.com-evanbacon-firebase-instagram@@evanbacon-tutorial?session_id=snack-session-6!ZPkupfR

None of the React navigation examples working on the web for me:

All examples are giving below error:
https://reactnavigation.org/docs/drawer-based-navigation/

Device: (900:881) Attempted to assign to readonly property.
Evaluating module://@react-navigation/native.js
Evaluating module://@react-navigation/drawer.js
Evaluating module://App.js.js
Loading module://App.js

I am getting same error when I try it using the Expo appon my Android device.

Preamble

No, this is not a joke.

Expected Behavior

When I type &&, && shows up on the Snack editor.

Observed Behavior

When I type &&, || shows up on the Snack editor.

Reproduction

Because it's hard to show in a video what I type, here is a video of copying && from another program and pasting it into Snack.

System Info

Mac OS X 10.11.6
Chrome 69.0.3497.100

Diagnosis

Umm yeah, this is really weird. It seems to be caused by the typefaces Fira Mono and Fira Code. If I reduce the full font-family declaration from

font-family: "Fira Code", "Fira Mono", Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;

to

font-family: "Fira Mono", monospace;
/* OR */
font-family: "Fira Code", monospace;

I still see this issue.

But this works:

font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;

I tried it on both Safari and Chorme. Both can not show the completion suggestions. Is there any config I can tweak to get it work? Thanks

Hi. I can't find any information about which version of react-native is expo snack running. I've tried to put the version I need to package.json and got an error The package "react-native" can be imported without adding to "dependencies".
So I came looking for it here and I don't see any react-native dependency at all.
I'm confused.