Topic: Transpiler with quick-start installation

Spanners pro asked 4 years ago

Hi there - hope somebody can help with a newby's question, If I follow the quick-start instructions here and then make a small change to add a component that requires transpiling (for example one that needs waves.js in the mixins folder), the page is blank in IE11 because of an exception caused by it not understanding the method shorthand syntax. Does anyone know what config changes I need to make to the default installation in order to get it to transpile for IE11? I'm new to the whole NPM/Webpack/Babel world, and I've been fighting with it all day to no avail. One thing I noticed is that the default vue-cli installation is for Version 3 which comes with Babel 7, whereas the mdbvue package uses Babel 6 - not sure if that should still work ok, and if so what config is required. Many thanks for any help anyone can provide. Span.

Jakub Strebeyko staff answered 4 years ago

Hi there, Well, it is rare use case to try and include the package.json modules (that resolve in the /node_modules/ directory) into your webpack workflow. When you download packages (or 'modules', whichever you prefer), they get 'included' into your project, from within which they stay safe and accessible through the import statement - you can literally use them wherever you want using simply
import {nameOfWhatYouWant} from 'whateverNodeModuleInNode_ModulesFolder';
Whenever you compile for development (depending on how the package was built it could be yarn / npm start or yarn / npm serve) or for production (usually yarn/npm build), webpack transpiles the whole project and its dependencies with respect to what and where has been imported. It does so, so you don't have to - node_modules shall be included into the final build only in extent they are used inside the project. In other words, in the solution webpack compiles not only the project, but the mdbvue module as well, what I guess makes sense in case one wants to streamline and change all of the package's components. Even then, it seems a rather inefficient technique to have it all be 'digested' by webpack every time. Could you perhaps provide some code with explanation of what you want to do / change in MDBVue? With Best Regards, Kuba

Spanners pro answered 4 years ago

Hi Kuba, Thanks for your reply. Yes, I am including mdbvue as an external module to my project, as per the "Existing Project" section in the quick start guide. I am not sure why that would be a rare use case though? It seemed like the most logical approach to me, as it means that my Components directory will only contain my application code and won't be confused with the mdbvue components, but maybe I am missing something important? Thanks, John.

Jakub Strebeyko staff answered 4 years ago

Hi there Span, This sounds like a compilation problem, but am not entirely sure whether usage of Babel 6 instead of 7 should be blamed - hard to figure out without the exact IE console output, too. Question: where exactly do you get your package from? If the package you downloaded contains our source code (i.e. /src/components/Button.vue) not as a dependency and this is where you are changing things, then the compiler should be just fine with doing its job automatically. The solution suggests including `mdbvue`, here added as an external module, into the webpack workflow, which would be a relatively rare use-case. Anyway, happy to know it helped with the IE issue. Best regards, Kuba

Spanners pro answered 4 years ago

Further to the above... I have finally made some progress, and maybe this will help someone else if they have the same problem... The code will transpile and run on IE11 if I edit the default webpack.base.conf.js file and add an entry:
to the 'babel-loader' include rule. Not sure if this is the proper way to do it though, and whether you would expect to have to do this? If so, maybe the quick-start instructions could be updated to reflect this? Thanks, Span.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 4.6.0
  • Device: PC
  • Browser: IE11
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes