carteb / carte-blanche

An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.
https://www.youtube.com/watch?v=6g3-TQ6aaw8
MIT License
1.5k stars 47 forks source link

Component detail not loading #391

Open BenSwennen opened 8 years ago

BenSwennen commented 8 years ago

When I click on the details of my component, I expect a detail view of my component, however a modal pops up with following console errors:

user-bundle.js:1394 Warning: You are manually calling a React.PropTypes validation function for the `visible` prop on `Modal`. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.

Here is my component:

// src/components/Avatar/index.js
import React from "react";

const Avatar = () => (
  <div>This will become an avatar</div>
);

Avatar.propTypes = {
};

export default Avatar;

and my webpack config:

const path = require("path");
const CarteBlanche = require("carte-blanche");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const CarteBlancheConfig = new CarteBlanche({
  componentRoot: "./src/components",
  dest: "components",
});

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  inject: true,
  template: path.join(__dirname, "./src/index.html"),
});

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  watch: true,

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["react", "es2015"],
        },
      },
    ],
  },

  resolve: {
    extensions: ["", ".js"],
  },

  plugins: [
    CarteBlancheConfig,
    HtmlWebpackPluginConfig,
  ],
};

out

Can you tell me if I'm doing something wrong?

cyberpluto commented 8 years ago

Seeing the same, it seems that there is something wrong with the css, because the Card is really on the page, but hidden by the modal

fredjens commented 7 years ago

It is not on the page (you are seeing the front page), and due to the console message it is a JavaScript error... I am experiencing the same too, when i tried to pull carte blanche into an existing project...

okonet commented 7 years ago

Same here. The error is actually:

index.js:302 Generating metadata failed Error: getNodeFromInstance: Invalid argument.
    at invariant (invariant.js:38)
    at Object.getNodeFromInstance (ReactDOMComponentTree.js:156)
    at Object.findDOMNode (findDOMNode.js:50)
    at Constructor._getDOMTarget (velocity-component.js:128)
    at Constructor.runAnimation (velocity-component.js:107)
    at Constructor.componentDidMount (velocity-component.js:66)
    at ReactCompositeComponentWrapper.invokeComponentDidMountWithTimer (ReactCompositeComponent.js:63)
    at CallbackQueue.notifyAll (CallbackQueue.js:66)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:79)
    at ReactReconcileTransaction.closeAll (Transaction.js:202)