[Bug]: Release 2.0.0-alpha module does not load in webpack projects

[danice]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

updating the materializecss library in an existing typescript-webpack project does not load module "M" needed to initialise components.
A similar situation seems to be affecting other users.

Current Behavior

Installing the library as an npm package and trying to import it with
import M from '@materializecss/materialize';
lets M undefined.

Expected behavior

It should have the M class exported in the global.ts.

Possible Solutions or Causes

It should be some problem with the configuration of the webpack module.

I have a test project (see "Steps to reproduce"). In that project loading some other simple typescript modules work so I'm doing proofs to found where is the problem with materialize project.

Also this project could help to add typescript interfaces definitions for the library (this could be a separate issue).

Steps to reproduce

I have created a webpack version of the materialize documentation to reproduce the issue
https://github.com/danice/materialize-docs-webpack

1. clone the project
2. execute npm install
3. execute npm run build
4. try to open any page

Your Environment

• Version used: 2.0.0-alpha
• Browser Name and version: Firefox last version
• Operating System and version (desktop or mobile): desktop
• Additional information you want to tell us:

[danice]

To test that the new version works with the webpack example project do the following:

1. clone the project
2. execute npm install
3. replace node_modules@materializecss\materialize\dist\js\materialize.js with the file generated by 'npm run release' (in materialize project) after the fix
4. execute npm run build
5. try to open any page

[wuda-io]

Ok sweet! I got it to run locally 👍

Also this project could help to add typescript interfaces definitions for the library (this could be a separate issue).

Yes! This is awesome, we should aim for this next. My VSCode said it needs some type definitions for Materialize... I will check if they are found automatically if implemented, or if the need to be compiled seperately (d.ts file?) somehow via webpack...

[Isukthar]

I just upgraded to 2.0.1-alpha but I still have the issue :
Uncaught ReferenceError: M is not defined

[danice]

I have created a very simple project to proof build materialize components with webpack.
You can get it here.

Can you provide some example project with materialize not loading?

[Isukthar]

Well, i fixed half of my issue.
I have a script.js :

import "./style.scss";
import "@materializecss/materialize/dist/js/materialize";

document.addEventListener("DOMContentLoaded", function () {
  var elems = document.querySelectorAll("select");
  M.FormSelect.init(elems, []);
});

If I change import with this import, it works now :
import M from '@materializecss/materialize';

But I still have an issue with some JS code embedded at the end of my main html :

    <footer>  
      {{>footer}}
    </footer>  
    <script type="text/javascript" src="script.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.autocomplete');
      var instances = M.Autocomplete.init(elems, {
        // my config
        ...
      });
    });
    </script>
  </body>
</html>

Maybe M was a global variable in previous versions and now has to be imported with dedicated import ?

[danice]

I think you should include the code in this last element script in your script.js.