Laravel-mix: Error on npm run production on shapecss

[MicroDreamIT]

I am have error on npm run production, and its killing me :(

/js/shapecss.js from UglifyJs Unexpected token: name (Accordion) [./~/shapecss/resources/assets/js/component/Accordion.js:1,0][/js/shapecss.js:19054,6]

I am using shapecss developed in laravel mix.

here is code is look like,

'use strict';

import {Accordion} from "./component/Accordion";
import {Modal} from "./component/Modal";
import {getTab} from "./component/Tab";
import {Nav} from "./component/Nav";
import {Circle} from "./component/shapes/Circle";
import {Parallelogram} from "./component/shapes/Parallelogram";
import {Rectangle} from "./component/shapes/Rectangle";
import {Square} from "./component/shapes/Square";


window.onload = function () {
  new Accordion();
  new Modal();
  getTab();
  new Nav();
  new Circle();
  new Parallelogram();
  new Rectangle();
  new Square();
}

Accordion class is look like,

export class Accordion{
        constructor(){
            this.accordionDivs = document.getElementsByClassName('accordion');
            if(this.accordionDivs)
            this.processAccordions();
        }
processAccordions() {
...
}

for detail please check,

Accordion class

and entry file,

[lucassmacedo]

have same problem

[lucassmacedo]

@JeffreyWay help us =(

[MicroDreamIT]

I have checked the reference and applied but did not worked. @JeffreyWay please take a look at it.

[MicroDreamIT]

Sure brother,

my webpack.mix.js file

mix.js('resources/assets/js/app.js', 'public/js/shapecss.js')
   .sass('resources/assets/sass/app.scss', 'public/css/shapecss.css')
    // .browserSync({'proxy':'localhost:8000'})
    // .options({processCssUrls: false})
    // .version()
;

my package.json file

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "cross-env": "4.0.0",
    "axios": "^0.15.3",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "compass-mixins": "^0.12.10",
    "font-awesome": "^4.6.3",
    "shapecss": "^2.1.3"
  }
}

[ruchern-chong]

Can you remove the curly braces { } for each import lines? Those are destructuring assigment.

More on destructuring assignments: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Example for Accordion:

import Accordion from './components/Accordion'

[MicroDreamIT]

Yes sir, I have applied, now the error is,

WARNING in ./~/shapecss/resources/assets/js/shape.js
22:6-15 "export 'default' (imported as 'Accordion') was not found in './component/Accordion'

[ruchern-chong]

@MicroDreamIT See if this works.

export default {
    window.onload = function () {
        new Accordion();
        new Modal();
        getTab();
        new Nav();
        new Circle();
        new Parallelogram();
        new Rectangle();
        new Square();
    }
}

[MicroDreamIT]

Sir I think the problem is on export default please take a look,

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                    4:19:45 PM


 error  in ./~/shapecss/resources/assets/js/shape.js

Module parse failed: C:\wamp64\www\OurProject\MicroDreamIT\node_modules\shapecss\resources\assets\js\shape.js Unexpected token (21:10)
You may need an appropriate loader to handle this file type.
|
| export default {
|     window.onload = function () {
|     new Accordion();
|     new Modal();

 @ ./resources/assets/js/bootstrap.js 4:15-63
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

[ruchern-chong]

Sorry, I think I read the error message wrongly.

Revert back to this in shapes.js

window.onload = function () {
    new Accordion();
    new Modal();
    getTab();
    new Nav();
    new Circle();
    new Parallelogram();
    new Rectangle();
    new Square();
    }

Try in Accordion,

export default {
    constructor() {
            this.accordionDivs = document.getElementsByClassName('accordion');
            if(this.accordionDivs)
            this.processAccordions();
        }
    processAccordions() {
        ...
    }
}

[MicroDreamIT]

sure sir let me try.

but if i follow this convention then i need to change the file structure, then how I am suppose to mention class name?

[MicroDreamIT]

no improvement,

 error  in ./~/shapecss/resources/assets/js/component/Accordion.js

Module parse failed: C:\wamp64\www\OurProject\MicroDreamIT\node_modules\shapecss\resources\assets\js\component\Accordion.js Unexpected token (8:4)
You may need an appropriate loader to handle this file type.
|             this.processAccordions();
|     }
|     processAccordions() {
|         for(let i=0; i<this._accordionDivs.length;i++){
|             let accordionDiv = this._accordionDivs[i];

 @ ./~/shapecss/resources/assets/js/shape.js 10:0-46
 @ ./resources/assets/js/bootstrap.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

[ruchern-chong]

@MicroDreamIT

Also to note, why did your shapecss ending up in node_modules? I thought you're creating the framework?

[MicroDreamIT]

@ruchern

Yes I have created this framework, now i am using it in other project, as other people will do in node_modules...

npm run watch, npm run dev all those are working well. But problem is on npm run production

I think the problem is uglifying or minifying the script.

[MicroDreamIT]

We need transformer to uglify the script. I think laravel-mix is not well configured for that or webpack has those problem. It was good previously.

https://github.com/material-components/material-components-web/issues/531

[MicroDreamIT]

@lucassmacedo any update?

[ruchern-chong]

@MicroDreamIT I'll pull your framework and try to run from my side. I was on the way home earlier.

Edit: I think your Framework is being done wrongly. Your package.json file does not have a main parameter to point to the JS file. And how are you even able to run ./component from right from Laravel itself when your shapecss-framework is in the node_modules directory.

[MicroDreamIT]

Sure Sir i will be waiting.

Yes That's may be could happen. But here is the site, https://shapecss.com works very well.

Here is the shapecss repository, waiting for your modification, https://github.com/MicroDreamIT/shapecss-framework/

Also I have used this in my bootstrap.js,

import uglify from 'rollup-plugin-uglify';
import { minify } from 'uglify-js-harmony';

uglify({}, minify);

now the error is showing,

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                                    5:57:11 PM


This dependency was not found:

* fs in ./~/uglify-js-harmony/tools/node.js, ./~/rollup-plugin-uglify/~/uglify-js/tools/node.js

[MicroDreamIT]

@ruchern @lucassmacedo any update bro?

[TheLarkInn]

This is not working be ause the es6 version of uglify has not landed yet, you will need to transpiled the js used to es5 before uglify can support it

[MicroDreamIT]

@TheLarkInn are you suggesting us to wait?

[TheLarkInn]

No im suggesting that you use a tool like babel to transpiled this code to es5 so uglify can minify it. ORRR use a tool like babili (babel-minify) to minify your code.

[JeffreyWay]

Mix's webpack config file doesn't run Babel on any files in your node_modules directory, so that's likely the issue.

[MicroDreamIT]

@JeffreyWay, I am really feeling great to have your reply. I have been trying to get your attention by tweeting and creating issues.

@TheLarkInn Thank you to join with me. Its an honor to get direction directly from you.

I have created a framework shapecss (you can take a look at the file structure). Though I am not too much knowledgeable person as you guys. I just tried to build some thing by my own. Usually my base is laracasts. I dont know grunt, or to much core webpack. I have used Laravel mix to create this framework.

I have followed code convention of Mix , I have found its pretty much es6 and compiling from node_modules.

The conclusion is, I need to convert my code to es5. If I am wrong please correct me and pardon me if my English is bad or for anything. I will be waiting for your answer.

Attachment

package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "uglify-js": "3.0.18",
    "uglifyjs-webpack-plugin": "^0.4.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "shapecss": "^2.1.3"
  }
}

and also I have tried,

Presets: es2015 in my .babelrc file in project root

[MicroDreamIT]

@TheLarkInn @JeffreyWay

Question 1: if I wanted to use babili (babel-minify) then what will be package.json , or root .babelrc or webpack.mix.js file will look like?

Question 2: If I want to use shapecss-framework like bootstrap or materialize as standalone package in node_modules then what will be the best way to go?