Can't compile a local working bundle

[pekala]

I cloned the repo and I tried to npm run build but the bundle produced doesn't seem to work when linked to cosmos. I locked the versions of all packages in package.json to ensure I use the same vendor code, but it still throws

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

when I run cosmos in browser. When used with the bundle from npm everything works fine. Any ideas?

[ovidiuch]

the bundle produced doesn't seem to work when linked to cosmos

Not sure what "linked to cosmos" means. This repo just bundles a React component, Cosmos is the built-in solution. The only case when you want to use this repo is if you don't want to use Cosmos and you want to integrate ComponentPlayground differently.

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

I can tell you from experience this probably means you bundled React more than once in your build (check out the bundle file to see for yourself). You can search the internet to see that React doesn't work with another React instance alongside.

[pekala]

By linked to Cosmos I mean npm linking this package (repo) to cosmos. I spent some more time and it seems that if I just make some changes to files in a clone of this repo, run npm run build and copy bundle.js file to node_modules/react-component-playground/build folder in Cosmos it works... so it's the linking part that causes this Invariant Violation error.

[ovidiuch]

I can only assume you were trying to test some changes to ComponentPlayground inside Cosmos. I had the same problem since this is how I test ComponentPlayground changes: by linking the react-component-playground dependency from the cosmos-js dependency in the cosmos-example repo (or other repo using cosmos-js like Flatris).

If this is what you're interested in, here is my flow:

I tried linking /path/to/cosmos-example/node_modules/cosmos-js/node_modules/react-component-playground/build/bundle.js to /path/to/react-component-playground/build/bundle.js using ln -s, and I got the same result as you. The linking somehow messed up the webpack build and got two instances of React side by side, yielding the Invariant Violation error above.

My current workaround is to temporarily edit output.path in ComponentPlayground's webpack config from ./build/bundle.js to /path/to/cosmos-example/node_modules/cosmos-js/node_modules/component-playground/build/bundle.js

This way I can keep two terminals with both node_modules/.bin/component-playground running inside the cosmos-example repo and webpack --watch in the react-cosmos-playground repo, while I perform changes to the ComponentPlayground component.

[pekala]

Thanks for clarification. The problem is most probably related to this issue: https://github.com/webpack/webpack/issues/554 But it seems that it should already be resolved in the version of Webpack used here... I'll look into this in more detail.