stealjs / steal-tools

Build easy. Load fast.
https://stealjs.com/docs/steal-tools.html
MIT License
67 stars 23 forks source link

[BABEL] Note: The code generator has deoptimised the styling of "unknown" as it exceeds the max of "500KB" #1071

Closed pYr0x closed 5 years ago

pYr0x commented 5 years ago

i use fontawesome for my iconset.

import { library, dom } from "@fortawesome/fontawesome-svg-core/index.es";

import {faBars, faFilePdf, faPrint, faDownload, faExpandArrowsAlt, faCogs, faEllipsisV, faUnlockAlt, faUser, faSignInAlt, faSignOutAlt, faUserMd, faHeartbeat} from "@fortawesome/free-solid-svg-icons/index.es";
import {faChartBar} from "@fortawesome/free-regular-svg-icons/index.es";

library.add(faBars, faFilePdf, faPrint, faDownload, faExpandArrowsAlt, faCogs, faEllipsisV, faUnlockAlt, faUser, faSignInAlt, faSignOutAlt, faUserMd, faHeartbeat);
library.add(faBars);
library.add(faChartBar);

dom.watch();

export default library;

if i want to create a production build i get the babel notice like in the header. after that i get an error

(node:8872) UnhandledPromiseRejectionWarning: Error: Line 4: Unexpected token
    at ErrorHandler.constructError (C:\wamp64\www\medicalpad\wwwroot\node_modules\esprima\dist\esprima.js:5012:22)
    at ErrorHandler.createError (C:\wamp64\www\medicalpad\wwwroot\node_modules\esprima\dist\esprima.js:5028:27)
    at Parser.unexpectedTokenError (C:\wamp64\www\medicalpad\wwwroot\node_modules\esprima\dist\esprima.js:1985:39)
    at Parser.tolerateUnexpectedToken (C:\wamp64\www\medicalpad\wwwroot\node_modules\esprima\dist\esprima.js:1998:42)
    at Parser.parseStatementListItem (C:\wamp64\www\medicalpad\wwwroot\node_modules\esprima\dist\esprima.js:3365:31)
    at Parser.parseScript (C:\wamp64\www\medicalpad\wwwroot\node_modules\esprima\dist\esprima.js:4723:29)
    at Object.parse (C:\wamp64\www\medicalpad\wwwroot\node_modules\esprima\dist\esprima.js:122:61)
    at getAst (C:\wamp64\www\medicalpad\wwwroot\node_modules\transpile\lib\get_ast.js:16:21)
    at Object.to (C:\wamp64\www\medicalpad\wwwroot\node_modules\transpile\main.js:83:15)
    at C:\wamp64\www\medicalpad\wwwroot\node_modules\steal-tools\lib\graph\transpile.js:131:22

it seems that babel trim the content and than the content is corrupt. i searched and found https://stackoverflow.com/questions/29576341/what-does-the-code-generator-has-deoptimised-the-styling-of-some-file-as-it-e/29857361

the @fortawesome/free-solid-svg-icons/index.es file is about 570kb.

they suggest to set compact: false i tried that in my package.json

  "steal": {
    "main": "medicalpad/index.stache!done-autorender/no-zone",
    "directories": {
      "lib": "src"
    },
    "configDependencies": [
      "live-reload",
      "node_modules/can-zone/register",
      "node_modules/steal-conditional/conditional"
    ],
    "plugins": [
      "done-css",
      "done-component",
      "steal-stache"
    ],
    "babelOptions": {
      "compact": false
    },

but it didnt work.

if you need a example i can create some.

pYr0x commented 5 years ago

https://github.com/stealjs/steal/blob/02d018f1b03e12ed8182fcf10578403255be5d2b/src/extension-tree-shaking.js#L284 should have compact: false

var code = babel.transform(load.source, {
                    plugins: babelPlugins,
                    compact: false
                }).code;

or something like this:

let opts = loader.babelOptions || {};
                opts.plugins = babelPlugins;

                var code = babel.transform(load.source, opts).code;
pYr0x commented 5 years ago

@matthewp what solution do you prefer?

matthewp commented 5 years ago

We don't want to pass in the babelOptions, we are only running babel for the sake of tree-shaking there, the transpiling happens elsewhere. So the first is the way to go here.