I have ES6 gulp modules for automation in my project. Within them there are JS features you would expect such as imports. In order for this to work I have babel and ES2015 preset installed. My .babelrc file looks like this:
{
"presets": ["es2015"]
}
Everything works perfectly. Now I want to try upgrading to ES2017 which I believe was released recently so I assume has a completed spec (am I wrong about this?).
I install babel-preset-es2017 and change the .babelrc to:
{
"presets": ["es2017"]
}
Now nothing works and I get a basic error on using import:
SyntaxError: Unexpected token import
So clearly something has gone wrong here and it's not happy compiling gulp on the fly with a newer babel preset. Any ideas why?
I just want to use the newest JS version that is fully released with a finished spec and is actively maintained.
Related
I am attempting to integrate a module that uses es6 features such as arrow syntax with a react native project. Unfortunately react native doesn't seem to compile any code in the node_modules directory. I've experimented with the only and the ignore options in the .babelrc file but to no avail, it still outputs untranspiled es6 code from the node_modules folders and causes errors when it's ran on android. Is it possible and if so what is the best way of whitelising particular modules to transpile from the node_modules folder?
It turns out that react native does transpile the code from the node_modules folder. The issue was actually related to a bug in a custom plugin that is included with the babel-react-native preset. The bug report is here: https://github.com/facebook/react-native/issues/19511
I am using the latest nodejs version, but am still getting an error while using es6 module import.
I could also find on a blog that node doesn't yet support es6 import module.
https://nodesource.com/blog/es-modules-and-node-js-hard-choices/ - no JavaScript runtime currently supports ES Modules.
I am new to javascript and node, is anyone using es6 module import with nodejs, without transpiling the code to lower js versions.
You can if you are willing to use a tool like Babel.
npm i -D babel babel-cli babel-core babel-preset-es2015
Create a file .babelrc and put the following in it:
{
"presets": ["es2015"]
}
And then in package.json in the scripts section do some thing like this:
"dev": "babel src -d dist && node dist/your_file.js"
This will transpile all of the code in a directory named src/ but it in a directory called dist/, and then run the file you specify.
It can then be used via the command as follows:
npm dev
UPDATE 2019:
import / export statements are supported in node v12.
Right now behind the --experimental-modules flag.
Which is supposed to be removed this October.
I have a project built in WebStorm 2016.2.2, Node.js 6.6.0 and TypeScript 1.8.
For some reasons, which are specified here: ES6 import and export are not supported in Node.js, I need to use Babel.
I have installed Babel and babel-preset-es2015 and I have added a file watcher, but I'm still getting an "unexpected token import" error. It looks like babel doesn't work.
1) Do I need to take an additional action in order to transpile my js files to ES5?
2) What version of ES should I set the "JavaScript language version" to in WebStorm settings?
3) Is Babel supposed to generate another file with the output as TypeScript compiler does?
Any help will be profoundly appreciated!
here are the Babel file watcher settings that work for me:
Arguments: $FilePathRelativeToProjectRoot$ --out-dir $ProjectFileDir$/dist --source-maps --presets es2015
Working directory: $ProjectFileDir$
Output Paths to Refresh: $ProjectFileDir$/dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js.map
it compiles files to separate directory, preserving original file names, so that require() work; also, WebStorm is aware of generated files, as file system is correctly refreshed once the compilation completes
1) Create a file called .babelrc in the root directory of the project, with the following content:
{
"presets": ["es2015"]
}
It is not enough to install the es6 preset, you have to tell babel to use that preset. For reference: https://babeljs.io/docs/plugins/preset-es2015/
2) Try setting ECMAScript6
Do not use babel-preset-es2015 for Node.js 6. This will transform your sources to ES5, whilst you already have 97% support for ES6 natively, causing severe performance penalties. Merely adding it doesn't enable module transformation either.
Use the babel-preset-node6 preset or just add the transform-es2015-modules-commonjs plugin.
I have created an empty web project and added files using
Angular-cli
https://scotch.io/tutorials/use-the-angular-cli-for-faster-angular-2-projects
I can run the website fine using ng buid/serve but I get below error in editor:
I read somewhere that it is Resharper error in version 9, so I upgraded my Resharper to latest which fixes the problem but it cannot resolve the modules. any suggestions?
Edit: created a new typescript class and it's giving below error
As far as I know, Resharper still doesn't support TypeScript latest versions. It looks like Resharper ignores tsconfig.json file that exists inside src folder. I suggest you try VS Code instead. It's free and has much better support of new TypeScript features.
If you still want to stay with VS 2015, you can configure Resharper not to analyze .ts files. Here is how to do it.
open npm and run npm install typings and then typings install and if after that it still doesn't work, try build the project
Try installing VS2015 update 3.
I had that error before and I was due to my typescript version installed in VS2015.
I am writing a JavaScript library that uses the new es6 promises. I can test the library in Firefox because promises are defined. However, when I try to test my code with Karma and PhantomJS, I get the error Can't find variable: Promise.. I am guessing this is because the PhantomJS browser doesn't support es6 promises yet.
How can I configure Karma to bring in the polyfill for promises?
You can pull in the Babel polyfill by simply installing Babel Polyfill:
npm install --save-dev babel-polyfill
and then include the polyfill file before your source and test files within the files section of your karma.conf.js:
files: [
'node_modules/babel-polyfill/dist/polyfill.js',
'index.js', //could be /src/**/*.js
'index.spec.js' //could be /test/**/*.spec.js
],
Unless you know that all your target browsers support Promises, you probably want to apply this polyfill to your released build too.
If you're feeling really adventurous you can use Browserify to pull files in to make your testing more modular, and then use Babelify to transpile ES6 to ES5. I've created a sample project with these and a working test involving a Promise (running on PhantomJS2) for reference.
For Babel 6, we need install babel-polyfill to support promise.
npm install --save-dev babel-polyfill
and add a line in karma.conf.js within the files section
files: [
'node_modules/babel-polyfill/dist/polyfill.js',
....
]
It's well documented in
https://github.com/babel/karma-babel-preprocessor#polyfill
as correctly pointed out by the author it is not able to recognize es6 promise. In order to load it, es6-promise module can be loaded with the help of webpack.ProvidePlugin and configuring it inside plugins array of webpack.
plugins: [
new webpack.ProvidePlugin({
'Promise': 'es6-promise'
})
]
This seems to work for me!
This thread should help you. According to it, it seems you should try to use PhantomJS2 with ES6.
You can also take a look to this project, which treat to the a near subject than yours.
I hope it may help you
You can use karma-babel-preprocessor for files that uses ES6 features. Install it with
npm install --save-dev karma-babel-preprocessor
and then add specify what files should be preprocessed you karma.conf:
preprocessors: {
"src/**/*.js": ["babel"],
"test/**/*.js": ["babel"]
},