質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

1916閲覧

import xxxxx from 'xxxx'で読み込まれない

mihara

総合スコア15

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2016/08/02 04:05

編集2016/08/02 04:47

react-tabsを使いたいのでnpm i -D react-tabsでインストールはしたのですが
こちらのexampleのTabs内onSelectの行でエラーになります。
https://www.npmjs.com/package/react-tabs
コードは上記URLのexampleをそのまま使っています。

エラー内容
ERROR: エラーファイル名: Unexpected token (29:8) while parsing file: エラーファイル名

pacage.json

json

1{ 2 "name": "react-test", 3 "version": "1.0.0", 4 "license": "MIT", 5 "scripts": {}, 6 "dependencies": { 7 "jquery": "^2.1.4", 8 "marked": "^0.3.5", 9 "react": "^0.14.5", 10 "react-dom": "^0.14.5" 11 }, 12 "devDependencies": { 13 "babel-preset-es2015": "^6.3.13", 14 "babel-preset-react": "^6.3.13", 15 "babelify": "^7.2.0", 16 "body-parser": "^1.14.2", 17 "browserify": "^12.0.1", 18 "express": "^4.13.3", 19 "gulp-csscomb": "^3.0.7", 20 "gulp-jade": "^1.0.0", 21 "gulp-load-plugins": "^0.10.0", 22 "gulp-nodemon": "^2.0.6", 23 "gulp-pleeease": "^1.2.0", 24 "gulp-plumber": "^1.0.0", 25 "gulp-stylus": "^2.0.1", 26 "react-router": "^2.6.1", 27 "react-tabs": "^0.7.0", 28 "vinyl-source-stream": "^1.1.0" 29 } 30}

インストールしているのに読み込まれないのが不思議です。
原因わかりますでしょうか

補足
読み込まれていないのが原因なのか調べるためonSelectの記述などを外して下記にコードを変更しましたところ。<Tab>Foo</Tab>でエラーになりました。
エラー内容は
エラーファイル名: Unterminated regular expression (50:20) while parsing file: エラーファイル名
です。

jsx

1class App extends Component { 2 constructor(props) { 3 super(props) 4 this.handleSelect = this.handleSelect.bind(this); 5 } 6 handleSelect(index, last) { 7 console.log('Selected tab: ' + index + ', Last tab: ' + last); 8 } 9 10 render() { 11 return ( 12 {/* 13 タブずの説明 14 */} 15 16 <Tabs> 17 18 {/* 19 タブリストの説明 20 */} 21 22 <TabList> 23 24 {/* 25 タブの説明 26 */} 27 28 <Tab>Foo</Tab> 29 <Tab>Bar</Tab> 30 <Tab>Baz</Tab> 31 </TabList> 32 33 {/* 34 タブパネルの説明 35 */} 36 37 <TabPanel> 38 <h2>Hello from Foo</h2> 39 </TabPanel> 40 <TabPanel> 41 <h2>Hello from Bar</h2> 42 </TabPanel> 43 <TabPanel> 44 <h2>Hello from Baz</h2> 45 </TabPanel> 46 </Tabs> 47 ); 48 } 49}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

不要な部分を削除していたところ下記ブラケットが悪さをしていたようでした。
これらコメントをブラケットごと削除いたしましたところ正常に動作しました。お騒がせして申し訳ございません。
また、NatsumiOki様には付き合わせてしまって申し訳ございません。

javascript

1 {/* 2 タブずの説明 3 */}

投稿2016/08/02 06:39

mihara

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NatsumiOki

2016/08/04 06:38

あ、なるほどサンプルのそのままですね。そりゃおかしくなりますね。 解決してよかったです!
guest

0

読み込まれていないと断定した理由はなんでしょうか?
エラーの表示どおり、onSelect部分でエラーが出ているのではないかと思うのですが…

ES6で記述されているようなので、constructorでbindの指定をしないといけないのではないかと思います。

class App extends Component { constructor(props) { super(props) this.handleSelect = this.handleSelect.bind(this); } handleSelect(index, last) {・・・略

【コメントをうけて追記】
修正した結果エラーの箇所が変わった(=もとのエラーが解消された)のであれば、読み込み自体はできている気がしますが、念のため確認です。

こちらのreact-tabのリポジトリから、必要なソースはすべて持ってきていますか?
https://github.com/reactjs/react-tabs

特に下層ファイルを見ると、
https://github.com/reactjs/react-tabs/blob/master/src/components/Tab.js

こんな感じで変数宣言などがされているので、このあたりが含まれていないのではないかを疑っています。
(だからconstructorで初期値を設定したらその箇所のエラーは消えた、とか)

投稿2016/08/02 04:22

編集2016/08/02 06:12
NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mihara

2016/08/02 04:50

NatsumiOki様 ご回答ありがとうございます。 回答された通り修正いたしましたが、同様のエラーが起こりました。 ご指摘いただいたように読み込まれていないのが原因かどうか調べるため、一旦onSelectなどエラー箇所を削除してみました。 上の補足に追加していますが。今度は`<Tab>Foo</Tab>`でエラーが起こりました。 エラー内容は`エラーファイル名: Unterminated regular expression (50:20) while parsing file: エラーファイル名 `です。
NatsumiOki

2016/08/02 06:12

回答を編集しましたのでご確認ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問