VuetifyでtranspileDependencies設定時に"export 'default' (imported as 'Vuetify') was not found in 'vuetify'が出たときの対処
「どんなしょぼい内容でも躓いたり、調べて解決したことはブログに書こう」月間。
Vuetifyを導入した時、躓いて時間を溶かしたので一人でも誰かの助けになればいいなと思いつつ…。
環境
現象
ビルド時にexport 'default' (imported as 'Vuetify') was not found in 'vuetify'というwarning
WARNING Compiled with 1 warnings 14:51:49 warning in ./src/main.js "export 'default' (imported as 'Vuetify') was not found in 'vuetify'
ブラウザコンソールにUncaught TypeError: Cannot read property 'extend' of undefinedエラー
以下のようなエラーがブラウザコンソールに出て画面上には何も表示されない。
themeable.ts?e3b8:11 Uncaught TypeError: Cannot read property 'extend' of undefined
at Module.srcMixinsThemeableTs (themeable.ts?e3b8:11)
at __webpack_require__ (bootstrap?d2c1:19)
at Module.srcComponentsVAppVAppJs (VApp.js?1f55:3)
at __webpack_require__ (bootstrap?d2c1:19)
at Module.srcComponentsVAppIndexJs (index.js?665f:1)
at __webpack_require__ (bootstrap?d2c1:19)
at Module.srcComponentsIndexTs (index.ts?3edf:1)
at __webpack_require__ (bootstrap?d2c1:19)
at Module.srcIndexTs (index.ts?9ddb:8)
at __webpack_require__ (bootstrap?d2c1:19)
再現手順
IE11対策のためにtranspileDependenciesを追加したときに発生
ここのIE11 & Safari 9 supportに従い、
vue.config.jsにtranspileDependenciesを追加したときにエラーは発生した。
- vue.config.js
module.exports = {
- productionSourceMap: false
+ productionSourceMap: false,
+ transpileDependencies: [/node_modules[/\\\\]vuetify[/\\\\]/]
};
transpileDependenciesとは
By default babel-loader ignores all files inside node_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option.
Quote Source:https://cli.vuejs.org/config/#transpiledependencies
babelのtranspile時に、デフォルトではnode_modules配下はすべて無視されるが、
例外的にtranspileしたいファイルがある場合、transpileDependenciesに指定する。
VuetifyをIE11に対応させるには、このnode_modules/vuetify配下もbabel通してtranspileしないとだめっていうことらしい。
Unfortunately vue-cli-3 doesn't automatically bring IE11 compatibility in which you may encounter various errors (such as Symbol is not defined). To assist in resolving these errors you may need to manually add transpileDependencies parameter in vue.config.js
Quote Source: https://vuetifyjs.com/ja/getting-started/quick-start#ie11-safari-9-support
セットアップ時の手順
既存のVue CLI 3 アプリケーションへの導入だったので、 ここのExisting applicationsの手順にしたがってvue addではなくnpm installでインストールした。
npm install vuetify --save
- index.html
+ <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
- main.js
+ import "@/assets/scss/style.scss"; import Vue from "vue"; + import Vuetify from "vuetify"; import App from "./App.vue"; import router from "./router"; import store from "./store"; + import "vuetify/dist/vuetify.min.css"; Vue.config.productionTip = false; + Vue.use(Vuetify);
- App.vue
+ <v-app> + <v-btn depressed small color="primary" class="addMemoBtn" @click="onClickAddBtn">追加ボタン</v-btn> + </v-app>
対策
A La Carte モードを使う
必要なコンポーネントのみをimportして、ビルドサイズを劇的に減らせるA La Carteモードを使ったら解消した。
以下は重要なポイントをかいつまんで説明。
stylusとstylus-loaderのinstall
こちらのRequired stylesの項目にあるように、
A La Carteモードを使うには、stylus と stylus-loader も必要。
Vue CLI 3を使っているならstyle-loaderとcss-loaderはすでに入ってるので、以下でOK。
npm install stylus-loader stylus --save-dev
cf.)
https://github.com/shama/stylus-loader#install
https://cli.vuejs.org/guide/css.html#pre-processors
vuetify-loaderのinstall
vuetify-loaderを使えば、必要なコンポーネントをいちいち毎回指定してimportしなくてすむ。
npm install vuetify-loader --save-dev
- import Vuetify from "vuetify"; + import Vuetify from "vuetify/lib";
+ const VuetifyLoaderPlugin = require("vuetify-loader/lib/plugin"); module.exports = { - transpileDependencies: [/node_modules[/\\\\]vuetify[/\\\\]/] + transpileDependencies: [/node_modules[/\\\\]vuetify[/\\\\]/], + configureWebpack: { + plugins: [new VuetifyLoaderPlugin()] + } };
参考：[Bug Report] Vuetify is undefined in A La Carte mode · Issue #3496 · vuetifyjs/vuetify · GitHub
