Laravel-mix: Babel doesn't transform libraries in node_modules

[leo108]

• Laravel Mix Version: 4.0.12
• Node Version: 8.12.0
• NPM Version: 6.4.1
• OS: macOS 10.14.2

Description:

Babel doesn't transform libraries in node_modules, e.g. arrow functions / classes

Steps To Reproduce:

1. create a fresh new Laravel project

$ laravel new mix-test

1. add vanilla-lazyload as node dependency

$ yarn add vanilla-lazyload

1. require vanilla-lazyload in bootstrap

resources/js/bootstrap.js

window.LazyLoad = require("vanilla-lazyload");

1. run yarn watch

$ yarn watch

1. open public/js/app.js

and search getDefaultSettings

will see

var getDefaultSettings = () => ({
    elements_selector: "img",
    .
        .
        .
});

and this will cause a syntax error in IE11.

[ankurk91]

Do it like this -

window.LazyLoad = require("vanilla-lazyload/dist/lazyload.js")

[risingphoenix]

Also I have the same situation (and sorry for my English)

• Laravel Mix Version: 4.0.12
• Node Version: 8.9.4
• NPM Version: 5.6.0
• OS: Win 7 x64

Description:

I have a slightly different situation, but the polyfill process (my target is always IE11) is not activated for Vue components present in node_modules.

In the resources/js/components folder of my project, I have Vue sources that import other basic (developed by me) that are present inside the node_modules folder.

The JS source code of the latter basic Vue components (Dropdown, Typeahead, DatePicker etc.) is not modified, but the html template is correctly compiled.

I tried different configurations of the .babelrc file without any success.

{
  "presets": [
    [ "@babel/preset-env", {
      "useBuiltIns": "entry",
      "targets" : "last 2 versions, not ie <= 10",
      "debug": true
    }]
  ]
}

I used the entryoption (including @babel/polyfill inside the bootstrap.js), but even with the usage option my Vue modules inside the node_modules are not processed by the polyfill.

I'm not a babel or webpack expert, but with the previous version of Mix I was using (2.1) everything worked correctly.

Below an example of my inclusion of a component within a Vue component Customer.vue.

<template>
<div class="">
  <!-- -->
</div>
</template>

<script>
export default {
  name: 'Customer',

  components: {
    'Typeahead': require('my-vue/components/Typeahead.vue').default,
  },

  // ... 
};
</script>

Nothing changes with the suggestions in the documentation

import Typeahead from 'armory-vue/components/form/Typeahead.vue';

<script>
export default {
  name: 'Customer',

  components: {
    'Typeahead': Typeahead,
  },

  // ... 
};
</script>

I thank everyone in advance

[ankurk91]

node_modules is always excluded for babel-loader

[leo108]

@ankurk91 is it possible to force transform codes from node_modules, I don't want to check IE11 every time I introduce a new JS library into the project.

[ankurk91]

I wont recommend doing that, i am doing it like this

<!-- Detect IE browser and conditionally load polyfill -->
<script>
  function isIE() {
    return navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0
  }
</script>
<script>!isIE() || document.write('<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes">\x3C/script>')</script>

[leo108]

@ankurk91 I don't think polyfill can make IE support arrow function classes etc.

https://stackoverflow.com/questions/46364115/is-there-a-polyfill-for-es6-arrow-function

[ankurk91]

hmm, essentially the package you are using should provide a es5 dist file.
See
https://unpkg.com/[email protected]/dist/

Are you importing the source (es6) code from node_modules folder in your project?

the package you are referring to already supplies the es5 build
https://unpkg.com/[email protected]/dist/lazyload.js

[risingphoenix]

@ankurk91 it's partially true, in the 2.1 version the Vue component in node_modules I included in my or Vue files were correctly processed and converted.

In both version 4 and version 2, I add a particular configuration for managing JS classes and the loader/polyfill operate correctly

mix.webpackConfig({
  entry: {
    '/js/app' : ['babel-polyfill'],
  },
  module: {
    rules: [{
      test: /\.class\.js?$|my-vue\\class\\.*?\.js$/,
      use: [{ loader: 'babel-loader', options: Config.babel() }]
    }]
  },
  // ...
});

I tried to use your advice to include polyfill.io, but IE11 stops on a syntax error to the declaration of a ES6 JS class.

[thijsvdanker]

Thx @risingphoenix

Overriding the config from https://github.com/JeffreyWay/laravel-mix/blob/master/src/components/JavaScript.js#L72 by removing node_modules from the exclude parameter does the job for me:

```js
mix.webpackConfig({
module: {
rules: [
{
test: /.jsx?$/,
exclude: /(bower_components)/,
use: [
{
loader: 'babel-loader',
options: Config.babel()
}
]
}
]
}
});

[risingphoenix]

@thijsvdanker thank you so much, now everything works smooth like in the previous version
sorry for the delay in the reply

[poldixd]

@thijsvdanker thanks! I have the issue with default function parameter and the IE11... Laravel Mix don't transform the libs in the node_modules...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.