We Keep Coding

Importing PostCSS file as module returns SyntaxError

I've been trying to import PostCSS file as module in my TypeScript, using Parcel. I've followed a YouTube video partially (not fully because they're running an older version of Parcel.), and also followed some parts of the Parcel documentation. Parcel is transpiling the PostCSS to CSS properly, and even including the style in the HTML document, but it's also copying and pasting the transpiled CSS in the JavaScript tag instead of converting it to a proper module.export object and therefore causing a SyntaxError. I am very unsure what I could possibly have done wrong. I, either can't seem to find anyone whose had a similar issue, or am just bad at wording my issue.
{
// "modules": true,
"plugins": {
"postcss-import": true,
"postcss-url": true,
"postcss-nested": true
}
}
This is my .postcssrc, it's working as far as I know. When I add the "modules": true, it tells me to remove it and add "cssModules" in package.json instead
{
// ...
"#parcel/transformer-css": {
"cssModules": {
"pattern": "av-[hash]-[local]",
"global": true
}
},
"browserslist": [
"> 0.5%, last 2 versions, not dead"
]
}
This is contents in my package.json which is relevant to parcel. And these are the dependencies that were (mostly) automatically installed by Parcel.
import * as classes from "../css/style.pcss";
console.log(classes);
This is where I try to get the exported class modules, but It doesn't even log anything because of the SyntaxError.

Module parse failed: Unexpected token ? Optional chaining not recognised in threejs svgloader.js [duplicate]

Project setup:
Vuejs 3
Webpack 4
Babel
TS
We created the project using vue-cli and add the dependency to the library.
We then imported a project (Vue Currency Input v2.0.0) that uses optional chaining. But we get the following error while executing the serve script:
error in ./node_modules/vue-currency-input/dist/index.esm.js
Module parse failed: Unexpected token (265:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| getMinValue() {
| let min = this.toFloat(-Number.MAX_SAFE_INTEGER);
> if (this.options.valueRange?.min !== undefined) {
| min = Math.max(this.options.valueRange?.min, this.toFloat(-Number.MAX_SAFE_INTEGER));
| }
I read that Webpack 4 doesn't support optional chaining by default. So, we added the Babel plugin for optional chaining. This is our babel.config.js file:
module.exports = {
presets: ["#vue/cli-plugin-babel/preset"],
plugins: ["#babel/plugin-proposal-optional-chaining"],
};
(But, if I am correct, this plugin is now enable by default in the babel-preset. So this modification might be useless ^^)
One thing that I don't understand is that we can use optional chaining in the .vue files.
I created a SandBox with all the files: SandBox
How could I solve this error?

I was able to overcome this issue using #babel/plugin-proposal-optional-chaining, but for me the only way I could get Webpack to use the Babel plugin was to shove the babel-loader configuration through the Webpack options in vue.config.js. Here is a minimal vue.config.js:
const path = require('path');
module.exports = {
chainWebpack: config => {
config.module
.rule('supportChaining')
.test(/\.js$/)
.include
.add(path.resolve('node_modules/PROBLEM_MODULE'))
.end()
.use('babel-loader')
.loader('babel-loader')
.tap(options => ({ ...options,
plugins : ['#babel/plugin-proposal-optional-chaining']
}))
.end()
}
};
NB replace "PROBLEM_MODULE" in the above with the module where you have the problem.
Surprisingly I did not need to install #babel/plugin-proposal-optional-chaining with NPM. I did a go/no-go test with an app scaffolded with #vue/cli 4.5.13, in my case without typescript. I imported the NPM module that has been causing my grief (#vime/vue-next 5.0.31 BTW), ran the serve script and got the Unexpected token error on a line containing optional chaining. I then plunked the above vue.config.js into the project root and ran the serve script again, this time with no errors.
My point is it appears this problem can be addressed without polluting one's development environment very much.
The Vue forums are in denial about this problem, claiming Vue 3 supports optional chaining. Apparently not, however, in node modules. A post in this thread by atflick on 2/26/2021 was a big help.

Had same issue with Vue 2 without typescript.
To fix this you need to force babel preset to include optional chaining rule:
presets: [
[
'#vue/cli-plugin-babel/preset',
{
include: ['#babel/plugin-proposal-optional-chaining'],
},
],
],
Can also be achieved by setting old browser target in browserslist config.
Most importantly, you need to add your failing module to transpileDependencies in vue.config.js:
module.exports = {
...
transpileDependencies: ['vue-currency-input],
}
This is required, because babel by default will exclude all node_modules from transpilation (mentioned in vue cli docs), thus no configured plugins will be applied.

I had a similar problem. I'm using nuxt but my .babelrc file looks like the below, and got it working for me.
{
"presets": [
["#babel/preset-env"]
],
"plugins":[
["#babel/plugin-transform-runtime",
{
"regenerator": true
}
]
],
"env": {
"test": {
"plugins": [
["transform-regenerator", {
"regenerator": true
}],
"#babel/plugin-transform-runtime"
],
"presets": [
["#babel/preset-env", {
"useBuiltIns": false
}]
]
}
}
}

I managed to fix the solution by adding these lines to package.json:
...
"scripts": {
"preinstall": "npx npm-force-resolutions",
...
},
"resolutions": {
"acorn": "8.0.1"
},
...

VS Code: debugging of javascript. Different behaviour between Node.js versions

I try to learn how to use the debugger in VS Code for my Node.js application. I've found quite a few posts here and there about this, but I can't manage to have things work smoothly.
The end goal is to have a Typescript project with Babel 7 handling the compilation. And I want it to run on the latest version of Node.js (11.0.0).
I had average results so far, but I found a very good article on Medium which presents exactly what I want to do, except that it doesn't have typescript and it runs on Babel 6. But I figure that it is a great starting point to learn, so I try to reproduce it ... and I find that it doesn't behave the same way depending on the version of Node.js that I am running.
Here is what I do...
Running Node.js 8.12.0 and VS Code 1.28, I create a new project folder and I run the commands npm init -y and npm install --save-dev babel-cli babel-preset-es2015.
I update my package.json as follows:
// package.json
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1"
},
"babel": {
"presets": [
"es2015"
]
}
I then create 2 javascript files containing my code:
// src/app.js
import {add, multiply} from './math';
const num1 = 5, num2 = 10; // breakpoint on this line
console.log('Add: ', add(num1, num2));
console.log('Multiply: ', multiply(num1, num2));
// src/math.js
export function add(num1, num2) {
return num1 + num2; // breakpoint on this line
}
export function multiply(num1, num2) {
return num1 * num2; // breakpoint on this line
}
I update the package.json file with the following script
// package.json
"scripts": {
"compile": "babel src --out-dir .compiled --source-maps --watch"
},
When I run npm run compile, 4 files are created in the ./.compile/ folder, 2 of which are .map files.
Until now, everything goes fine. I then proceed with configuring the debugger in VS Code.
I create a .vscode/launch.json file and I edit it as follows:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch App.js",
"program": "${workspaceRoot}/src/app.js",
"outFiles": [
"${workspaceRoot}/.compiled/**/*.js"
]
}
]
}
After placing 3 breakpoints (see my comments in the code above) in my code, I run the debugger which stops on all 3 breakpoints.
Happy with my results, I update Node.js to v9.11.2. I run the debugger again, and it performs the same. Good.
Then, I update Node.js v10.13.0. Without modifying anything in VS Code or in my code, I run the debugger again. This time, only the breakpoint in src/app.js is considered. The 2 breakpoints in src/math.js are ignored. Why?
When updating Node.js to v11.0.0, I make the same observation.
I figure that something has changed in the way Node.js performs the debugging when they updated from v9.x.x to v10.x.x, but I can't find what.
I believe that I just need to configure launch.json a bit differently, and I have tried many things without success. My current launch.json is the following:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch App.js",
"program": "${workspaceFolder}/src/app.js",
"outFiles": [
"${workspaceFolder}/.compiled/**/*.js"
],
"sourceMaps": true,
"protocol": "inspector"
}
]
}
Any idea why it doesn't work with Node v10.x and above, and how I can fix this?
Many thanks!

Cov_ in javascript files, unsure which package, babel instanbul?

I'm unsure what package is causing additions in my source files when compiled to add things like this:
gcv = '__coverage__',
and
++cov_119g7nzanu.f[4];
++cov_119g7nzanu.s[26];
I suspect it's a testing package, but we don't do that yet, so I'd like to remove it until we do. Just not sure what to remove, I tried searching for it and found nothing. We're using gulp if that helps, but I hope someone will recognize these additions without having to scan a whole package.json file
Edit 1: It looks like Babel coverage from the plugin "instanbul" (https://github.com/istanbuljs/babel-plugin-istanbul) but I removed this from my package.json, rebuilt and still have it. Any ideas how to remove it?

I found the answer to this. It's using istanbul, and to turn off the coverage, go in the .babelrc file:
{
"presets": [
"es2015"
],
"env": {
"test": {
"plugins": [
"istanbul"
]
}
}
}
and remove the istanbul plugin:
{
"presets": [
"es2015"
],
"env": {
}
}

How do I get JUnit XML output from Jest?

I have a React app that has Jest tests. I'm configuring Jest in my package.json:
…
"jest": {
"setupEnvScriptFile": "./test/jestenv.js",
"setupTestFrameworkScriptFile": "./test/setup-jasmine-env.js",
"testRunner": "node_modules/jest-cli/src/testRunners/jasmine/jasmine2.js",
"unmockedModulePathPatterns": [
"./node_modules/q",
"./node_modules/react"
]
},
…
The setup-jasmine-env.js looks like this:
var jasmineReporters = require('jasmine-reporters');
jasmine.VERBOSE = true;
jasmine.getEnv().addReporter(
new jasmineReporters.JUnitXmlReporter({
consolidateAll: true,
savePath: "output/",
filePrefix: "test-results"
})
);
It took a bit of working to get that jasmine env setup correctly, but I"m not seeing anything in the output directory (indeed, it isn't created and creating it myself doesn't help). I suspect that my alterations to the jasmine var aren't the same one that Jest is using, but I can't figure out how to hook them together.

If you use a more recent version of jest (I'm looking at 16.0.2), you don't need to specify the testrunner because jasmine is the default. You also don't need the unmockedModulePathPatterns section of the jest config.
I.e. you just need to include the following devDependencies in your package.json:
"jasmine-reporters": "^2.2.0",
"jest": "^16.0.2",
"jest-cli": "^16.0.2"
And add this jest config to your package.json (note: you no longer need the unmockedModulePathPatterns section):
"jest": {
"setupTestFrameworkScriptFile": "./setup-jasmine-env.js"
}
And then use Drew's setup-jasmine-env.js from the question.

Jest has support for its own reporters via the testResultsProcessor config. So I wrote up a little thing that generates compatible junit xml for this. You can find it here. https://github.com/palmerj3/jest-junit

looks like all you're missing from the above setup is to add jasmine-reporters to unmockedModulePathPatterns, so give the following a go:
"jest": {
...
"unmockedModulePathPatterns": [
"./node_modules/q",
"./node_modules/react",
"./node_modules/jasmine-reporters"
]
},
Hope that helps!
UPDATE: for anyone else experiencing this problem, I have put a working demo up here.