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

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

ただいまの
回答率

89.65%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 773

mihara

score 13

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

{
  "name": "react-test",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {},
  "dependencies": {
    "jquery": "^2.1.4",
    "marked": "^0.3.5",
    "react": "^0.14.5",
    "react-dom": "^0.14.5"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babelify": "^7.2.0",
    "body-parser": "^1.14.2",
    "browserify": "^12.0.1",
    "express": "^4.13.3",
    "gulp-csscomb": "^3.0.7",
    "gulp-jade": "^1.0.0",
    "gulp-load-plugins": "^0.10.0",
    "gulp-nodemon": "^2.0.6",
    "gulp-pleeease": "^1.2.0",
    "gulp-plumber": "^1.0.0",
    "gulp-stylus": "^2.0.1",
    "react-router": "^2.6.1",
    "react-tabs": "^0.7.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

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

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

class App extends Component {
  constructor(props) {
    super(props)
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(index, last) {
    console.log('Selected tab: ' + index + ', Last tab: ' + last);
  }

  render() {
    return (
      {/*
     タブずの説明
      */}

      <Tabs>

        {/*
      タブリストの説明
        */}

        <TabList>

          {/*
            タブの説明
          */}

          <Tab>Foo</Tab>
          <Tab>Bar</Tab>
          <Tab>Baz</Tab>
        </TabList>

        {/*
          タブパネルの説明
        */}

        <TabPanel>
          <h2>Hello from Foo</h2>
        </TabPanel>
        <TabPanel>
          <h2>Hello from Bar</h2>
        </TabPanel>
        <TabPanel>
          <h2>Hello from Baz</h2>
        </TabPanel>
      </Tabs>
    );
  }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

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

{/*
     タブずの説明
      */}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/04 15:38

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

    キャンセル

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 13:50

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

    キャンセル

  • 2016/08/02 15:12

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

    キャンセル

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

  • ただいまの回答率 89.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる