Importing nested files causes dependency error

[joebochill]

When importing a repository from github, I have two issues that have been troubling:

DevDependencies are not imported

When the package.json file is imported, it's clearing everything except for the dependencies entry. This causes problems when importing a project that uses dev dependencies. My particular case is usually for a project that includes tests and requires react-test-renderer as a devDependency. When imported the project complains that this dependency is missing. I don't want this to be installed as a regular dependency.

Importing nested files causes dependency error

When importing from somewhere other than the root of a package, snack complains that the dependency is missing and prompts to install a dependency that includes the nested folder structure. If you do this, snack works, but the project fails locally because that package does not exist in npm (405 error).

For example: Add react-native-vector-icons/MaterialIcons to package.json? Add @react-native-community/async-storage/jest/async-storage-mock to package.json?

[tcdavis]

Hi @joebochill, an explanation for the issue with nested dependencies you describe can be found here: https://github.com/expo/snack/tree/main/packages/snack-sdk-legacy#differences-between-dependencies-in-snack-and-npm We know this design is less than ideal, but haven't found a way to replicate the way local projects store dependencies on disk without sacrificing speed :/

Could you provide us with a link to a repo demonstrating the react-test-renderer issue?

[joebochill]

@tcdavis Thanks for pointing that out in the docs. My most common issue with the nested imports was with the react-native-vector-icons package, but I've managed to get around that by switching over to expo/vector-icons.

As for the devDependencies issue, here is a minimal repro: https://snack.expo.io/@git/github.com/joebochill/snack-dev-repro

And here you can see react-test-renderer in the devDependencies of package.json: https://github.com/joebochill/snack-dev-repro/blob/master/package.json#L22

The easiest way I've found around this is to just move the packages into dependencies, but in some cases that's not an option.

[IjzerenHein]

Hi! This issue has been partially fixed by #78. Test files are now ignored as they don't have a function within the Snack context.

As for your second question.

Importing nested files causes dependency error When importing from somewhere other than the root of a package, snack complains that the dependency is missing and prompts to install a dependency that includes the nested folder structure. If you do this, snack works, but the project fails locally because that package does not exist in npm (405 error). For example: Add react-native-vector-icons/MaterialIcons to package.json? Add @react-native-community/async-storage/jest/async-storage-mock to package.json?

Could you provide a working example that showcases this problem? Without it we will not be able to address it.

[joebochill]

I think @tcdavis hit that one on the head already. It sounds like you've made the conscious decision (for speed) to handle dependencies differently than NPM (everything needs to be imported from the root of the package). That just means that some projects will not be compatible with both Snack and running locally (not ideal for my use case, but I understand that Snack is not intended to be a full-scale application development tool, so it makes sense).

[IjzerenHein]

@joebochill NPM is just a package repository, it doesn't necessarily specify how things should be bundled. Snack indeed takes a different approach to how Expo CLI / RN bundle. It compiles the whole package into a single bundle so it can be distributed to the Snack runtime in realtime. dependencies of that package are usually included within that distributed bundle. With exception of a predefined list of expo- and other packages (which will be visible later once we migrate snackager to this repo). This approach is not ideal but works for most cases.

Snack does support importing files from packages though. You can for instance import react-native-gesture-handler/DrawerLayout and this will create a working bundle for you when added to the package.json of your Snack.

[goatandsheep]

@IjzerenHein I'm also having an issue with devDependencies in my snack. I'm just trying to create a demo app for a babel plugin I maintain, but it's not working because the devDependencies aren't loading properly.

[IjzerenHein]

@goatandsheep Supporting these kinds of situations where a working node-environment is needed goes beyond what Snack can offer. It's good to know that there is a need for this though, but this will likely not be worked on in the foreseeable future.