javascriptのパッケージaxiosがimportできない

前提・実現したいこと

djanogrestframeworkのapi呼び出しをjavascriptのパッケージaxiosでできるらしいということがわかり実践したい。
しかし、axiosをimportできない。
どうしたらaxiosが使えるようになるでしょうか？

発生している問題・エラーメッセージ

cssとjavascriptのファイル自体は読み込まれている。

エラー文

Uncaught SyntaxError: Unexpected identifier

該当のソースコード

html
1{% load static %}
2<!DOCTYPE html>
3<html lang="jp" dir="ltr">
4  <head>
5    <meta charset="utf-8">
6    <title></title>
7    <script type="text/javascript" src="{% static 'js/index.js' %}"></script>
8    <link href="{% static 'css/index.css' %}" rel="stylesheet">
9  </head>
10  <body>
11    <p>test</p>
12
13  </body>
14</html>

css
1p {
2  color: red;
3}

js
1import axios from "axios";
2
3console.log("import completed");
4axios
5  .get("http://127.0.0.1:8000/api/v1/")
6  .then(response => {
7    console.log("status:", response.status);
8    console.log("axiosGetData:", response.data);
9  })
10  .catch(err => {
11    console.log("axiosGetErr", err);
12  });
13window.alert("test");

yml
1version: '3'
2
3services:
4  db:
5    image: postgres
6  web:
7    build: .
8    command: python manage.py runserver 0.0.0.0:8000
9    volumes:
10      - .:/code
11    ports:
12      - "8000:8000"
13    depends_on:
14      - db

Dockerfile
1FROM python:3
2ENV PYTHONUNBUFFERED 1
3RUN mkdir /code
4WORKDIR /code
5COPY requirements.txt /code/
6RUN pip install -r requirements.txt
7RUN apt-get install -y gnupg
8RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
9RUN apt-get install -y nodejs
10RUN npm install axios --save-dev
11COPY . /code/

txt
1Django>=2.0,<3.0
2psycopg2>=2.7,<3.0
3djangorestframework

試したこと

ここに問題に対して試したことを記載してください。
①docker-composeで環境を作る
②axiosを追加することに決める、dockerfileを書き直す。

FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
COPY requirements.txt /code/
RUN pip install -r requirements.txt
RUN apt-get install -y gnupg//追加
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -//追加
RUN apt-get install -y nodejs//追加
RUN npm install axios --save-dev//追加
COPY . /code/

③ビルドした
正常にビルド完了

➜  djangorestframework git:(master) ✗ sudo docker-compose build
db uses an image, skipping
Building web
Step 1/11 : FROM python:3
 ---> 34a518642c76
Step 2/11 : ENV PYTHONUNBUFFERED 1
 ---> Using cache
 ---> ff4afb48bfa0
Step 3/11 : RUN mkdir /code
 ---> Using cache
 ---> ceec010feebe
Step 4/11 : WORKDIR /code
 ---> Using cache
 ---> e707d1b2e60a
Step 5/11 : COPY requirements.txt /code/
 ---> Using cache
 ---> 1cc11eda6568
Step 6/11 : RUN pip install -r requirements.txt
 ---> Using cache
 ---> bffc88f8924e
Step 7/11 : RUN apt-get install -y gnupg
 ---> Using cache
 ---> 6d54121ce170
Step 8/11 : RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
 ---> Using cache
 ---> ee3599f7553c
Step 9/11 : RUN apt-get install -y nodejs
 ---> Using cache
 ---> 40a7d3eee167
Step 10/11 : RUN npm install axios --save-dev
 ---> Using cache
 ---> c6dd0853d8b0
Step 11/11 : COPY . /code/
 ---> 1698e7492ca6
Successfully built 1698e7492ca6
Successfully tagged djangorestframework_web:latest

バージョンも表示される

➜  djangorestframework git:(master) ✗ sudo docker-compose run web npm info axios version 
Starting djangorestframework_db_1 ... done
0.19.0

④jsファイルでimport、失敗

補足情報（FW/ツールのバージョンなど）

開発環境
Ubuntu18.04.2
docker-compose1.22.0
django2.2.2
djangorestframework3.9.4
aixios0.19.0
言語
python,javascript,html,css

行動規範の内容に同意します

回答2件

自己解決

axiosをimportするのはnodeの環境でなければならなかったようです。
reactのプロジェクトを立ち上げ、その中でaxiosをimportできます。

投稿2019/07/14 08:58

yk_00

総合スコア15

パッと見でアレ？と思っただけですけど
RUN npm install axios --save-dev
RUN npm install axios --saveじゃないですか？

投稿2019/07/10 01:01

gentaro

総合スコア8949

yk_00

2019/07/10 06:43

やってみましたが変わりませんでした。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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