Skip to content

Importing components from another package #3689

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

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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants