aurelia-ui-toolkits / aurelia-materialize-bridge

Materialize CSS components for Aurelia
http://aurelia-ui-toolkits.github.io/demo-materialize/
MIT License
156 stars 53 forks source link

md-select error: M is not defined #553

Closed SirMossi closed 5 years ago

SirMossi commented 5 years ago

I'm new to aurelia and the materialize bridge. So I think, that it's just a configuration problem on my side, which I could not find.

I've added a select component with the following code:

<select md-select value.bind="selectedVnl"
          change.delegate="selectedSalesmanChanged(changedValue)">
    <option model.bind="null">Choose a salesman</option>
    <option repeat.for="salesman of salesmen"
            model.bind="salesman.Vnl">
          ${salesman.Firstname} ${salesman.Lastname} (${salesman.Vnl})
    </option>
</select>

But this causes the following runtime error:

select.ts:135 Uncaught ReferenceError: M is not defined
at MdSelect.createMaterialSelect (select.ts:135)
at select.ts:89
at TaskQueue._flushQueue (aurelia-task-queue.js:96)
at TaskQueue.flushTaskQueue (aurelia-task-queue.js:142)
at aurelia-task-queue.js:81
at handleFlushTimer (aurelia-task-queue.js:38)

I think, this is a loading issue, but I have no idea how to fix this.

In my app.html I've added the following lines:

<require from="font-awesome/css/font-awesome.min.css"></require>
<require from="materialize-css/dist/css/materialize.css"></require>

In main.ts I've added the plugin usage statement:

.plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), b => 
    b.useAll().preventWavesAttach()
);

Also interessting (I think) is the stylesheet in index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Are there any additions needed in aurelia.json? I did not find any informations in the getting started documentation.

I hope someone could help me with this issue

MaximBalaganskiy commented 5 years ago

Check if you have import 'materialize-css'; somewhere in your code

On Tue, Aug 27, 2019, 6:39 AM Robert Hofmann notifications@github.com wrote:

I'm new to aurelia and the materialize bridge. So I think, that it's just a configuration problem on my side, which I could not find.

I've added a select component with the following code:

<select md-select value.bind="selectedVnl" change.delegate="selectedSalesmanChanged(changedValue)">

<option repeat.for="salesman of salesmen"
        model.bind="salesman.Vnl">
      ${salesman.Firstname} ${salesman.Lastname} (${salesman.Vnl})
</option>

But this causes the following runtime error:

select.ts:135 Uncaught ReferenceError: M is not defined at MdSelect.createMaterialSelect (select.ts:135) at select.ts:89 at TaskQueue._flushQueue (aurelia-task-queue.js:96) at TaskQueue.flushTaskQueue (aurelia-task-queue.js:142) at aurelia-task-queue.js:81 at handleFlushTimer (aurelia-task-queue.js:38)

I think, this is a loading issue, but I have no idea how to fix this.

In my app.html I've added the following lines:

In main.ts I've added the plugin usage statement:

.plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), b => b.useAll().preventWavesAttach() );

Also interessting (I think) is the stylesheet in index.html

Are there any additions needed in aurelia.json? I did not find any informations in the getting started documentation.

I hope someone could help me with this issue

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/issues/553?email_source=notifications&email_token=AA4KNPCLNE3WABKAZULR6N3QGQ5QVA5CNFSM4IPVOYP2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HHPHM7Q, or mute the thread https://github.com/notifications/unsubscribe-auth/AA4KNPCJD5I5MUXFCYTYOVTQGQ5QVANCNFSM4IPVOYPQ .

MaximBalaganskiy commented 5 years ago

https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/2.-installation/webpack

On Tue, Aug 27, 2019, 6:39 AM Robert Hofmann notifications@github.com wrote:

I'm new to aurelia and the materialize bridge. So I think, that it's just a configuration problem on my side, which I could not find.

I've added a select component with the following code:

<select md-select value.bind="selectedVnl" change.delegate="selectedSalesmanChanged(changedValue)">

<option repeat.for="salesman of salesmen"
        model.bind="salesman.Vnl">
      ${salesman.Firstname} ${salesman.Lastname} (${salesman.Vnl})
</option>

But this causes the following runtime error:

select.ts:135 Uncaught ReferenceError: M is not defined at MdSelect.createMaterialSelect (select.ts:135) at select.ts:89 at TaskQueue._flushQueue (aurelia-task-queue.js:96) at TaskQueue.flushTaskQueue (aurelia-task-queue.js:142) at aurelia-task-queue.js:81 at handleFlushTimer (aurelia-task-queue.js:38)

I think, this is a loading issue, but I have no idea how to fix this.

In my app.html I've added the following lines:

In main.ts I've added the plugin usage statement:

.plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), b => b.useAll().preventWavesAttach() );

Also interessting (I think) is the stylesheet in index.html

Are there any additions needed in aurelia.json? I did not find any informations in the getting started documentation.

I hope someone could help me with this issue

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/issues/553?email_source=notifications&email_token=AA4KNPCLNE3WABKAZULR6N3QGQ5QVA5CNFSM4IPVOYP2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HHPHM7Q, or mute the thread https://github.com/notifications/unsubscribe-auth/AA4KNPCJD5I5MUXFCYTYOVTQGQ5QVANCNFSM4IPVOYPQ .

SirMossi commented 5 years ago

that's it. Maybe it is possible to highlight all changes you have to make in a default configuration somehow or something like that. Then you'd rather see what has to be done. Thank you for your assistance

MaximBalaganskiy commented 5 years ago

The link above is a part of the book which is referenced on the main page. Adding that import is a part of the instructions. Not really sure how to improve this...