Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use symbol link for example #232

Closed
sunnylqm opened this issue Jan 28, 2020 · 6 comments · Fixed by #309
Closed

Use symbol link for example #232

sunnylqm opened this issue Jan 28, 2020 · 6 comments · Fixed by #309
Assignees
@brodycj
Labels
enhancement New feature or request

Comments

@sunnylqm
Copy link
Contributor

There is some workaround to let metro bundler support symbol link, so that we can directly modify the library code and test them in the example project .
@brodycj brodycj self-assigned this Jan 30, 2020
@brodycj brodycj added the enhancement New feature or request label Jan 30, 2020
@brodycj
Copy link
Owner

brodycj commented Jan 30, 2020

Thanks @sunnylqm for both the suggestion and the information. I will likely need some time to investigate.

@brodycj
Copy link
Owner

brodycj commented Feb 12, 2020

I tried this in my work area, seems to work if I would add the following entry to the end of the module.exports object in example/metro.config.js (thanks to facebook/metro#286 (comment) and facebook/metro#1 (comment) for pointers to the general idea):

watchFolders: ['.', '../']

(Maybe I should path.resolve as discussed in facebook/metro#1 (comment).)

This was referenced Feb 12, 2020
Closed
Open
@brodycj
Copy link
Owner

brodycj commented Feb 24, 2020

I just published react-native-module-init which both offers an interactive CLI and uses a symbolic link in the generated example.

brodycj pushed a commit that referenced this issue Apr 6, 2020
@sunnylqm
example with symlink by default
aafde0f 
by the following shell command:

    yarn add link:../

as suggested in #232 by @sunnylqm

Previous file linkage behavior (`yarn add file:../`) may be enabled
by using the new --example-file-linkage option
(`exampleFileLinkage: true` in the library API)
which is already deprecated.

Omit postinstall scripts entry in example package.json unless
the deprecated --example-file-linkage option is used.

Overwrite the example metro.config.js with quick workaround
for an issue with symlinked modules, unless
the deprecated --example-file-linkage option is used.

*tested* with React Native 0.60

(known issue with React Native 0.61 & 0.62 at this point)

update the following test cases to use the deprecated
`exampleFileLinkage: true` setting:

- json-eacces-error.test.js
- json-enoent-error.test.js
- recover-from-missing-package-scripts.test.js
- create-with-example-with-options.test.js
- create-with-example-with-options.test.js

Co-authored-by: Christopher J. Brody <chris.brody+brodybits@gmail.com>
Co-authored-by: Sunny Luo <sunnylqm@qq.com>
brodycj pushed a commit that referenced this issue Apr 6, 2020
@sunnylqm
example with symlink by default
52b344c 
by the following shell command:

    yarn add link:../

as suggested in #232 by @sunnylqm

Previous example file linkage behavior (`yarn add file:../`)
may be enabled by using the new --example-file-linkage option
(`exampleFileLinkage: true` in the library API)
which is already deprecated at this point.

Omit postinstall scripts entry in example package.json unless
the deprecated --example-file-linkage option is used
(with minor console logging updates)

Overwrite the example metro.config.js with quick workaround
for an issue with symlinked modules, unless
the deprecated --example-file-linkage option is used
(with thanks to @johnryan for the pointer)

*tested* with React Native 0.60

(known issue with React Native 0.61 & 0.62 at this point)

update the following test cases to test with the deprecated
`exampleFileLinkage: true` setting:

- json-eacces-error.test.js
- json-enoent-error.test.js
- recover-from-missing-package-scripts.test.js
- create-with-example-with-options.test.js
- create-with-example-with-options.test.js

Co-authored-by: Christopher J. Brody <chris.brody+brodybits@gmail.com>
Co-authored-by: Sunny Luo <sunnylqm@qq.com>
@brodycj
Copy link
Owner

brodycj commented Apr 7, 2020

[...]

watchFolders: ['.', '../']

Adding watchFolders: ['.', '../'] seems to be enough to work on React Native 0.60; additional resolver.extraNodeModules entry like @sunnylqm has in workaround metro.config.js linked from the description seems to be needed as well on React Native 0.61 & 0.62.

The following resolver entry seems to work for me on React Native 0.61 & 0.62:

  resolver: {
    extraNodeModules: new Proxy(
      {},
      { get: (_, name) => path.resolve('.', 'node_modules', name) }
    )
  }

I think @johnryan deserves credit for the pointers to both workarounds in facebook/metro#1 (comment).

I am working on a new PR with this functionality, which should be ready within the next couple of days or so.

@brodycj brodycj mentioned this issue Apr 7, 2020
Merged
brodycj pushed a commit that referenced this issue Apr 7, 2020
@sunnylqm
generate example with symlink by default
6ade28b 
by the following shell command:

    yarn add link:../

as suggested in #232 by @sunnylqm

fix and update the description of --generate-example option

previous example file linkage behavior (`yarn add file:../`)
may be enabled by using the new --example-file-linkage option
(`exampleFileLinkage: true` in the library API)
which is already deprecated at this point

omit postinstall scripts entry in example package.json unless
the deprecated --example-file-linkage option is used
(with minor console logging updates)

overwrite the example metro.config.js with quick workaround
for an issue with symlinked modules, unless
the deprecated --example-file-linkage option is used
(with thanks to @johnryan for the pointer)

*tested* with React Native 0.60

(known issue with React Native 0.61 & 0.62 at this point)

update the following test cases to test with the deprecated
`exampleFileLinkage: true` setting:

- json-eacces-error.test.js
- json-enoent-error.test.js
- recover-from-missing-package-scripts.test.js
- create-with-example-with-options.test.js
- create-with-example-with-options.test.js

Co-authored-by: Christopher J. Brody <chris.brody+brodybits@gmail.com>
Co-authored-by: Sunny Luo <sunnylqm@qq.com>
@wassil
Copy link

wassil commented Jul 3, 2020

With watchFolders: ['.', '../'] watchman complains that unable to resolve root .: path "." must be absolute

I ended up using watchFolders: [path.resolve(__dirname), path.resolve(__dirname) + '/../']

brodycj pushed a commit to brodycj/react-native-module-init that referenced this issue Jul 10, 2020
resolve absolute paths in example metro watchFolders
5a6488c 
as suggested by this comment:

brodycj/create-react-native-module#232 (comment)
@brodycj brodycj mentioned this issue Jul 10, 2020
Merged
brodycj pushed a commit to brodycj/react-native-module-init that referenced this issue Jul 12, 2020
absolute paths in example metro watchFolders (#66)
8cf26e9 
* resolve absolute paths in example metro watchFolders

as suggested by this comment:

brodycj/create-react-native-module#232 (comment)

* update test snapshots
brodycj pushed a commit that referenced this issue Feb 10, 2021
fix: resolve absolute paths in example metro watchFolders
9e8094b 
ref:

- brodycj/react-native-module-init#66
- #232 (comment)
@brodycj brodycj mentioned this issue Feb 10, 2021
Merged
brodycj pushed a commit that referenced this issue Feb 11, 2021
fix: resolve absolute paths in example metro watch folders (#405)
ba20416 
(update test snapshots)

ref:

- brodycj/react-native-module-init#66
- #232 (comment)
@YOEL311
Copy link

YOEL311 commented Dec 19, 2023 •
edited
Loading

hey @brodybits
Thank you for your library

I need to use it but my example app is not inside the folder of the library,
is exists beside the app like this structure

mono-repo folder
-- example-app
-- my-library

in my example app, I tried to link to my library but I got an error

in my package.json file of the App

  "dependencies": {
    "my-library": "link:../my-library",

I see in my node-modules is linked the folder but when I start the app with

npx react-native start --reset-cache

I got error

Watchman `watch-project` finished after 16.0s.
Waiting for Watchman `query` (10s).

how I can fix it to work with my module with react-native metro bundle

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brodycj brodycj

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
4 participants
@sunnylqm @brodycj @wassil @YOEL311