Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compile angular 7 app with Babel 7 either lead to buggy code or fails #10297

Open
deadmann opened this issue Aug 4, 2019 · 5 comments

Comments

@deadmann
Copy link

commented Aug 4, 2019

v7 Regression

First of all, i tried so many things, i'm wonder if i can find anything different on stack or other places.

As some tutorial i write some code, which were not much more than 10 line codes, but after getting n'th errors it get like this:

const path = require('path');

module.exports = {
    entry: {
        app: './../AshianeApp/dist/AshianeApp/main.7f761bb26029cb314ad9.js',
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'],
                // presets: ["@babel/preset-stage-2"],
                plugins: [
                    [
                        "@babel/plugin-transform-runtime",
                        {
                            "absoluteRuntime": false,
                            "corejs": false,
                            "helpers": true,
                            "regenerator": true,
                            "useESModules": false
                        }
                    ],
                    '@babel/plugin-transform-classes',
                    [
                        "@babel/plugin-proposal-decorators",
                        {
                            "legacy": true,
                        }
                    ],
                    "@babel/plugin-proposal-class-properties"
                ],
                // plugins: [
                //     // Stage 2
                //     ["@babel/plugin-proposal-decorators", { "legacy": true }],
                //     "@babel/plugin-proposal-function-sent",
                //     "@babel/plugin-proposal-export-namespace-from",
                //     "@babel/plugin-proposal-numeric-separator",
                //     "@babel/plugin-proposal-throw-expressions",
                
                //     // // Stage 3
                //     // "@babel/plugin-syntax-dynamic-import",
                //     // "@babel/plugin-syntax-import-meta",
                //     // ["@babel/plugin-proposal-class-properties", { "loose": false }],
                //     // "@babel/plugin-proposal-json-strings"
                //   ]
                compact: false
            }
        }]
    }
}
{
  "name": "my-babel-compiler",
  "version": "0.0.0",
  "description": "make project for google crawlers",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "private": true,
  "dependencies": {
    "@babel/runtime": "^7.5.5"
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
    "@babel/plugin-proposal-function-sent": "^7.5.0",
    "@babel/plugin-proposal-json-strings": "^7.2.0",
    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-syntax-import-meta": "^7.2.0",
    "@babel/plugin-transform-classes": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-stage-2": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-builtin-classes": "^0.6.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "nodemon": "^1.19.1",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

What I am after:
Since google crawler generate error on Angular 7 compiled code, i wish to recompile it using babel.
Does it works?
It worked before my project exceed 500KB compilation size, then babel stop working, so after some research, i wished to launched it via compact: false flag.

I get any kind of errors... the file i'm looking to compile:
https://www.ashiane.house/main.7f761bb26029cb314ad9.js

it generate errors before compile like:

> my-babel-compiler@0.0.0 build F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel
> webpack

F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\webpack.config.js:53
                compact: false
                ^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at NativeCompileCache._moduleCompile (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\v8-compile-cache\v8-compile-cache.js:240:18)
    at Module._compile (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\v8-compile-cache\v8-compile-cache.js:186:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\webpack-cli\bin\utils\convert-argv.js:116:13)
    at requireConfig (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\webpack-cli\bin\utils\convert-argv.js:118:6)
    at F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
    at Array.forEach (<anonymous>)
    at module.exports (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
    at yargs.parse (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\webpack-cli\bin\cli.js:71:45)
    at Object.parse (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
    at F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\webpack-cli\bin\cli.js:365:3)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-babel-compiler@0.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-babel-compiler@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hassan\AppData\Roaming\npm-cache\_logs\2019-08-04T04_54_57_394Z-debug.log
PS F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel> npm run build

> my-babel-compiler@0.0.0 build F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel
> webpack


<--- Last few GCs --->

[8504:000001DD2A9C64A0]   442395 ms: Scavenge 1310.3 (1423.4) -> 1309.5 (1423.9) MB, 18.3 / 0.0 ms  (average mu = 0.248, current mu = 0.237) allocation failure
[8504:000001DD2A9C64A0]   442419 ms: Scavenge 1310.4 (1423.9) -> 1309.6 (1424.4) MB, 10.3 / 0.0 ms  (average mu = 0.248, current mu = 0.237) allocation failure
[8504:000001DD2A9C64A0]   442436 ms: Scavenge 1310.5 (1424.4) -> 1309.6 (1424.9) MB, 7.5 / 0.0 ms  (average mu = 0.248, current mu = 0.237) allocation failure


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 00000148F4CDC5C1]
Security context: 0x03665291e6e9 <JSObject>
    1: m(aka m) [000003FD0B912B09] [F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\terser\dist\bundle.min.js:~1] [pc=00000148F5E4ED87](this=0x01596b3826f1 <undefined>,t=0x03657e351669
<String[2]: t0>,n=0x00e0fc882521 <String[1]: ">)
    2: print_string [000003FD0B912B49] [F:\Project2017\S1\BaseProject\RealEstate\RealEstate...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF74531F04A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+5114
 2: 00007FF7452FA0C6 node::MakeCallback+4518
 3: 00007FF7452FAA30 node_module_register+2032
 4: 00007FF7455820EE v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF74558201F v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF745AA2BC4 v8::internal::Heap::MaxHeapGrowingFactor+9556
 7: 00007FF745A99C46 v8::internal::ScavengeJob::operator=+24310
 8: 00007FF745A9829C v8::internal::ScavengeJob::operator=+17740
 9: 00007FF745AA0F87 v8::internal::Heap::MaxHeapGrowingFactor+2327
10: 00007FF745AA1006 v8::internal::Heap::MaxHeapGrowingFactor+2454
11: 00007FF74565CDB7 v8::internal::Factory::NewFillerObject+55
12: 00007FF7456F2CC6 v8::internal::WasmJs::Install+29414
13: 00000148F4CDC5C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! my-babel-compiler@0.0.0 build: `webpack`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the my-babel-compiler@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hassan\AppData\Roaming\npm-cache\_logs\2019-08-04T05_03_48_709Z-debug.log

, or either after compile:

ReferenceError: regeneratorRuntime is not defined

Any idea how to do it like the babel website? just with extra compact: false flag? it's my 3rd day searching, and i'm really tired of this :|

Environment

  • Babel version(s): ^7.5.5
  • Node/npm version: Node v10.15.3/NPM 6.4.1
  • OS: Windows 10
  • Monorepo ?????
  • How you are using Babel: webpack
@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Aug 4, 2019

Hey @deadmann! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

@JLHwung

This comment has been minimized.

Copy link
Contributor

commented Aug 4, 2019

at NativeCompileCache._moduleCompile (F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\v8-compile-cache\v8-compile-cache.js:240:18)

It seems like for some reason the v8-compile-cache has invalidated cache. Could you remove the v8-compile-cache directory and try again?

Note that you can print the cache directory by

node -e "console.log(require('v8-compile-cache').getCacheDir())"
@deadmann

This comment has been minimized.

Copy link
Author

commented Aug 4, 2019

Here how it went... i run the build command, then run the command you gave me.

PS F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel> npm run build

> my-babel-compiler@0.0.0 build F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel
> webpack


<--- Last few GCs --->

[9208:000002C392928210]   162469 ms: Scavenge 1310.9 (1437.9) -> 1295.9 (1438.4) MB, 10.1 / 0.0 ms  (average mu = 0.395, current mu = 0.416) allocation failure
[9208:000002C392928210]   162596 ms: Scavenge 1311.6 (1438.4) -> 1296.3 (1439.4) MB, 9.4 / 0.0 ms  (average mu = 0.395, current mu = 0.416) allocation failure
[9208:000002C392928210]   162708 ms: Scavenge 1312.1 (1439.4) -> 1297.0 (1440.4) MB, 6.9 / 0.0 ms  (average mu = 0.395, current mu = 0.416) allocation failure


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 000001DF4215C5C1]
Security context: 0x02ed9511e6e9 <JSObject>
    1: /* anonymous */(aka /* anonymous */) [000002CC97C8EC79] [F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel\node_modules\terser\dist\bundle.min.js:~1] [pc=000001DF42F9EBAD](this=0x0149cc5026f1 <undefined>,e=0x02334ee93f41 <AST_Var map = 000000C952C5BE31>,n=0x01802fd18291 <mn map = 00000133287D9C29>)
    2: /* anonymous */ [0000035A9...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF78B48F04A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+5114
 2: 00007FF78B46A0C6 node::MakeCallback+4518
 3: 00007FF78B46AA30 node_module_register+2032
 4: 00007FF78B6F20EE v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF78B6F201F v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF78BC12BC4 v8::internal::Heap::MaxHeapGrowingFactor+9556
 7: 00007FF78BC09C46 v8::internal::ScavengeJob::operator=+24310
 8: 00007FF78BC0829C v8::internal::ScavengeJob::operator=+17740
 9: 00007FF78BC10F87 v8::internal::Heap::MaxHeapGrowingFactor+2327
10: 00007FF78BC11006 v8::internal::Heap::MaxHeapGrowingFactor+2454
11: 00007FF78B7CCDB7 v8::internal::Factory::NewFillerObject+55
12: 00007FF78B862CC6 v8::internal::WasmJs::Install+29414
13: 000001DF4215C5C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! my-babel-compiler@0.0.0 build: `webpack`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the my-babel-compiler@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hassan\AppData\Roaming\npm-cache\_logs\2019-08-04T18_27_30_880Z-debug.log
PS F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel> node -e "console.log(require('v8-compile-cache').getCacheDir())"
[eval]:1
console.log(require('v8-compile-cache').getCacheDir())
                                        ^

TypeError: require(...).getCacheDir is not a function
    at [eval]:1:41
    at Script.runInThisContext (vm.js:119:20)
    at Object.runInThisContext (vm.js:326:38)
    at Object.<anonymous> ([eval]-wrapper:6:22)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at evalScript (internal/bootstrap/node.js:589:27)
    at startup (internal/bootstrap/node.js:265:9)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
PS F:\Project2017\S1\BaseProject\RealEstate\RealEstate\ClientApp\Babel>
@JLHwung

This comment has been minimized.

Copy link
Contributor

commented Aug 6, 2019

Oh, my bad, it should be

node -e "console.log(require('v8-compile-cache').__TEST__.getCacheDir())"

Anyway, from you log above, the cache has been reset and the SyntaxError: Unexpected identifier is gone. So we are good on cache part.

The errors comes from that Webpack runs out of memory, please refer to webpack/webpack#1914 (comment)

But I guess it relates to your approach to recompile an Angular compiled code. It is unusual and personally I would recommend you stick with Angular Compiler if you are writing TypeScript only.

@JLHwung JLHwung added i: question and removed i: bug labels Aug 6, 2019

@deadmann

This comment has been minimized.

Copy link
Author

commented Aug 13, 2019

I'm in middle of moving to another city, and i lost track of things, so i revert, and delete some packages , and the old thing compiled well with old stuff, on the actual website....
BTW the packages i installed were some of CKEditor 5 packages.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.