###前提・実現したいこと
Java(Spring Boot)+Reactでアプリケーションを実装しています。
###発生している問題・エラーメッセージ
Material-UIを使うため、コマンドラインから必要なものをnpm installし、jsファイルにimportしたところ、ブラウザのコンソールに"Uncaught ReferenceError: require is not defined"というエラーが出てしまいました。
(参考:https://codezine.jp/article/detail/10074)
###該当のソースコード
js
1import getMuiTheme from 'material-ui/styles/getMuiTheme'; 2import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 3import injectTapEventPlugin from 'react-tap-event-plugin'; 4injectTapEventPlugin(); 5import { AppBar, MenuItem, Drawer } from 'material-ui'; 6 7var request = window.superagent; 8 9class Body extends React.Component { 10 11 constructor() { 12 super(); 13 this.state = { 14 data: [] 15 }; 16 } 17 18 fetchData () { 19 request 20 .get('/ac/video/get-all-json') 21 .set('Content-Type', 'application/json') 22 .end((err, res) => { 23 console.log(res.text);//レスポンス 24 //レスポンスがJSONの場合 25 console.log(res.body);//ここにparse済みのオブジェクトが入る 26 if (err) { 27 console.log('error') 28 } 29 this.setState({ 30 data: res.body 31 }) 32 }) 33 } 34 35 componentDidMount() { 36 this.fetchData() 37 } 38 39 render() { 40 return ( 41 <ul> 42 {this.state.data.map((item) => { 43 return (<li>{item.bandName}</li>) 44 })} 45 </ul> 46 ) 47 } 48} 49 50//ボディの定義 51class Header extends React.Component { 52 render() { 53 return ( 54 <MuiThemeProvider> 55 <div> 56 <Drawer 57 docked={false} 58 width={200} 59 open={this.props.open} 60 onRequestChange={() => this.props.onToggle()} 61 > 62 <MenuItem>React</MenuItem> 63 <MenuItem>Redux</MenuItem> 64 <MenuItem>React Router</MenuItem> 65 <MenuItem>Material UI</MenuItem> 66 <MenuItem>Electron</MenuItem> 67 </Drawer> 68 <AppBar 69 title="React Study" 70 onLeftIconButtonTouchTap={ () => this.props.onToggle()} 71 /> 72 </div> 73 </MuiThemeProvider> 74 ) 75 } 76} 77 78//フッターの定義 79class Footer extends React.Component { 80 render() { 81 return ( 82 <h1>フッター</h1> 83 ) 84 } 85} 86 87//コンポーネントを一つにまとめる 88class Index extends React.Component{ 89 render() { 90 return ( 91 <div> 92 <Header/> 93 <Body/> 94 <Footer/> 95 </div> 96 ) 97 } 98} 99 100ReactDOM.render( 101 <Index / >, 102 document.getElementById('root'));
jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Acappella</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <script src="https://unpkg.com/react@15/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script> <script src="${pageContext.request.contextPath}/js/superagent.js"></script> <script type="text/babel" src="${pageContext.request.contextPath}/js/index.js"></script> </head> <body> <div id="root"></div> </body> </html>
###試したこと
webpack、Browserify等をインストールしてみましたが、上手く行きませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
Java8、React v15
あなたの回答
tips
プレビュー