TypeError: The plugin "transform-es2015-modules-commonjs" didn't export a Plugin instance - babeljs

I faced a problem that my existing code stopped working, and I can't get what's the reason for that problem, I have pretty simple program that transpiles ES6 code:
TypeError: The plugin "transform-es2015-modules-commonjs" didn't export a Plugin instance
at PluginManager.validate (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\node_modules\babel-core\lib\transformation\file\plugin-manager.js:164:13)
at PluginManager.add (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\node_modules\babel-core\lib\transformation\file\plugin-manager.js:213:10)
at File.buildTransformers (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\node_modules\babel-core\lib\transformation\file\index.js:237:21)
at new File (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\node_modules\babel-core\lib\transformation\file\index.js:139:10)
at Pipeline.transform (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
at load (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\Es6\index.js:63:26)
at Object.jsdom.env.done (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\Es6\index.js:216:5)
at C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\Es6\node_modules\jsdom\lib\jsdom.js:271:18
at nextTickCallbackWith0Args (node.js:433:9)
at process._tickCallback (node.js:362:13)
My code is not representative it stops at the following line:
let transpiled = babel.transform(source, {
"plugins": [
'transform-es2015-modules-commonjs',
'transform-es2015-destructuring',
'transform-es2015-parameters',
'transform-es2015-spread'
] });
What may be the problem? Thank you in advance!

You are trying to use Babel 6 plugins with Babel 5.

Related

A constructor from a node module I'm importing works when using Create React App, but errors in ParcelJS. What is going on?

I'm converting a project that was built using Create React App to use ParcelJS as a bundler instead. Strangely, a dependency that I imported during development (#twilio/voice-sdk) works fine in the CRA version of the application, but I get the following error when I try to invoke the constructor in the Parcel version:
TypeError: (this._options.AudioHelper || audiohelper_1.default) is not a constructor
The package is identical between both (#v2.1.1, the latest). I'm importing using ESM syntax, so:
import { Device } from '#twilio/voice-sdk'
I trying using CommonJS syntax (require) and it still didn't work. I've dug into the compiled code, and that seems to be the issue. I imagine there are a lot of differences, but one that I've noticed is here:
On the left is the code compiled by Create React App, which does seem to be exporting something more substantial than on the left - is the export just an empty object? If so, it's no wonder I'm getting a constructor error.
Unfortunately, no amount of googling and SO sleuthing has clarified what I could do to make ParcelJS transpile this dependency properly, if that's the issue. I've tried to make the babel config for ParcelJS match CRA more closely by adding the following to a babel.config.json
{
"plugins": [
"#babel/plugin-transform-modules-commonjs"
]
}
But no luck. Any ideas from where to go from here, or is it time to switch to Webpack?
It looks like Twilio package has a problem when using Parcel 2: https://github.com/twilio/twilio-voice.js/issues/101

eslint / babel-eslint issue with escope

Currently getting this error when i try to run eslint locally:
Error: Cannot find module 'escope'
at Function.Module._resolveFilename (module.js:455:15)
at monkeypatch (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/babel-eslint/index.js:53:26)
at Object.exports.parse (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/babel-eslint/index.js:358:5)
at parse (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/linter.js:671:23)
at Linter.verify (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/linter.js:806:27)
at processText (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:278:31)
at processFile (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:320:18)
at executeOnFile (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:655:25)
at fileList.forEach.fileInfo (/Users/pablorincon/Documents/SSENSE/micro-services/ws-website/services/ui-website/node_modules/eslint/lib/cli-engine.js:693:13)
at Array.forEach (native)
What's weird is that im using the same linting configuration with another project, and i had no issues at all.
I'm using:
babel-eslint#7.1.1
eslint#4.0.0-beta.0
Any ideas ?
Even though I had same package.json, babel-eslint was set as "7.1.1" in one and "^7.1.1" in the other.
Basically ESLint v4 uses a new fork of escope, which was then updated on version 7.2.3 of babel-eslint.
So, adding the little ^ to my configuration fixed my problem.

Can not load "coffee", it is not registered! Karma error message

I am trying to use Karma with Coffeescript. The following preprocessor line is there in karma config file:
preprocessors: {
'**/*.coffee': 'coffee'
}
But I am getting the error -
Can not load "coffee", it is not registered!
Perhaps you are missing some plugin?
karma-coffee-preprocessor is available as devDependencies in package.json. Has anyone faced this issue? Thanks.
I figured out the solution. It is because of not installing karma-cli. I though installing karma globally is enough. But after installing karma-cli everything is fine.

ModuleParseError: Module parse failed: iconv-lite

My project was working perfectly fine.. But after doing a git push, I'm suddenly getting an error when I run gulp:
{ [Error: ModuleParseError: Module parse failed:
/Users/xyz/project/node_modules/iconv-lite/encodings/tables/gb18030-ranges.json
Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.
| {"uChars":[128,16 ....
Why is this happening? I have uninstalled and reinstalled this module iconv-lite, but it doesn't seem to help.
I received this same exact error. You'll want to install a JSON loader module. I'm using json-loader in this example.
npm install json-loader --save
Then, you need to add this loader to your webpack.config.js
module: {
loaders: [
{ test: /\.json$/, loader: "json-loader"}
]
}
I had this dependency by an indirect dependency on node-fetch and fixed the issue by adding the following to my webpack.config.js:
externals: {
'node-fetch': 'fetch'
}
Deleting the file solved the issue.

Typescript: unexpected reserved word in PHPStorm

I´m trying to get a simple TypeScript file working in PHPStorm, but sadly there seem to be some misconfiguration by default as the class keyword is not recognized properly
This is my TypeScript file:
class Test{
}
And this is the error I´m facing:
And this is my FieWatcher configuration of TypeScript
How can I get TypeScript working?
The Program options should not be node.exe (that would mean you are trying to typescript code as javascript). It needs to be tsc or node tsc(that means you want to run tsc to compile the file to javascript).
PS: this video might be helpful : https://www.youtube.com/watch?v=RWXGMug_Rmo&hd=1