Support npm link development workflow

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

[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

[nikoloza]

@gaearon yes for production I can, but for dev (if you have it linked), it’s pain to transpile it on every save.