mrloh / metro-with-symlinks Goto Github PK

Metro with Symlinks

Home Page: https://www.npmjs.com/package/metro-with-symlinks

JavaScript 100.00%

metro-with-symlinks's Introduction

metro-with-symlinks

There is a longstanding issue with Metro not accepting symlinks and thus making it hard to use in monorepo setups or example projects. This script provides a solution.

This package generates a custom rn-cli.config.js file based on checking for symlinks inside the node_modules. It also takes care of making peer dependencies available to those symlinked modules.

Usage

# Install
yarn add -D metro-with-symlinks
# or
npm install -D metro-with-symlinks

In the most recent version of the metro bundler, you just need to have a rn-cli.config file in your root folder and it will automatically be read by the bundler. You can generate that file by running metro-with-symlinks without any argument in the terminal, which will generate the rn-cli.config file. You will have to regenerate this file, whenever you symlink another package or add a peerDependency to your link

Side Effects

Since this fix consists of adding linked packages as react-native project roots, this causes react native to try and transpile the code of the package. This can be an issue if your package has its own transpilation process, leading to multiple transpilation attempts on the same code. To prevent this from happening, you'll have to ignore the linked package from inside the react native projects .babelrc. For example:

{
  ... 
  "ignore": [
    "some-linked-package"
  ]
}

Usage (Older Versions)

In older versions, you have to tell the packager where to find the config file. To do so you can simply replace the standard react-native commands with this custom command. For example: replace the start script in your package.json with this:

"scripts": {
    "start": "metro-with-symlinks start",
}

Using with Xcode (Only Older Versions)

# You will need to have run this or the start command above to generate rn-cli.config.js config.
yarn metro-with-symlinks

In Xcode you can assign an environment variable in the build phase Bundle React Native code and images. Add:

export BUNDLE_CONFIG=./rn-cli.config.js

Using with Gradle (Only Older Versions)

In Android you just have to include bundleConfig: "./rn-cli.config.js" in the project.ext.react field of your android/app/build.gradle:

Contributing

If there is a specific feature you are missing, please create an issue or ideally open a pull request.

metro-with-symlinks's People

Contributors

Stargazers

Watchers

Forkers

dylanvann mequilibrium justinmakaila syq7970 treyp grazz substantial heronsystems naturalclar nacho-carnicero jekiwijaya raphaelsalviano braccolucianoj

metro-with-symlinks's Issues

Asset paths invalid for symlink packages on metro@^0.47

Hi @MrLoh ,

I got an issue on RN 0.57.2 that asset paths from symlink packages cannot be resolved correctly. I think its related to this issue

Here's the repo to reproduce this issue:
https://github.com/adrianha/metro-symlink - Works fine
react-native: 0.57.1

https://github.com/adrianha/metro-symlink/tree/0.57.2 - Assets path incorrect
react-native: 0.57.2

Any suggestion?

Support for hoisted workspaces

Hi!

First of all thanks for this repo, it looks very promising for being able to use the metro packager in a monorepo.

However I have noticed that this currently does not support hoisted workspaces.

For instance if we have the following project structure:

Project
    |_ node_modules
    |_ packages
        |_ apps
            |_ mobile
                |_ node_modules
            |_ web
                |_ node_modules

With hoisted workspaces all dependencies of every packaged are installed in node_modules of the root folder (here Project/node_modules) unless explicitly told so or if the current app requires a specific version of the package(see Yarn Workspaces for more information on this).

Currently when running metro-with-symlinks in the mobile folder, an error is shown with this type of architecture:

> metro-with-symlinks

fs.js:115
    throw err;
    ^

Error: ENOENT: no such file or directory, lstat 'node_modules/babel-plugin-transform-inline-environment-variables'
    at Object.lstatSync (fs.js:838:3)
    at isSymlink (/Users/nachocarnicero/git/Sterblue/node_modules/metro-with-symlinks/src/getSymlinkedDependencies.js:4:8)
    at Array.filter (<anonymous>)
    at module.exports.directory (/Users/nachocarnicero/git/Sterblue/node_modules/metro-with-symlinks/src/getSymlinkedDependencies.js:12:10)
    at module.exports (/Users/nachocarnicero/git/Sterblue/node_modules/metro-with-symlinks/src/cli.js:20:35)
    at Object.<anonymous> (/Users/nachocarnicero/git/Sterblue/node_modules/metro-with-symlinks/bin/index.js:9:22)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)

This is because the package babel-plugin-transform-inline-environment-variables is installed in Project/node_modules and not in Project/packages/apps/mobile/node_modules, but the getSymlinkedDependencies function only checks for packages installed under node-modules in the current folder.

Is there any plan for supporting hoisted workspaces (which is the default behavior when using yarn workspaces)?

Cheers,
Nacho

Doesn't seem to work with scoped packages

I have several scoped symlinked packages and this doesn't recognize them.

Don't write absolute paths to the rn-cli.config.js

When generating the rn-cli.config.js this tool shouldn't write absolute paths into the file but instead use something like fs.realpathSync(path) to compute the paths at runtime.

In its current state the config produced cannot be checked into git and shared across developer machines.

RegEx error in blacklist paths

Currently this script outputs the following RegEx for the BlacklistRE:

/C:\Users\s145469\Desktop\Git\vote-for-fun-components[/\\]node_modules[/\\]react-native[/\\].*/

In this RegEx the backslashes aren't escaped, hence the path doesn't resolve correctly.

Still getting bundle error "Duplicate module name" using "symlinked" node-modules

Thanks for providing this script, I'd really like to use it. Unfortunately I am still getting errors when I try to include a "symlinked" node module in my react-native application.
Here are my steps to reproduce this error:

Create a new React-Native App using react-native init AwesomeProject
Create new Node-Module which will be included later with a symbolic link:
- mkdir foo-test-module && cd foo-test-module
- create npm project: yarn init (name: foo-test-module, entry-point: index.js)
- add react-native as a decendency: yarn add react-native
- create index.js and add some dummy code to test RN-import:
```
import {platform} from 'react-native'
export default platform
```
- then create a symbolic link to that local package: yarn link
Next, go back to the react-native project and try adding the linked module:
- cd ..
- cd AwesomeProject/
- yarn link foo-test-module which will create a symbolic link, as you can see in the screen below:
- to test the import, modify App.js and render or log the platform function from foo-test-module:
```
import foo from 'foo-test-module';
...
return <Text>{foo.platform}</Text>
```
Add metro-with-symlinks to the project as described in the docs (yarn add -D metro-with-symlinks and register it in package.json)
Now if I try to run the app (using react-native run-ios), the packager still complains about multiple project definitions:

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
Duplicate module name: react-native Paths:
.../foo-test-module/node_modules/react-native/package.json collides with .../AwesomeProject/node_modules/react-native/package.json

Software Versions:
yarn: v. 1.1.0
react-native: v. 0.55.4
metro: 0.30.2

Am I missing some setup step or something else? Any hint would be more then welcome :)

Add windows support

Hey,

nice little lib here. Works well on OS X and Ubuntu, but it doesn't play well with windows. Check this output:

Change config file name to `metro.config.js`

Hi,
From what I can see, I think running yarn metro-with-symlinks should produce a file called metro.config.js rather than the old name rn-cli.config.js

Library required in symlinked folder cannot find react-native in haste map

Not sure if my set up is unusual or if there's just something I'm missing.. but this whole symlink thing is a big headache. Your lib definitely is the simplest solution I could find.. and it worked until I was utilizing another module that references react-native. Hopefully this makes sense...

In my symlinked folder, I have a
import { lib } from LibraryA
and Library A imports from react-native and cannot locate in the haste map, since it is looking in the node_modules inside the symlink folder, BUT that instance of react-native is blacklisted...

How might I resolve that issue?

What to do if the package doesn't exist yet on the npm?

Hi, I am trying to setup in the best way my production line.

I have it working perfectly, but adding a new package to my sandbox dir is a little pain because my package doesn't exist in npm yet. So, I can only add new packages by removing before the symlinked dependency from the package.json, add the new dependency, then add again the symlink as npm i will remove the symlink dir.

Any way to skip this, without publishing the npm package?

Also, just for public information as this may be useful for others, I have this script in my sandbox package.json, that will create the symlink and call metro-with-symlinks:

"setSymlink": "npx symlink-dir .. ./node_modules/pagescrollview && npx metro-with-symlinks"

TypeScript support or merge existing rn-cli.config.js

I have a custom rn-cli.config.js to use with TypeScript, it seems this is overriding it.

I'm getting this error:

error: bundling failed: Error: Unable to resolve module `./App.tsx` from `/Users/brunolemos/Projects/workspace/mobile/index.js`: The module `./App.tsx` could not be found from `/Users/brunolemos/Projects/workspace/mobile/index.js`. Indeed, none of these files exist:

  * `/Users/brunolemos/Projects/workspace/mobile/App.tsx(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
  * `/Users/brunolemos/Projects/workspace/mobile/App.tsx/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`

So in my case I had to copy paste this comment and merge manually to get symlink working.

Side effect of transpiling linked packages

More of a note than an issue.

To prevent this from happening, you'll have to ignore the linked package from inside the react native projects .babelrc.

example:

// .babelrc
{
  ... 
"ignore": [
    "some-linked-package"
  ]
}