Skip to content

Importing components from another package #3689

New issue

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

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

Already on GitHub? # to your account

Closed
unrevised6419 opened this issue Jan 4, 2018 · 8 comments
Closed

Importing components from another package #3689

unrevised6419 opened this issue Jan 4, 2018 · 8 comments

Comments

@unrevised6419
Copy link

unrevised6419 commented Jan 4, 2018

Hello folks!
I'm trying to make kind of living style guide and common components. That will be used in more projects.
I am using create-react-app and storybook. Development works well.
Then I npm install git+ssh://git@... repo into my actual project.
Problem appears when I try to import a component from that style guide. I get

/home/andrewluca/Projects/style-patterns/src/components/Footer.js
Module parse failed: Unexpected token (4:2)
You may need an appropriate loader to handle this file type.
| 
| const Footer = () => (
|   <footer className="footer">
|     <div className="container">
|       <div>

If i'm importing a simple function from my package, that does not use react, it works.
I added react and react-dom as peer and dev dependencies so I can do development and use version of react from my project.
My components are not compiled to any cjs es umd

⇒  nodejs -v
v8.9.4
⇒  npm -v
5.6.0

style-patterns/package.json deps

"dependencies": {
  "prop-types": "^15.6.0"
},
"peerDependencies": {
  "bootstrap": "4.0.0-beta.3",
  "react": "^16.2.0",
  "react-dom": "^16.2.0"
},
"devDependencies": {
  "@storybook/react": "^3.3.3",
  "babel-core": "^6.26.0",
  "bootstrap": "4.0.0-beta.3",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "reactstrap": "^5.0.0-alpha.4"
}

my-project/package.json deps

"dependencies": {
  "style-patterns": "git+ssh://git@...",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "react-scripts": "1.0.17"
},

Does anyone meet this problem?

@unrevised6419
Copy link
Author

It seems to be related to #3547

@unrevised6419
Copy link
Author

unrevised6419 commented Jan 5, 2018

After 7 hours of reading a lot of issues, and docs.
I come to this. Put all project in same repo, style-patterns my-project1 my-project2 my-project3
Make 3 symlinks of style-patterns into all project as src/common
Eject all 3 projects and change webpack configs:

module.exports = {
  // ...
  resolve: {
    symlinks: false,
    // ...
  }
  // ...
}

I got the error because babel ignores node_modules, webpack was right, no loader for jsx...
I added symlinks in src because create-react-app does not allow sources outside this folder

ps: npm link is so broken?

@unrevised6419
Copy link
Author

unrevised6419 commented Jan 5, 2018

Or I still can keep them separate in different repos.
And make symlinks from node_modules/style-patterns.
Using npm/yarn link for development is working.

@unrevised6419
Copy link
Author

unrevised6419 commented Jan 5, 2018

Why resolve.symlinks is not set to false in CRA configs?

@gaearon
Copy link
Contributor

gaearon commented Jan 9, 2018

We just don't have a good story around symlinks right now. I don't think what you're describing was/is currently supported.

@gaearon
Copy link
Contributor

gaearon commented Jan 9, 2018

I'll close as a duplicate of #3547.

@gaearon gaearon closed this as completed Jan 9, 2018
@unrevised6419
Copy link
Author

#3695

@nimahkh
Copy link

nimahkh commented Sep 9, 2018

this is old question , but you can use this repository : http://github.com/nimahkh/react-all-in-one-package it helps me

@lock lock bot locked and limited conversation to collaborators Jan 18, 2019
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants