Support npm link development workflow

[acailly]

Hi,

I managed to add a shared project ("sharedApp") to my app made with create-react-app ("myApp") with npm link on Windows.

sharedApp contains only code and is not bundled, I wanted to be able to edit it and then myApp refresh automatically.

Here how I did, I found it a bit hacky and I am open for better solutions 😉

The start

I had the folder of sharedApp code in paths.appSrc:

appSrc: [resolveApp('src'), resolveApp('node_modules/shared-hybrid/src')],

First issue

Error in ***/shared-hybrid/src/components/common/Toast.js
Module parse failed: ***\shared-hybrid\src\components\common\Toast.js Unexpected token (15:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (15:2)
 @ ./src/components/ObservationPage/ObservationPage.js 42:13-65

I replace in the paths:

appSrc: [resolveApp('src'), resolveApp('node_modules/shared-hybrid/src')],

by

appSrc: [resolveApp('src'), fs.realpathSync(resolveApp('node_modules/shared-hybrid/src'))],

Second issue

Nearly the same kind but not exactly

Error in ***/shared-hybrid/src/components/common/SelectServerDialog.js
Syntax error: ***/shared-hybrid/src/components/common/SelectServerDialog.js: Unexpected token (20:6)

  18 |
  19 |  const dialogActions = [
> 20 |       <FlatButton
     |       ^
  21 |         label="Ok"
  22 |         primary={true}
  23 |         keyboardFocused={true}

 @ ./src/components/HomePage/HomePage.js 54:26-91

I add the following code in the query of babel loader:

        query: {
          presets: [
            'react-app'
          ].map(dep => require.resolve(`babel-preset-${dep}`))
        }

Third issue

Error in ***/shared-hybrid/src/redux/reducers/toast.js
Module not found: 'babel' in ***\shared-hybrid\src\redux\reducers

 @ ***/shared-hybrid/src/redux/reducers/toast.js 12:15-36

Now I set:

resolve: {fallback: paths.appNodeModules}
resolveLoader: {fallback: paths.appNodeModules},

Final issue

It works! ... except I commented this section:

preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'eslint',
        include: paths.appSrc,
      }
    ],

and when I suppress the comments, I get the following errors:

Error in ***/shared-hybrid/src/redux/actions/toast.js

***\shared-hybrid\src\redux\actions\toast.js
  1:1  error  Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

? 1 problem (1 error, 0 warnings)

To fix that, I add in shared-hybrid/package.json:

  "eslintConfig": {
    "extends": "react-app"
  }

And it works!

Edit : Oops, the tests are not working, jest doesn't transform the shared code and raise an error on import

[gaearon]

Could you add a symlink inside src instead? Sounds like that would solve your problem better.
See #1065 for details.

[acailly]

Does it mean create a directory node_modules directory in src and do the npm link ..\..\shared-hybrid there ?
I have the same issues than before and the fixes don't work anymore.

[gaearon]

I’ll try to get a look at this after we cut the next release. It won’t be a priority for now but it’s something we’d want to have a solution for.

[jperl]

I have a project based off of lerna.

/packages/site-one # A create-react-app site
/packages/site-two # A create-react-app site
/packages/ui # Re-used react components and a react-storyboard

/packages/ui depends on react and is symlinked to /packages/site-one/node_modules and /packages/site-two/node_modules with lerna bootstrap.

To get around the issue Only a ReactOwner can have refs that happens because there are two reacts, we do this in the project we are working on:

cd packages/site-one/node_modules/react && npm link
cd ../../../ui && rm -rf node_modules/react && npm link react

[chiefGui]

I found a monster workaround to deal with local packages and it might help someone else: I have two projects that share some common code. Let's call them X and Y and the shared stuff is the ui.

So, I create the component I desire on X or Y, then I migrate it to ui (with all the tests passing—this is important to keep consistency!), yarn build to generate an output and only then I consume it through import {Component} from 'ui'.

This option was chosen to avoid big effort on making babel transpile node_modules/ui/components/ correctly. X and Y also do have some aliases that were conflicting with those on ui, which as you can imagine, is a pain in the ass to manage.

[tuchk4]

I've created PR that is possible solution for npm-link workflow #1356

[gaearon]

Fixed by #1356. Expected to be out in 0.9.1 when we release it.