Uncaught Error: (mdc-auto-init) Could not find constructor in registry for MDCTabBar

Question

I'm trying to use Laravel Mix to include Material Components Web in my Laravel 8 project. I've installed the NPM packages and I am able to successfully compile using mix. However when I run the application I get an error console saying the components don't exist in the registry. It looks to me like I'm not including the autoinit registry startup that material-web-components has but I'm not sure why the components aren't registering. The goal is for the components to successfully auto init.

The pages that contain the components are using blade views and are not using typescript.

I am able to successfully auto initialize if I use the CDN version of material web components, but then I don't gain any benefits from typescript since the types won't be found.

Error in console

Example component being used in blade

<label class="mdc-text-field mdc-text-field--outlined mdc-wide-label" data-mdc-auto-init="MDCTextField" >

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@types/node": "^18.6.3",
        "axios": "^0.21",
        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.54.0",
        "sass-loader": "^12.1.0",
        "ts-loader": "^9.3.1",
        "typescript": "^4.7.4"
    },
    "dependencies": {
        "@material/auto-init": "^14.0.0",
        "@types/jquery": "^3.5.14",
        "@types/toastr": "^2.1.39",
        "jquery": "^3.6.0",
        "material-components-web": "^14.0.0",
        "toastr": "^2.1.4"
    }
}

webpack.mix.js

const mix = require('laravel-mix');
mix.ts('resources/assets/js/*', 'public/js/app.js').version()
   .sourceMaps();
mix.sass('resources/sass/app.scss', 'public/css/app.css', {
    sassOptions: {
        implementation: require('sass'),
        webpackImporter: false,
        sassOptions: {
        includePaths: ['./node_modules']
        },
    }
});

app.ts

import * as mdc from 'material-components-web';
mdc.autoInit();

Answer 1

Try

import mdcAutoInit from '@material/auto-init';
mdcAutoInit();

P.S. I'm not a Laravel developer, so I can't check it myself.

P.P.S. These docs might be of help - https://github.com/material-components/material-components-web/tree/master/packages/mdc-auto-init