mocha and es6: Unexpected reserved word - ecmascript-6

When I tried to run unit tests using mocha, I got the following error:
> plan#1.0.0 test /root/project/plan
> NODE_PATH=app/scripts:test mocha
/root/project/plan/test/specHelper.js:3
import chai from 'chai';
^^^^^^
SyntaxError:
Unexpected reserved word
------------------------
Apparently mocha fails to apply babel to the new es6 syntax.
Here is the content of the specHelper file:
import chai from 'chai';
import sinonChai from 'sinon-chai';
import chaiEnzyme from 'chai-enzyme';
chai.use(sinonChai);
chai.use(chaiEnzyme());
chai.config.includeStack = true;
GLOBAL.expect = chai.expect;
GLOBAL.AssertionError = chai.AssertionError;
GLOBAL.Assertion = chai.Assertion;
GLOBAL.assert = chai.assert;
Here is the content of mocha.opts
--reporter min
--ui bdd
--compilers js:babel-register,less:test/ignoreCompiler,css:test/ignoreCompiler
--recursive
When I run webpack to build source code, I do not encounter any issue.
NODE_ENV=production webpack -p --config webpack.config.js
Module part in the Webpack.config.js
config.devtool = 'cheap-module-eval-source-map';
config.entry.push('webpack-dev-server/client?http://127.0.0.1:8892');
config.entry.push('webpack/hot/only-dev-server');
config.entry.push('react-hot-loader/patch');
config.output.publicPath = 'http://127.0.0.1:8892/';
config.module.rules.push({
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/,
include: [path.join(__dirname, 'app'), path.join(__dirname, 'test')],
});
config.plugins.push(new webpack.HotModuleReplacementPlugin());
config.plugins.push(new webpack.NoErrorsPlugin());
Content in .babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["last 2 versions", "ie >= 10"]
}
}],
"react",
"stage-0"
],
"env": {
"es": {
"presets": [["env", { "loose": true, "modules": false }], "react", "stage-0"]
},
"test": {
"presets": [
["env", {
"targets": {
"node": "7.10.1"
}
}],
"react",
"stage-0"
]
}
}
}
What did I missed in term of configuration and caused this SyntaxError?

Related

Unexpected token import, can not set up ES6 in my JS project with Mocha, Chai and Sinon

I am trying to set up a simple ES6 project to play with mocha, chai and sinon in the Terminal. But whenever I try to npm run test, I keep getting an error:
/Users/UserName/workspace/UnitTesting/mocha-sinon-chai/src/App.spec.js:1
(function (exports, require, module, __filename, __dirname) { import should from "chai";
^^^^^^
SyntaxError: Unexpected token import
Here are my:
1. Package.json:
{
"name": "mocha-sinon-chai",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"test": "tests"
},
"dependencies": {
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"sinon": "^4.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"mocha": "^5.0.1"
},
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js"
},
"author": "",
"license": "ISC"
}
2. .babelrc:
{
"presets": ["env"]
}
3. Root folder structure:
4. App.spec.js:
import should from "chai";
import { findOne } from "../src/App.js";
describe("App.js", function() {
it("should return true if predicate exists in the array", function() {
findOne([1, 2, 3], 3).should().be.true;
});
});
5. index.js is empty
6. App.js simply contains a normal JS function
I have checked many other similar issues here on Stackoverflow and GitHub and none of those solved my problem.
Adding this --require babel-core/register to test script inside package.json solved the problem:
"scripts": {
"build": "babel src -d lib",
"test": "mocha ./tests/*.spec.js --require babel-core/register"
},

npm start not working with webpack React

Currently I am self teaching myself React and trying to set-up a beginning framework. I'm having the following error after running npm start in my command line:
~/projects/reactApp » webpack --display-error-details Dustin#Dustins-MacBook-Pro
Hash: 94c3df302d8dd2990ab8
Version: webpack 2.4.1
Time: 37ms
ERROR in Entry module not found: Error: Can't resolve './main.js' in '/Users/Dustin/projects/reactApp'
resolve './main.js' in '/Users/Dustin/projects/reactApp'
using description file: /Users/Dustin/projects/reactApp/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/Dustin/projects/reactApp/package.json (relative path: .)
using description file: /Users/Dustin/projects/reactApp/package.json (relative path: ./main.js)
as directory
/Users/Dustin/projects/reactApp/main.js doesn't exist
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/Dustin/projects/reactApp/main.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/Dustin/projects/reactApp/main.js.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/Dustin/projects/reactApp/main.js.json doesn't exist
------------------------------------------------------------
~/projects/reactApp »
Coincidentally I get the same error when trying to load localhost:7777. I'm not to familiar with webpack and curious what I am doing wrong. Webpack isn't great at displaying errors, but I've managed to fix other errors up to this point.
webpack.config.js
var config = {
entry: './main.js',
output: {
path: '/',
filename: 'index.js'
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;
package.json
{
"name": "reactapp",
"version": "1.0.0",
"description": "first React app following tutorial",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"repository": {
"type": "git",
"url": "reactApp"
},
"keywords": [
"react"
],
"author": "Dustin Waggoner",
"license": "ISC",
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-plugin-transform-react-jsx": "^6.24.1"
}
}
I think it is a path problem, but attempted several different options to correct this. Thanks for any help.
Try this. resolve is mandatory while you are using none-default settings.
Here is the documents for webpack .
var config = {
entry: './main.js',
output: {
path: '/',
filename: 'index.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;

"Invalid configuration object" after creating a package.json using "npm init"

I had a running webpack configuration. But after using npm init to create the following package.json file:
{
"name": "y",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"jshint": "^2.9.4",
"jshint-loader": "^0.8.4",
"node-libs-browser": "^2.0.0",
"webpack": "^2.2.1"
}
}
and installing the following modules:
npm install babel-core babel-loader jshint jshint-loader node-libs-browser
babel-preset-es2015 babel-preset-react webpack --save-dev
I got the error message
Invalid configuration object. Webpack has been initialised using a configuration
object that does not match the API schema.
- configuration.resolve.extensions[0] should not be empty.
When I tried to restart the dev-server using
webpack-dev-server
The webpack.config.json looks like this:
module.exports = {
entry: ["./global.js", "./app.js"],
output: {
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.es6$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
resolve: {
extensions: ['', '.js', '.es6']
},
}
What could be the problem?
You installed the latest version of webpack with:
npm install --save-dev webpack
Webpack 2 does not allow an empty string in resolve.extensions anymore. Simply remove the empty string from the array of extensions:
resolve: {
extensions: ['.js', '.es6']
},
You should also read the official Migration Guide.

gulp: Module parse failed

I'm working with Laravel 5.3.
Errors I get after installing node-uuid.
{ [Error: ./~/diffie-hellman/lib/primes.json
Module parse failed: /var/www/html/filecloudprod/node_modules/diffie-hellman/lib/primes.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
My package.json file. Note json-loader
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browsersync-official": "^1.0.0",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"dropzone": "^4.3.0",
"animate.css": "^3.5.0",
"node-uuid": "^1.4.7",
"json-loader": "^0.5.4"
}
}
Then tried to merge webpack config like this in gulpfile.
I tried 2 different approaches, see TRY1 and TRY2, certainly not at the same time, just posted both approaches.
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
// TRY 1
elixir.webpack.mergeConfig({
module: {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
// TRY 2
elixir.ready(() => {
elixir.config.js.webpack = {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
elixir(function (mix) {
mix.sass('app.scss');
mix.webpack('app.js');
mix.browserSync({
proxy: 'filecloud.dev'
});
mix.version(['css/app.css', 'js/app.js']);
});
But I still get the error.
Full error
If you want to use npm modules which requires the json-loader, this is the solution.
Add following to package.json file.
"json-loader": "^0.5.4"
Create webpack.config.js with the following code:
Elixir.webpack.mergeConfig({
module: {
loaders: [{
test: /\.json$/,
loader: 'json'
}]
}
});
Now you can require packages in your bootstrap.js file which require the json-loader.
Additional Notes
When you look to the index.js file where the webpack method of elixir is defined, you see that the json loader is missing inside the loaders array.
module: {
loaders: [{ test: /\.js$/, loader: 'buble', exclude: /node_modules/ }]
},

Module parse failed when using Riot with Webpack, and Babel for es2015

I have a project that is using ES2015 for the code, and also using Riot.
(The Riot components, however, do not need to be in ES2015, just old JS)
I am also using Webpack to build the project.
The problem I am getting is :
"ERROR in ./src/test-tag.tag
Module parse failed:
.../tag-loader/index.js!.../riotjs-loader/index.js?{"type":"none"}!.../test-tag.tag
Unexpected token (5:18) You may need an appropriate loader to handle
this file type."
It is complaining because of the way riot component script code looks, ie. a function must have just this for it's declaration functionName() { /* the code */ } , ie. there is no keyword function.
Here is my full project
app.js
import 'riot';
import 'test-tag.tag';
riot.mount("*");
test-tag.tag
<test-tag>
<h1>This is my test tag</h1>
<button onclick{ click_action }>Click Me</button>
<script>
//click_action() { alert('clicked!'); }
</script>
</test-tag>
index.html
<html>
<head></head>
<body>
<test-tag></test-tag>
<script src="app_bundle.js"></script>
</body>
</html>
package.json
{
"name": "riot_and_webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015-riot": "^1.1.0",
"riot": "^2.5.0",
"riotjs-loader": "^3.0.0",
"tag": "^0.3.0",
"tag-loader": "^0.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
var webpack = require('webpack');
const path = require('path');
const PATHS = {
src: path.join(__dirname + '/src'),
dist: path.join(__dirname + '/build'),
};
module.exports = {
entry: [path.join(PATHS.src, '/app.js')],
resolve: {
modulesDirectories: ['node_modules', '.'],
extension: [ '.js' ]
},
output: {
path: PATHS.dist,
filename: 'app_bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
riot: 'riot'
})
],
module: {
preLoaders: [
{ test: /\.tag$/, exclude: /node_modules/, loader: 'riotjs-loader', query: { type: 'none' } }
],
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
{ test: /\.tag$/, loader: 'tag' },
]
}
};
Now - that will all work as expected, except that clicking the button does nothing because that code is commented out.
If the click_action line in test-tag.tag is uncommented, then $ webpack results in the error quoted at the top of this (horribly huge) question.
Is there any way I can get webpack to accept the standard riot code?
OR
Is there a different way I can define riot internal functions in a way that webpack will not complain about?
Have in mind that the "ES6 like" method syntax is something added by Riot, is not standard ES6.
This will be the standard js syntax
this.click_action = function() {
alert('clicked!')
}
And this the es6 syntax
this.click_action = () => {
alert('clicked!')
}
Also you have a typo in your button definition, it will be like this
<button onclick={click_action}>Click Me</button>