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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

import

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1834閲覧

【Vue.js】npmでインストールしたパッケージをimportすると"Failed to load module script"になる

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

import

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/10/18 05:09

ローカルサーバー環境(mamp)での開発で、npmでインストールしたパッケージ(vuex)をインストールしました。
インストールしたパッケージを、jsファイルでimportしたところ、以下のエラーが出てしまいました。
初歩的な質問で大変恐縮ですが、お力添えいただけると幸いです。

エラー内容

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. localhost/:1

イメージ説明

環境

trello_app  ∟ js   ∟ main.js  ∟ my-app  ∟ node_modules   ∟ sortablejs   ∟ vue   ∟ vue-router   ∟ vuex  index.html  package-lock.json  vue.js % npm list /Applications/MAMP/htdocs/trello_app ├── vue@2.6.12 ├── vue-router@3.4.7 ├─┬ vuedraggable@2.24.2 │ └── sortablejs@1.12.0 └── vuex@3.5.1

index.html

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="./css/style.css"> 7</head> 8<body> 9 <div id="app"> 10 <p>{{name}}</p> 11 <p><input type="text" v-model="name"></p> 12 </div> 13 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 14 <script type="module" src="./js/main.js"></script> 15</body> 16</html>

main.js

js

1 2import Vue from './../node_modules/vue' 3import Vuex from './../node_modules/vuex' 4Vue.use(Vuex) 5 6(function() { 7 'use strict'; 8 9 var vm = new Vue({ 10 el: '#app', 11 data: { 12 name: 'taguchi' 13 } 14 }); 15})();

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問