0

概要

Laravelでmaterializecss( https://materializeweb.com/ )を使いたいのですが、
エラーになります。
この解決方法がわかりません。

エラー内容

Uncaught TypeError: can't access property "AutoInit", _materializecss_materialize_dist_js_materialize_min_js__WEBPACK_IMPORTED_MODULE_2___default() is undefined

書いたコード

単純に以下のものになります。
LaravelMixのコンパイルは通りますが、
ブラウザでアクセスした際にエラーになります。
app.js

import './bootstrap';
import 'sweetalert2';
import M from '@materializecss/materialize/dist/js/materialize.min.js';

M.AutoInit();

webpack/mix/js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/app.scss', 'public/css', [])
;

考察

M.AutoInit();でエラーになっていると思います。
これはmaterializecssのJavaScript関係を実行する際に実行しておかないと動かないようです。
公式には書かれています。
https://materializeweb.com/auto-init.html

なお、viteで同じようにしてみたのですがM.AutoInit();でエラーになって動かなかったため、
LaravelMixに変更してみましたが結局M.AutoInit();でエラーになり、こちらにて質問させていただいております。

環境

  • windows11
  • docker (WSL2 ubuntu)
    • PHP8.3
    • node 20
  • Laravel v10.34.2
  • materializecss 2.0.3-beta

こちら、原因をおわかりになる方がいらっしゃいましたらご教示をお願い致します。
よろしくお願いいたします。

1 件の回答 1

0

この方の記事で解決しました

https://nnahito.com/articles/103

import { M } from "@materializecss/materialize/dist/js/materialize.js";
import '@materializecss/materialize/dist/css/materialize.min.css';

M.AutoInit();

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。