Why is compiling my Closure code with Plovr giving me weird symbols? - google-closure-compiler

I ran java -jar ~/PlovrFiles/plovr.jar build ~/js/config.js > /tmp/compiled.js
However, the Closure compiler issues a bizarre error with weird symbols such as RPP?LQ?RP*)?K??,)I?S??$?d?$?.
Exception in thread "main" com.google.gson.JsonSyntaxException: com.google.gson.stream.MalformedJsonException: Expected literal value near ??*??RPP?LQ?RP*)?K??,)I?S??$?d?$? ???
at com.google.gson.JsonParser.parse(JsonParser.java:64)
at com.google.gson.JsonParser.parse(JsonParser.java:44)
at org.plovr.ConfigParser.createBuilderFromFile(ConfigParser.java:29)
at org.plovr.ConfigParser.parseFile(ConfigParser.java:98)
at org.plovr.cli.BuildCommand.runCommandWithOptions(BuildCommand.java:55)
at org.plovr.cli.BuildCommand.runCommandWithOptions(BuildCommand.java:31)
at org.plovr.cli.AbstractCommandRunner.runCommand(AbstractCommandRunner.java:41)
at org.plovr.cli.Command.execute(Command.java:47)
at org.plovr.cli.Main.mainWithExitCode(Main.java:56)
at org.plovr.cli.Main.main(Main.java:30)
Caused by: com.google.gson.stream.MalformedJsonException: Expected literal value near ??*??RPP?LQ?RP*)?K??,)I?S??$?d?$? ???
at com.google.gson.stream.JsonReader.syntaxError(JsonReader.java:1111)
at com.google.gson.stream.JsonReader.readLiteral(JsonReader.java:1079)
at com.google.gson.stream.JsonReader.nextValue(JsonReader.java:808)
at com.google.gson.stream.JsonReader.quickPeek(JsonReader.java:382)
at com.google.gson.stream.JsonReader.peek(JsonReader.java:340)
at com.google.gson.JsonParser.parse(JsonParser.java:59)
... 9 more
t.js
At first, I thought these symbols were due to the hidden cache files produced by my text editor JEdit. However, deleting those files did not do away with this error. None of the files in my path seem to have these symbols. Any advice on where I could look to debug this error?
Here is my simple config.js file.
// File: config.js
{
"id": "myApp",
"paths": ".",
"inputs": "mainengine.js"
}

Related

NextJS Error - HookWebpackError: Expected a pseudo-class or pseudo-element

I get the following error when running next build:
HookWebpackError: Expected a pseudo-class or pseudo-element.
at makeWebpackError (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:308185)
at /Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:105236
at eval (eval at create (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:34:1)
-- inner error --
Error: Expected a pseudo-class or pseudo-element.
at /Users/eliot/Developer/eliothertenstein.com/static/css/66780ddc5f37cb3b.css:906:3
at Root._error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78465)
at Root.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:124360)
at Parser.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:86811)
at Parser.expected (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93145)
at Parser.pseudo (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:89313)
at Parser.parse (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92668)
at Parser.loop (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92233)
at new Parser (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78322)
at Processor._root (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95242)
at Processor._runSync (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95749)
caused by plugins in Compilation.hooks.processAssets
(See the full error at https://pastebin.com/JLQ2aR2f)
I've been trying to debug this issue for ~3hrs, and it's driving me crazy. I would appreciate any help on how I could better debug the next build command? I tried using the --debug flag, but it didn't seem to do anything.
So far I know this is an issue with tailwindcss (I assume postcss), as when I remove that section of my global.scss the program works again (or actually after I comment out the full file EXCEPT for tailwind it still breaks, commenting out tailwind leads to other issues).
Oh, some other debugging I've tried:
Searching through my entire project w/ regex to find any invliad tailwind classes (using (["'])(.*\b\w+: )(.*)(\1) to locate classes like md: text-red-600 but not md:text-red-600)
reinstalled all node_modules
commenting out all CSS files (which stops the issue!)
used both yarn classic and node to run the command (and npx) as opposed to yarn v3 which is what I currently use for development
Any help is appreciated!
It turns out the answer was an error in tailwind.config.js. One of my keyframes looked like this:
expand: {
...
'80%:': {
opacity: 0.5,
},
...
},
Notice the double colon after 80%.
I would encourage everyone with this issue to check classNames, .css files, and also tailwind.config.js for any extra colons.

Tsickle says "Error No inputs were found in config file" if I call it with tsconfig.json in a different directory

Calling tsickle with
tsickle --externs=target/externs.js -- -p target/src
I get this error:
Error No inputs were found in config file 'target/src/tsconfig.json'. Specified 'include' paths were '["./my/pathes/**/*.ts"]' and 'exclude' paths were '["some/other/thing"]'.
Why? Considering that tsickle is only a wrapper around tsc, if I do an equivalent tsc call, it happens without any problem. Something must go bad in the tsickle-tsc interaction, but what?
According to this Github issue, there is some incompatibility between tsickle and the typescript.
The probable reason can be that neither side want to admit that it is their mistake, thus none of them wants to fix it.
The solution is this: either the tsconfig.json given to the tsickle should have an absolute path, or the include: in this tsconfig.json should use an absolute path.
Considering that the .json format is not a very configurable thing (for example, you simply can't give an include: [ __dirname + '/my/lib/**.ts' ] setting in it), the probably better option is to simply give an absolute path to the tsickle.
In my case, I simply extended an arguments: ['-p', 'src/tsconfig.json'] in my Gruntfile to arguments: ['-p', __dirname + 'src/tsconfig.json']. If you use a different build tool, your actual solution my differ from it, but it is the important part.

My LESS sourceMap file is missing the "file" when run through grunt

When I run lessc --source-map=styles.map assets/less/00_style.less dest/assets/prod.css in the command line, everything is working. The styles.map file ends in:
...AV2rEF;EAAiB,aAAA","file":"dest/assets/prod.css"}
However, when I run grunt less, the styles.map is missing the "file" part and just ends in:
...AV2rEF;EAAiB,aAAA"}
This stops the SourceMap from working. What could be going wrong? My less config is as follows:
less: {
dist: {
options: {
sourceMap: true,
sourceMapFilename: 'styles.map'
},
files: [{
src : 'assets/less/00_style.less',
dest: 'dest/assets/prod.css'
}]
}
}
Short answer:
Add the following additional option to your less Task in Gruntfile.js:
...
options: {
...
sourceMapURL: '../../styles.map'
},
...
Long answer:
When running the lessc command via the CLI, (as per your example), notice the the following comment is written to the resultant prod.css:
/*# sourceMappingURL=../../styles.map */
However, when running the grunt task, (using your current config), the following comment is written into the resultant prod.css:
/*# sourceMappingURL=styles.map */
Note the missing ../../ - therefore prod.css can't find styles.map
This is why your SourceMap isn't working and not so much to do with the "file:" missing in styles.map when run via grunt. The .css file ultimately points to the .map file - not vice versa.
Even after running the lessc command via the CLI then deleting the "file:" part from styles.map you will find that the SourceMap still works in the browser. Indicating that the "file:" part, whether included in the .map file or not, has no effect on preventing the SourceMap from working.
Besides, as noted in the most recent proposed SourceMap spec (v.3) the "file:" part is optional:
Line 3: An optional name of the generated code that this source map is associated with.
Explicitly defining the sourceMapURL in your grunt Task options will entail having to keep a flat folder structure inside the dest/assets/ directory if you intend on using multiple .less files. (I.e. You'll need to avoid saving any resultant .css files in subfolders)

SCSS compiler not working properly in PyCharm

I am trying to set up a SCSS transpiler in PyCharm for Django project.
Basically, what I need is to convert /static/scss/main.scss to /static/css/main.css
Here are the configurations of SCSS File Watcher:
Program: /home/maverick/.rvm/gems/ruby-2.2.3/bin/scss
Arguments: --no-cache --update /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
Working directory: /home/maverick/Documents/DjangoProjects/timberg/static/scss
Output paths to refresh: /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
What is happening is that main.css is being generated where it should. But it contains only errors, not the expected css, like this:
/*
Error: Inconsistent indentation: 2 spaces were used for indentation, but the rest of the document was indented using 8 spaces.
on line 39 of /home/maverick/Documents/DjangoProjects/timberg/static/css/main.css
and etc.
What is wrong here? How can I fix it?
The problem was in the Arguments part.
It should be:
$FileName$:/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
not just:
/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
My mistake was leaving out $FileName$: at the beginning.

google Closure Compiler reports: JSC_TRAILING_COMMA

Im using google Closure Compiler to compress my js, anyhow I get the following error message:
JSC_TRAILING_COMMA: Parse error. Internet Explorer has a non-standard intepretation of trailing commas. Arrays will have the wrong length and objects will not parse at all. at line 8698 character 5 in post-login.js
];
The error is in the first line of this code, but I could not figure out whats wrong with it...
var plot = $.jqplot('usst_points_last_10_days', [data], {
title: '<h3 class="startGrafHeadline">' + global_language['discriptive']['usst']['visits_in_detail'] + '</h3>',
seriesColors: ["#00FF00"],
series: [{renderer:$.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
Try looking at the line just before the line that the compiler is complaining about. This will be the last line is some other file, perhaps.
If you examine your command line or build script, that will lead you to the answer. It seems likely that you are compiling multiple files or are pre-concatenating many files before compilation. What closure compiler is telling you is to look at line 8698.
If you have some logical explanation about why you think the error is contained in this code, please let us know your reasoning.
If you post more information, I may be able to improve this answer.
There is a handy tool for using closure-compiler through a web UI that may help you convince yourself that you have not found the offending line:
http://closure-compiler.appspot.com

Resources