search

google / closure-compiler

A JavaScript checker and optimizer.
https://developers.google.com/closure/compiler/
Apache License 2.0
7.39k stars 1.15k forks source link

Vue.js variable __VUE_SSR_CONTEXT__ is undeclared #2809

Open h0tc0d3 opened 6 years ago

h0tc0d3 commented 6 years ago

Got a error. After add jscomp_off: "checkVars" option, vuejs died with erorr: TypeError: a is undefined.

ERROR in app.js from Closure Compiler
The compiler is waiting for input via stdin.
stdin:127: ERROR - variable __VUE_SSR_CONTEXT__ is undeclared
      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                             ^^^^^^^^^^^^^^^^^^^

stdin:1044: ERROR - variable WXEnvironment is undeclared
var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
                    ^^^^^^^^^^^^^

stdin:2428: ERROR - variable Proxy is undeclared
    typeof Proxy !== 'undefined' &&
           ^^^^^
Raiondesu commented 6 years ago

Anything on this yet?

MatrixFrog commented 6 years ago

Proxy is in the standard externs now I think, so that last error should go away on a future release. The others look like legitimate errors: you probably need to add custom externs files that define those two variables.

Raiondesu commented 6 years ago

@MatrixFrog, could you, please, specify what does "adding custom externs files" mean?

I, personally, struggle only with this one:

stdin:1044: ERROR - variable WXEnvironment is undeclared
var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
                    ^^^^^^^^^^^^^

I really can't understand why the error occurs, because the code displayed simply checks for undefined. Yet, the closure compiler says (as I understood it) that the variable needs to be defined in order to be checked on undefined, which makes no sense to me.

Raiondesu commented 6 years ago

When it comes to VUE_SSR_CONTEXT - this one is not external either. Both variables in the code are just checked on undefined. I just don't buy that the before-mentioned compiler is not able to "understand" that.

MatrixFrog commented 6 years ago

See https://developers.google.com/closure/compiler/docs/api-tutorial3#externs

It doesn't need to be defined -- it just needs to be declared in an externs file which tells the compiler that it might exist (and what type it will have in the event that it does exist). In this case all you need (at least to get rid of the errors reported here) is a file custom-externs.js:

/**
 * @fileoverview
 * @externs
 */

var __VUE_SSR_CONTEXT__;
var WXEnvironment;

and then pass --externs=custom-externs.js on the compiler command line. Hopefully that makes sense? If not let us know.

Raiondesu commented 6 years ago

Oh, so, that's what "externs" are. Thanks.

Any ideas on how to import these using official webpack plugin?

The documentation link you provided didn't really help, unfortunately, as simply passing file paths to a compiler - externs: ['externs.js'] - results in ERROR - Cannot read file externs.js: externs.js. (assuming the file externs.js exists in the same execution folder AND contains the code you wrote above)

MatrixFrog commented 6 years ago

That I don't know, sorry. Might be something @ChadKillingsworth could help with. Maybe the externs have to be in some other particular spot.

Raiondesu commented 6 years ago

Managed to pass a correct compiler option (worked only in "array" mode for compiler options):

[
        '--language_in', 'ECMASCRIPT6',
        '--language_out', 'ECMASCRIPT5',
        '--compilation_level', 'ADVANCED_OPTIMIZATIONS',
        '--externs', 'externs.js' /// this one
 ]

but after all this - get an unexpected error:

Error: write EOF
ChadKillingsworth commented 6 years ago

That's roughly correct- if the externs.js file is in your project root. But it should work just find with the standard options object.

ChadKillingsworth commented 6 years ago

Here's an example from one of my projects:

      new ClosureCompilerPlugin({
        mode: env.release ? 'AGGRESSIVE_BUNDLE' : 'NONE'
      }, {
        polymer_version: 2,
        externs: [
          require.resolve('@banno/polymer/externs/webcomponents-externs.js'),
          require.resolve('@banno/polymer/externs/closure-types.js'),
          require.resolve('@banno/polymer/externs/polymer-externs.js')
        ],
        hide_warnings_for: `/node_modules/`
      })
Raiondesu commented 6 years ago

@ChadKillingsworth, @MatrixFrog,

Sorry, but I still can't resolve this. Also I didn't quite understand the thing with 2 arguments for ClosureCompilerPlugin, since it clearly takes just 1 - options.

I have a couple of errors regarding different configs that I tried. I put them all below. The main error of this topic is absent in all of them.

OS: Windows 10

NPM: 5.6.0

Node: v8.9.1

My file structure:

- {project root}
    |- config/
    |   |- externs.js
    |   |- webpack.config.js
    |- package.json

Build script: webpack --mode production --config config/webpack.config.js (using WebPack 4).

Trials:

1. externs: path.join(...)

Compiler config:

new ClosureCompiler({
  jsCompiler: false,
  compiler: {
    language_in: 'ECMASCRIPT6',
    language_out: 'ECMASCRIPT5',
    create_source_map: 'dist/main.js.map',
    compilation_level: 'ADVANCED_OPTIMIZATIONS',
    externs: [path.join(__dirname, 'externs.js')]
  },
  concurrency: require('os').cpus().length
})

Error:

Error: EPERM: operation not permitted, unlink 'C:\Users\xps\AppData\Local\Temp\ccwp-dump-118222-1332-tl81vl.z5uk'
    at Object.fs.unlinkSync (fs.js:1061:18)
    at rimrafSync (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\temp\node_modules\rimraf\rimraf.js:211:13)
    at cleanupFilesSync (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\temp\lib\temp.js:88:5)
    at process.cleanupSync (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\temp\lib\temp.js:195:19)
    at emitOne (events.js:121:20)
    at process.emit (events.js:211:7)
    at process.emit (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\source-map-support\source-map-support.js:452:21)

P.S. And no, there's nothing even remotely similar to ccwp-dump-118222-1332-tl81vl.z5uk in my AppData/Local/Temp folder.

jsCompiler: true:

Outputs a file, but fails to run with.

Uncaught TypeError: Cannot set property 'zf' of undefined

Error log is still produced:

main.js:3431 (JSC_UNREACHABLE_CODE)
unreachable code
      if (false) {}
                 ^
...
main.js:7049 (JSC_WRONG_ARGUMENT_COUNT)
Function warn: called with 2 argument(s). Function requires at least 3 argument(s) and no more than 3 argument(s).
    "production" !== 'production' && warn(
                                     ^
main.js:8983 (JSC_TYPE_PARSE_ERROR)
Bad type annotation. expecting a variable name in a @param tag. See https://github.com/google/closure-compiler/wiki/Bad-Type-Annotation for more information.
 * @return {string}
   ^
...
main.js:9736 (JSC_USELESS_CODE)
Suspicious code. This code lacks side-effects. Is there a bug?
        if (false) {}
        ^
main.js:9736 (JSC_UNREACHABLE_CODE)
unreachable code
        if (false) {}
                   ^
main.js:9976 (JSC_UNKNOWN_TYPEOF_VALUE)
unknown type: symbol
  typeof Symbol.toStringTag === 'symbol';
                                ^
main.js:10077 (JSC_WRONG_ARGUMENT_COUNT)
Function abort: called with 0 argument(s). Function requires at least 1 argument(s) and no more than 1 argument(s).
    return abort()
               ^
main.js:10235 (JSC_WRONG_ARGUMENT_COUNT)
Function extractGuards: called with 3 argument(s). Function requires at least 4 argument(s) and no more than 4 argument(s).
  return extractGuards(updated, 'beforeRouteUpdate', bindGuard)
         ^
main.js:10251 (JSC_WRONG_ARGUMENT_COUNT)
Function extractGuards: called with 3 argument(s). Function requires at least 4 argument(s) and no more than 4 argument(s).
  return extractGuards(activated, 'beforeRouteEnter', function (guard, _, match, key) {
         ^
main.js:10343 (JSC_WRONG_ARGUMENT_COUNT)
Function pushState: called with 1 argument(s). Function requires at least 2 argument(s) and no more than 2 argument(s).
      pushState(cleanPath(this$1.base + route.fullPath));
      ^
main.js:10364 (JSC_WRONG_ARGUMENT_COUNT)
Function pushState: called with 1 argument(s). Function requires at least 2 argument(s) and no more than 2 argument(s).
      push ? pushState(current) : replaceState(current);
             ^
main.js:10507 (JSC_WRONG_ARGUMENT_COUNT)
Function pushState: called with 1 argument(s). Function requires at least 2 argument(s) and no more than 2 argument(s).
    pushState(getUrl(path));
    ^
main.js:10614 (JSC_USELESS_CODE)
Suspicious code. This code lacks side-effects. Is there a bug?
      if (false) {}
      ^
main.js:10614 (JSC_UNREACHABLE_CODE)
unreachable code
      if (false) {}
                 ^
main.js:10937 (JSC_NOT_FUNCTION_TYPE)
Object expressions are not callable
var Component = Object(_node_modules_vue_loader_lib_runtime_component_normalizer__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"])(
                ^
main.js:11105 (JSC_NOT_A_CONSTRUCTOR)
cannot instantiate non-constructor
    queue.push(new Item(fun, args));
               ^
main.js:11155 (JSC_WRONG_ARGUMENT_COUNT)
Function function: called with 1 argument(s). Function requires at least 2 argument(s) and no more than 2 argument(s).
/* WEBPACK VAR INJECTION */(function(global, process) {(function (global, undefined) {
                                                        ^
main.js:11353 (JSC_NOT_A_CONSTRUCTOR)
cannot instantiate non-constructor
  return new Timeout(apply.call(setTimeout, window, arguments), clearTimeout);
         ^

2. externs: require.resolve

Compiler config:

new ClosureCompiler({
  jsCompiler: false,
  compiler: {
    language_in: 'ECMASCRIPT6',
    language_out: 'ECMASCRIPT5',
    create_source_map: 'dist/main.js.map',
    compilation_level: 'ADVANCED_OPTIMIZATIONS',
    externs: [require.resolve('externs.js')]
  },
  concurrency: require('os').cpus().length
})

Error:

Error: Cannot find module 'externs.js'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.require.resolve (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\v8-compile-cache\v8-compile-cache.js:162:23)

jsCompiler: true:

Error: Cannot find module 'externs.js'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.require.resolve (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\v8-compile-cache\v8-compile-cache.js:162:23)

3. js_externs: 'var __VUE_SSR_CONTEXT__;var WXEnvironment;var DEBUG;'

Compiler config:

new ClosureCompiler({
  jsCompiler: false,
  compiler: {
    language_in: 'ECMASCRIPT6',
    language_out: 'ECMASCRIPT5',
    create_source_map: 'dist/main.js.map',
    compilation_level: 'ADVANCED_OPTIMIZATIONS',
    js_externs: 'var __VUE_SSR_CONTEXT__;var WXEnvironment;var DEBUG;'
  },
  concurrency: require('os').cpus().length
})

Error:

Error: write EOF
    at _errnoException (util.js:1024:11)
    at WriteWrap.afterWrite (net.js:867:14)

jsCompiler: true:

Error: java.lang.RuntimeException: Unhandled flag: jsExterns
    at zJ.YG (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\jscomp.js:7569:21751)
    at zJ._G (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\jscomp.js:7569:21952)
    at zJ.WG (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\jscomp.js:2197:48)
    at zJ.cH (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\jscomp.js:589:19)
    at new zJ (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\jscomp.js:593:19)
    at c6c (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\jscomp.js:7195:77)
    at QJ (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\jscomp.js:1737:29)
    at TJ (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\jscomp.js:3004:44)
    at C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\jscomp.js:3204:46
    at module.exports (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\compile.js:31:15)
    at files.forEach.name (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\lib\webpack.js:52:28)
    at Array.forEach (<anonymous>)
    at chunks.forEach.chunk (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\lib\webpack.js:40:17)
    at Array.forEach (<anonymous>)
    at compilation.plugin (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\google-closure-compiler-js\lib\webpack.js:38:16)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.additionalAssets.callAsync.err (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\webpack\lib\Compilation.js:943:36)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.optimizeTree.callAsync.err (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\webpack\lib\Compilation.js:939:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\tapable\lib\Hook.js:35:21)
    at Compilation.seal (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\webpack\lib\Compilation.js:881:27)
    at hooks.make.callAsync.err (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\webpack\lib\Compiler.js:480:17)
    at _done (eval at create (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:9:1)
    at _err1 (eval at create (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:32:22)
    at _addModuleChain (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\webpack\lib\Compilation.js:749:12)
    at processModuleDependencies.err (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\webpack\lib\Compilation.js:688:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

So, even if I do anything wrong - I have no clue regarding what...

ChadKillingsworth commented 6 years ago

@Raiondesu Make sure you use this webpack plugin: https://github.com/webpack-contrib/closure-webpack-plugin

Raiondesu commented 6 years ago

@ChadKillingsworth, using your plugin:

node_modules\webpack\lib\Chunk.js:438
                throw new Error("Chunk.parents: Use ChunkGroup.getParents() instead");
        ^
Error: Chunk.parents: Use ChunkGroup.getParents() instead
    at Chunk.get (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\webpack\lib\Chunk.js:438:9)
    at isTargetChunk (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\closure-webpack-plugin\src\index.js:602:22)
    at allChunks.forEach (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\closure-webpack-plugin\src\index.js:609:11)
    at Array.forEach (<anonymous>)
    at Function.buildChunkMap (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\closure-webpack-plugin\src\index.js:608:15)
...
    at _done (eval at create (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:9:1)
    at _err1 (eval at create (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:32:22)
    at _addModuleChain (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\webpack\lib\Compilation.js:749:12)
    at processModuleDependencies.err (C:\Users\xps\Documents\Programming\Projects\Own\webpack-vue-ts\node_modules\webpack\lib\Compilation.js:688:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

I guess this one is WebPack 4 related (some of the features got deprecated).

ChadKillingsworth commented 6 years ago

Make sure you are using webpack 3.x