Support npm link development workflow
See original GitHub issueHi,
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
Issue Analytics
- State:
- Created 7 years ago
- Reactions:10
- Comments:21 (9 by maintainers)
I have a project based off of
lerna
./packages/ui
depends onreact
and is symlinked to/packages/site-one/node_modules
and/packages/site-two/node_modules
withlerna 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:@gaearon yes for production I can, but for dev (if you have it linked), it’s pain to transpile it on every save.