如何在Phoenix项目中设置brunch-config以正确加载react-router?

时间:2015-09-19 09:57:44

标签: javascript reactjs react-router brunch phoenix-framework

我创建了新的Phoenix 1.0.0项目初始化的bower文件并安装了React js,一切都很好,直到我添加了react-router。现在我无法摆脱以下错误:

ReactRouter.js:2108 Uncaught TypeError: Cannot read property 'PropTypes' of undefined

我认为这与brunch-config或者反应路由器和ES6有关,我花了很多时间但我找不到一个好的解决方案。

这是我目前的早午餐配置:

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js",
      order: {
        before: [
          /bower_components/,
          /web\/static\/vendor/
        ]
      }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },
  conventions: {
    assets: /^(web\/static\/assets)/
  },
  paths: {
    watched: [
      "deps/phoenix/web/static",
      "web/static",
      "test/static"
    ],
    public: "priv/static"
  },
  plugins: {
    babel: {
      ignore: [/^(web\/static\/vendor)|(bower_components)/]
    }
  },
  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },
  npm: {
    enabled: true
  }
};

当我从忽略的插件中删除|(bower_components)时,我会收到以下错误:

ReactRouter.js:10 Uncaught TypeError: Cannot read property 'React' of undefined

当我修改brunch-config并将供应商添加到这样的约定时:

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

并添加到app.js直接导入路径:

import React from "bower_components/react/react";
import { Router, Route, Link } from 'bower_components/react-router/build/umd/ReactRouter';

然后它不会在react-router模块中加载响应:

Uncaught Error: Cannot find module "react" from "bower_components/react-router/build/umd/ReactRouter"

如何使用React和React-Router设置Phoenix项目?

bower.json:

{
  "name": "test",
  "version": "0.0.0",
  "authors": ["luzny"],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "react": "~0.13.3",
    "react-router": "~0.13.3"
  }
}

0 个答案:

没有答案