-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
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.
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
Support npm link development workflow #1107
Comments
Could you add a symlink inside |
Does it mean create a directory |
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. |
I have a project based off of
To get around the issue
|
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 So, I create the component I desire on This option was chosen to avoid big effort on making babel transpile |
I've created PR that is possible solution for |
Fixed by #1356. Expected to be out in 0.9.1 when we release it. |
Actually no, #1365 only fixes the workflow of linking custom |
@gaearon any temp workaround for this? |
@kitze #1107 (comment) still working for me. 💃 |
+1, I'm having similar issue as in here and here #1699, but also from non-linked npm module.
error:
This happens not only on npm packages, but everywhere outside I'm aware that |
ES6 exports will not work inside When we switch a stable version to Webpack 2 it will work but you should still transpile your libraries. |
@gaearon yes for production I can, but for dev (if you have it linked), it's pain to transpile it on every save. |
@chiefGui I tried your workaround with my components (let's say similiar to I even tried to add the following babel preset in the
I am also not very confortable of having a second |
@canercandan The problem you have is simple: you're importing a lib that's not transpiled. My bet would be to point your built script at |
Hi, I will speak only about the development I have a project project "A", "B", "UI"
If I do npm start for project A or B, I get the following error resolve: { symlinks: false } Then everything works as it should. Is it possible to influence this parameter without npm run eject? |
That's how I managed to get my external components linked to my project, I
kept using `create-react-app` webpack setup for the main project but used a
new webpack setup for the components such as:
```js
var path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'umd',
},
externals: [
'react',
'react-dom',
'material-ui',
'fbjs',
'prop-types',
],
module: {
rules: [
// js and jsx
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['react-app']
}
}
},
// css
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
```
…On Fri, Jul 28, 2017 at 10:15 AM, Артем Иванов ***@***.***> wrote:
Hi, I will speak only about the *development*
I have a project project "A", "B", "UI"
cd ./projects/UI
npm link
cd ./projects/A
npm link UI
cd ./projects/B
npm link UI
If I do npm start for project *A* or *B*, I get the following error
Unexpected token (4:2)
The reasons for this error are understandable. There is no BABEL processing
But if you do *npm run eject* for projects *A* and *B* and add the
./projects/A/config/webpack.config.dev.js
./projects/B/config/webpack.config.dev.js
following
resolve: { symlinks: false }
Then everything works
<webpack/webpack#1866 (comment)>
as it should. Is it possible to influence this parameter without *npm run
eject*?
Sorry for my English
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1107 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AARbhEySoAvCzIgGx1J2_tShHC71dLylks5sSZiFgaJpZM4K94E_>
.
--
*Email/Jabber/Gtalk/Hangout*: caner@candan.fr
*Skype ID*: caner.candan
*Website <https://about.me/canercandan> − Linkedin
<https://www.linkedin.com/in/canercandan> − Github
<https://github.com/canercandan> − Google Scholar
<http://scholar.google.com/citations?user=lz7ejnQAAAAJ> − Stack Overflow
<https://stackoverflow.com/cv/canercandan>*
|
Any workaround for this that does not require ejecting or manually rebuilding all the dependencies whenever they change? Our use case is the same as #1107 (comment). |
problem: create-react-app does not support compiling files outside 'src'. Building draft-js*-plugin everytime it changes in development is not a good flow, so holding this for now facebook/create-react-app#1107
The use case of sharing components between apps will be covered by #1333 (being implemented in #3741) so you can subscribe to them if you're interested. However, the above solutions rely on using monorepos. This is because This thread dives into the problem in more details: webpack/webpack#985 (comment). Note there are simple solutions that seem right but have really bad pitfalls: webpack/webpack#985 (comment). And even though webpack/webpack#985 (comment) takes care of the issue for webpack itself, we still can’t fix Node.js resolution mechanism now. So tests won’t work as expected. To me, this means that the whole approach is flawed and I recommend avoiding I hope the monorepo approach in #1333 will solve most existing use cases for |
Having read some discussions in nodejs/node#6537 and https://github.com/isaacs/node6-module-system-change I think we're actually already being inconsistent in how we handle symlinks. Let's forget about the issue about compiling source code for a second. I feel like that can be solved by #1333 and thus is not the most important one here. The important part here is that the resolution should match Node algorithm so that our webpack setup matches our test setup. I thought that was the case, but I was wrong. Consider this structure:
It turns out that if We introduced this regression in #1359. I think maybe we missed it because if |
I decided to spin that off into #3883 as a separate issue. |
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
:First issue
I replace in the paths:
by
Second issue
Nearly the same kind but not exactly
I add the following code in the query of babel loader:
Third issue
Now I set:
Final issue
It works! ... except I commented this section:
and when I suppress the comments, I get the following errors:
To fix that, I add in
shared-hybrid/package.json
:And it works!
Edit : Oops, the tests are not working, jest doesn't transform the shared code and raise an error on
import
The text was updated successfully, but these errors were encountered: