react-toolbox / react-toolbox

A set of React components implementing Google's Material Design specification with the power of CSS Modules
http://www.react-toolbox.io
MIT License
8.66k stars 971 forks source link

Not working with brunch #414

Closed boriscy closed 8 years ago

boriscy commented 8 years ago

I'm building an app with brunch and I get the error

Resolving deps of node_modules/react-toolbox/lib/input/Input.js failed. Could not load module './style' from '/home/boris/dev/elixir/bonsai/node_modules/react-toolbox/lib/input'. Make sure the file actually exists.

Is this because I must use webpack for reactor-toolbox

package.json

{
  "repository": {},
  "dependencies": {
    "babel-brunch": "~6.0.0",
    "babel-preset-react": "^6.5.0",
    "brunch": "^2.5.3",
    "classnames": "^2.2.3",
    "clean-css-brunch": "^2.0.0",
    "css-brunch": "^2.0.0",
    "javascript-brunch": "~1.8.0",
    "material-ui": "^0.15.0-alpha.2",
    "normalize.css": "^3.0.3",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "react": "^0.14.7",
    "react-addons-css-transition-group": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.1",
    "react-toolbox": "^0.15.0",
    "redux": "^3.3.1",
    "redux-form": "^4.2.2",
    "uglify-js-brunch": "~1.7.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.6.0",
    "node-sass": "^3.4.2"
  }
}

brunch-config.js

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {

    watched: [
      "web/static",
      "test/static"
    ],
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      presets: ["es2015", "react"],
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true,
    whitelist: ["phoenix", "phoenix_html", "react", "react-dom"]
  }
};
javivelasco commented 8 years ago

I don't even know about brunch 😕

React Toolbox should be used for now with webpack as it's tested and developed. Other integrations could be cool and in fact some people is developing stuff with browserify. As I don't use it I'd appreciate contributions to the documentation about how to integrate react toolbox with other build systems.

I'm leaving this open in case anybody else can help!

javivelasco commented 8 years ago

The latest release should work without worrying about CSS Modules so it should work for your case!