react.jsプロジェクトに循環的な進行状況バーがあります。 kimmobrunfeldt's react-progressbar.js installation notesに続いて、私は前記ライブラリを私のプロジェクトに組み込むことができました。しかし、私にはわからない何らかの理由で、実際の進捗バーは表示されません。 DOMインスペクタは、プログレスバーのラッパーがその中にあることを示しますが、内容は表示しません。 npmでビルドするとエラーは表示されません。ここでreact-progressbar.jsのコンテンツは反応プロジェクトでレンダリングされません
は私のreact.jsプロジェクトのセットアップです:
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
module.exports = {
entry: [ APP_DIR + '/index.jsx'],
output: { path: BUILD_DIR, filename: 'bundle.js'},
module: {
loaders: [
{ test: /\.jsx?/, include : APP_DIR, loader: 'babel'},
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
}
package.json
{
"name": "hello-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel": {
"presets": [
"es2015",
"react"
]
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "./node_modules/.bin/webpack -d --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.8",
"json-loader": "^0.5.4",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-progressbar.js": "^0.2.0",
"webpack": "^1.13.3"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.1",
"react": "^0.14.8",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2",
"webpack-loader-modules": "^1.1.0"
}
}
index.jsx
import React from 'react';
import {render} from 'react-dom';
import progressBar from 'react-progressbar.js';
// ...
// ...
var Circle = progressBar.Circle;
class App extends React.Component {
render() {
return (
<div>
<p> Hello React!</p>
<Circle
progress={1}
text={'test'}
initialAnimate= {true}
containerClassName= {'progressbar-container'}
/>
</div>
);
}
}
// ...
render(<App/>, document.getElementById('app'));
手掛かりを...持っていません。プロジェクト自体がうまくコンパイルされるので、間違ったパス名の問題だとは思わない。 – gnzg
完全なエラーメッセージを表示できますか? – Mikhail
接尾辞を省略した場合、これは私が得るものです: エラー./src/client/app/index.jsx モジュールが見つかりません:エラー:/ Users/UserX/Desktop /内のモジュール 'react-progressbar'を解決できません。 react-hello-world/src/client/app @ ./src/client/app/index.jsx 11:24-52 – gnzg