- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
将 jspm/system.js 与 Babel 转译器一起使用时,我在控制台中看到以下错误
Uncaught (in promise) Error: XHR error loading http://localhost:3000/jspm_packages/npm/redux-devtools@2.1.0/lib/react/themes/pop.js
Error loading http://localhost:3000/jspm_packages/npm/redux-devtools@2.1.0/lib/react/themes/pop.js as "./pop" from http://localhost:3000/jspm_packages/npm/redux-devtools@2.1.0/lib/react/themes/index.js
at r (http://localhost:3000/jspm_packages/system.js:4:10975)
at XMLHttpRequest.o.onreadystatechange (http://localhost:3000/jspm_packages/system.js:4:11500)
如果我在 react/themes/index.js
中注释该行,我(正如预期的那样)不会再看到该错误。
但是,我确实看到了;
Uncaught (in promise) Error: Cannot read property 'hasOwnProperty' of undefined
Error loading http://localhost:3000/index.js
at Object.checkAndWarnForMutatedProps (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactElementValidator.js:157:27)
at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactReconciler.js:13:31)
at ReactCompositeComponentMixin.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactCompositeComponent.js:99:36)
at ReactPerf.measure.wrapper [as mountComponent] (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactPerf.js:27:23)
at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactReconciler.js:11:37)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactMultiChild.js:75:46)
at ReactDOMComponent.Mixin._createContentMarkup (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactDOMComponent.js:146:34)
at ReactDOMComponent.Mixin.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactDOMComponent.js:95:76)
at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactReconciler.js:11:37)
at ReactCompositeComponentMixin.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactCompositeComponent.js:99:36)
这似乎与 DevTools 有关。
这是我尝试使用它们的方式;
import React, { PropTypes, Component } from 'react'
import { Redirect, Router, Route } from 'react-router'
import { Provider } from 'react-redux'
import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import logger from './middleware/logger'
import persistenceStore from './persistence/store'
import { devTools } from 'redux-devtools'
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react.js'
import App from './containers/App'
import * as storage from './persistence/storage'
import * as components from './components/index'
import * as reducers from './reducers/index'
import * as constants from './constants'
const __DEVTOOLS__ = true
const {
AccountsList,
Dashboard,
SideBar,
TitleBar,
Login
} = components
const initialState = {
application: {
token: storage.get('token'),
user: { permissions: [] }
}
}
let combinedCreateStore
const storeEnhancers = [persistenceStore]
if (__DEVTOOLS__) {
storeEnhancers.push(devTools())
}
combinedCreateStore = compose(...storeEnhancers)(createStore)
const finalCreateStore = applyMiddleware(thunk, logger)(combinedCreateStore)
const combinedReducer = combineReducers(reducers)
const store = finalCreateStore(combinedReducer, initialState)
function getRootChildren (history) {
const rootChildren = [
<Provider key='provider' store={store}>
{renderRoutes.bind(null, history)}
</Provider>
]
if (__DEVTOOLS__) {
rootChildren.push((
<DebugPanel key='debug-panel' top right bottom>
<DevTools store={store} monitor={LogMonitor}/>
</DebugPanel>
))
}
return rootChildren
}
export default class Root extends Component {
static propTypes = {
history: PropTypes.object.isRequired
}
render () {
const { history } = this.props
return (
<div>{getRootChildren(history)}</div>
)
}
}
function renderRoutes (history) {
return (
<Router history={history}>
<Route component={App}>
<Route path='/' component={Dashboard} />
<Route path='accounts' component={AccountsList} />
<Route path='login' component={Login} />
<Route path='logout' onEnter={logout} />
</Route>
</Router>
)
}
function requireAuth (nextState, redirectTo) {
const state = store.getState()
const isLoggedIn = Boolean(state.application.token)
if (!isLoggedIn) {
redirectTo('/login', {
nextPathname: nextState.location.pathname
})
}
}
function logout (nextState, redirectTo) {
store.dispatch({ type: constants.LOG_OUT })
redirectTo('/login')
}
这是我的 package.json
{
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"test": "standard"
},
"author": "",
"jspm": {
"directories": {
"baseURL": "app"
},
"dependencies": {
"classnames": "npm:classnames@^2.1.3",
"history": "npm:history@^1.8.4",
"react": "npm:react@^0.13.3",
"react-pure-render": "npm:react-pure-render@^1.0.2",
"react-redux": "npm:react-redux@^2.1.1",
"react-router": "npm:react-router@1.0.0-beta4",
"redux": "npm:redux@^2.0.0",
"redux-devtools": "npm:redux-devtools@^2.1.0",
"redux-thunk": "npm:redux-thunk@^0.1.0"
},
"devDependencies": {
"babel": "npm:babel-core@^5.8.22",
"babel-runtime": "npm:babel-runtime@^5.8.20",
"core-js": "npm:core-js@^1.1.0"
}
},
"devDependencies": {
"browser-sync": "^2.9.1",
"foundation-apps": "^1.1.0",
"gulp": "^3.9.0",
"gulp-sass": "^2.0.4",
"redux": "^2.0.0",
"redux-devtools": "^2.0.0",
"rimraf": "^2.4.3",
"standard": "^5.2.1",
"vinyl": "^0.5.3"
}
}
如果我设置 __DEVTOOLS__ = false
,我看不到任何错误并且应用程序按预期呈现。
我的实现基于这个 webpack 示例,它工作得很好: https://github.com/emmenko/redux-react-router-async-example
我做错了什么?
最佳答案
如 this issue 中所述,问题是由于广告拦截器阻止了对名为 pop.js
的内部文件的请求。关闭广告拦截器,一切都会好起来的。
关于javascript - 将 redux-devtools 与 jspm/system.js/babel 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32458395/
我正在为我的 React 项目设置 Webpack,并对 babel 感到困惑, babel-core , babel-loader , babel-preset-2015和babel-preset-
所有这些 babel 依赖项是什么?它们各自的用途是什么,它们有何不同?我应该为我的 nodejs 网络应用程序使用哪一个? 我已经查看了 API 网站,但是否有任何指南可以将这些内容转化为简单的人类
我的 Node Webpack 项目使用了三个 babel 库。它们之间有什么区别以及如何使用它们? "dependencies": { "babel-runtime": "^5.8.24" }
我用 @babel/core 替换了 babel-core 而 babel-loader 期望 babel-core: { "name": "myproject-ui", "version":
我尝试配置一个环境来使用 babel 和 webpack 开发 javascript。 但是我不明白关于presets的babel配置. 在 Usage Guide ,我们可以看到预设为 "@babe
我已经安装了 babel 7.5,理想情况下它应该以 preset-env 包为目标,但不确定它为什么要寻找“babel-preset-es2015”。 你们能告诉我我做错了什么吗?下面是我的代码 p
我正在更新a boilerplate中使用的babel包,从 babel-core、babel-register 等到@babel/core、@babel/register > 等 问题:在 npm
设置 通天塔 6 (^6.0.0), Node 5.4.0,Express 4.13.x, babel-node 和 babel-register 都有警告,禁止在生产环境中使用babel.io 网站
我正在尝试转换编译我的 react/es6 代码并且来自 browserify。由于新的 babel 6 版本以及大多数教程现在已经过时的事实,我正在努力创建一个 webpack 构建。这适用于我的
我有一个使用 Typescript 和 @babel/preset-env 的项目。与 Webpack 捆绑失败并显示此错误和以下配置。 如果我取消注释该行,这会强制 @babel/plugin-pr
我在浏览器中使用 babel -> babel-standalone 现在我想使用 ES decorator 语法。但是所有的通天塔doc intro 是服务器端的 babel,比如 ` { "p
我正在编写对从 cdnjs.com 引入的所有这些库的 react 。但是,我发现它报告错误:'Uncaught TypeError: Cannot read property 'keys' of u
我正在使用 babel v7.6.x 并设置了以下内容。 包.json "scripts": { "dev": "nodemon --exec babel-node bin/index.js
我正在学习巨大的 JavaScript 生态系统,但我无法理解以下内容。 Babel 是一个编译器,来自官网: Babel is a toolchain that is mainly used to
在我使用yarn add -D babel-plugin-react-relay安装relay-query插件后,并在运行开发服务器后,我收到此错误: Error: [BABEL] /Users/ne
我使用 babel 6 和 React 插件,并按照文档说明设置转译过程。我已经阅读过要让 React 工作,我需要使用 es2015 和 React preset。最初,使用这两个预设一切都运行良好
我对 Babel 选项/配置有点迷失。我想使用最新的 js 功能并编译(使用 webpack)为浏览器代码。 babel-polyfill 和有什么区别和 babel plugins与 babel-p
这个问题在这里已经有了答案: Babel file is copied without being transformed (10 个答案) 关闭 6 年前。 我只是使用 npm (npm inst
安装时 npm install browserify babelify babel-preset-es2015 我正面临以下警告信息 npm WARN deprecated babel-preset-
什么版本的标准? 12.0.1 什么操作系统、Node.js 和 npm 版本? 视窗 10, 节点 v10.15.1, NPM v.6.8.0 你期望会发生什么? 我在 devDependencie
我是一名优秀的程序员,十分优秀!