I have a folder containing some .js files, written in pre-ES2015 JavaScript, along with a corresponding gulpfile.js, to compile my code. Now, I'm trying to add babel so that I can start writing code in in ES6.
After installing the npm packages I thought I would need and then running gulp, it finishing compiling without any issues, but my ES6 code isn't transpiled (i.e., const doesn't become var, arrow functions still present in the compiled code).
What I've tried:
In gulpfile.js, I've tried a few different values for the presets option -- ['es2015'], ['babel-preset-es2015'], and ['babel-preset-env'].
But one of 2 things happens: 1. gulp finishes without errors, 2. the message Couldn't find preset "es2015" relative to directory... is returned.
Could this be a versioning issue? Or perhaps I haven't configured my babel-preset correctly?
(I've included below my package.json, as well as the relevant part of my gulpfile.js)
package.json:
{
"name": "SA",
"version": "2.0.0",
"description": "my SA code",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"del": "^2.2.2",
"eslint": "^3.19.0",
"gulp": "^4.0.2",
"gulp-babel": "^7.0.1",
"gulp-concat": "^2.6.1",
"gulp-jscs": "^4.1.0",
"gulp-jscs-stylish": "^1.4.0",
"gulp-jshint": "^2.1.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^3.0.2",
"jshint": "^2.9.5",
"jshint-stylish": "^2.2.1"
},
"main": "SA",
"dependencies": {
"#babel/preset-env": "^7.6.3",
"lodash": "^4.17.15"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"repository": {
"type": "git",
"url": "[github URL]"
},
"keywords": []
}
gulpfile.js (including relevant parts):
var babel = require('gulp-babel'),
concat = require('gulp-concat'),
del = require('del'),
gulp = require('gulp'),
jscs = require('gulp-jscs'),
jshint = require('gulp-jshint'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');
function createBuildTask(destination) {
var sourceArray = [
destination + '/config/mobileCheck.js',
destination + '/config/account.js',
'common/api.js',
destination + '/config/utilityFunctions.js',
destination + '/config/runFirst.js',
destination + '/' + destination + '-main.js'
];
return function () {
return gulp.src(sourceArray, {'allowEmpty': true})
.pipe(concat(destination + '-built-main.js'))
.pipe(gulp.dest(destination + '/dist'))
.pipe(babel({
'presets': ['babel-preset-env']
}))
.pipe(uglify())
.pipe(rename({
'extname': '.min.js'
}))
.pipe(gulp.dest(destination + '/dist'));
};
}
Related
I am trying to setup a react component library with create-react-library (which uses rollup under the hood) and port over our application's existing component library so that we can share it between applications. I am able to create the library, publish to a private git registry, and consume it in other applications. The issue is that I have had to change all of my imports to relative imports which is rather annoying as I am planning on porting over a large amount of components, hocs and utils.
The entry point of the package is the src dir. Say I have a component in src/components/Text.js and a hoc in src/hoc/auth.js. If I want to import withAuthentication from src/hoc/auth.js into my Text component, I have to import it like import { withAuthentication } from "../hoc/auth" but I'd like to be able to import with the same paths I have in my existing application so it's easy to port over components, like import { withAuthentication } from "hoc/auth"
I have tried a lot of config options, jsconfig.json the same as my create-react-app application, manually building my library with rollup rather then using create-react-library so I'd have more config options but to no avail.
Below are the relevant bits from my package.json as well as my jsconfig.json, any help would be greatly appreciated, I am sure I am not the only person who's had this issue.
Here's the package.json
{
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"files": [
"dist"
],
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^16.0.0",
"react-html-parser": "^2.0.2",
"lodash": "^4.17.19",
"#material-ui/core": "^4.11.0",
"react-redux": "^7.1.1",
"redux": "^4.0.1",
"redux-localstorage": "^0.4.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"react-router-dom": "^5.1.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1",
"react-svg": "^12.0.0",
"reselect": "^4.0.0"
},
"devDependencies": {
"microbundle-crl": "^0.13.10",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4"
},
"dependencies": {
"node-sass": "^7.0.0"
}
}
and here's the jsconfig:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
The example from the following link maybe you should navigate to your src file from the BaseUrl, or if you "src" is in the same directory as your config it should be only "."
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
Example from link above:
{
"compilerOptions": {
"baseUrl": ".", // This must be specified if "paths" is.
"paths": {
"jquery": ["node_modules/jquery/dist/jquery"] // This mapping is relative to "baseUrl"
}
}
}
You need to do 3 things
tsconfig.json this enables typescript autocomplete
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"src/*": ["./src/*"],
"src": ["./src"]
}
}
}
babel.config.js this plugin resolves relative modules
module.exports = {
plugins: [
[
'module-resolver',
{
alias: {
src: './src'
}
}
]
]
}
package.json // install babel-plugin-module-resolver
{
//...
"devDependencies": {
//...
"babel-plugin-module-resolver": "^3.2.0",
// ...
}
}
When I run npm run build in my directory, to get all my files bundled into bundle.js, I find this error: ERROR in ./bundle.js from UglifyJs \n Unexpected token name «key», expected punc «;» [./bundle.js:8141,13].
So I went to bundle.js line 8141 and found this: for (let key in val) {
And therein lies the problem: let. Uglify cannot deal with let and const
So I've looked through the entire bundle.js file and the ONLY time let appears is literally right there, and a couple lines down, and I know specifically what package that code comes from: npm install clone-deep
None of the other packages I'm using are having this issue, they are all correctly converted from es6 before uglify runs, and I use let and const in my own code all the time. This one package only is causing me the issue.
Here's my package.json
{
"name": "jsx2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"license": "ISC",
"dependencies": {
"autobind-decorator": "^2.1.0",
"axios": "^0.18.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"classnames": "^2.2.5",
"clone-deep": "^4.0.1",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-toastify": "^4.5.2",
"webpack": "^3.11.0"
},
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p --config webpack.build.config.js"
}
}
And here's my webpack.build.config.js
// https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'out/');
var APP_DIR = path.resolve(__dirname, 'src/');
var config = {
entry: ['babel-polyfill', APP_DIR + '/App.jsx'],
output: {
path: BUILD_DIR,
filename: './bundle.js'
//https://cloud.githubusercontent.com/assets/593571/20785959/290f7fbc-b7b4-11e6-9ad2-7dafd7803552.png
//https://github.com/babel/babel-loader/issues/93
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader',
options: {
"presets" : ["env", "react"],
"plugins": ["transform-decorators-legacy"]
}
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
}
};
module.exports = config;
-- edit
Just to confirm, I did actually go into clone-deep index.js and change the lets to vars, and it all worked and I got no errors. I don't really consider that as a solution, because... there's no reason why this one package should have this error and nothing else. But it is definitely this one package that is the source of the issue.
Some npm packages have no es5 version. We have to accept this or use other packages.
If you want to continue to use clone-deep, you have to add this package to include property of your babel-loader config:
...
{
test : /\.jsx?/,
include : [APP_DIR, path.resolve(__dirname, 'node_modules', 'clone-deep')],
loader : 'babel-loader',
options: {
"presets" : ["env", "react"],
"plugins": ["transform-decorators-legacy"]
}
};
...
You can read more in this issue
I have a server running on aws elastic beanstalk. It's pretty much been fine. but today when applying an update(Absolutely nothing to do with configs or versioning of modules used) which was simply adding a few words to some text in the web app (Literally the word 'dog'). The app started crashing with 502 nginx gateway errors. I assume this is because the app is not lifying. I went and reverted the change(Though I did not think I had to do so). and the problem persists.
My output when attempting to lift / start the sails app is as follows.
Failed to load helper `web/auth/validate-user-password` as a machine!
A hook (`helpers`) failed to load!
Failed to lift app: ImplementationError: Sorry, could not interpret "web/auth/validate-user-password" because its underlying implementation has a problem:
------------------------------------------------------
• The `cacheable` property is no longer supported. (Please use `sideEffects: 'cacheable' instead.)
------------------------------------------------------
If you are the maintainer of "web/auth/validate-user-password", then you can change its implementation to solve the problem above. Otherwise, please file a bug report with the maintainer, or fork your own copy and fix that.
[?] See https://sailsjs.com/support for help.
at flaverr (/var/app/current/node_modules/flaverr/index.js:77:15)
at helpBuildMachine (/var/app/current/node_modules/sails/node_modules/machine/lib/private/help-build-machine.js:127:11)
at Function.build (/var/app/current/node_modules/sails/node_modules/machine/lib/build.js:52:10)
at /var/app/current/node_modules/sails/lib/hooks/helpers/load-helpers.js:51:49
at /var/app/current/node_modules/#sailshq/lodash/lib/index.js:3228:15
at baseForOwn (/var/app/current/node_modules/#sailshq/lodash/lib/index.js:2199:14)
at /var/app/current/node_modules/#sailshq/lodash/lib/index.js:3198:18
at Function.<anonymous> (/var/app/current/node_modules/#sailshq/lodash/lib/index.js:3501:13)
at /var/app/current/node_modules/sails/lib/hooks/helpers/load-helpers.js:37:9
at helpBuildDictionary (/var/app/current/node_modules/sails/node_modules/include-all/lib/help-build-dictionary.js:135:10)
at Function.module.exports.optional (/var/app/current/node_modules/sails/node_modules/include-all/index.js:67:10)
at Hook.loadHelpers (/var/app/current/node_modules/sails/lib/hooks/helpers/load-helpers.js:21:14)
at Hook.initialize (/var/app/current/node_modules/sails/lib/hooks/helpers/index.js:28:19)
at Hook.wrapper [as initialize] (/var/app/current/node_modules/#sailshq/lodash/lib/index.js:3250:19)
at /var/app/current/node_modules/sails/lib/hooks/index.js:88:16
at /var/app/current/node_modules/async/dist/async.js:486:20
(You are seeing the above error message because no custom callback was programmatically provided to `.lift()`.)
A hook (`orm`) failed to load!
This is what I'm seeing in package.json in case it will be of help.
{
"name": "sails-xxxxxxx-seed",
"private": true,
"version": "0.0.3-147",
"description": "a Sails application",
"keywords": [],
"dependencies": {
"async": "2.0.1",
"aws-sdk": "^2.41.0",
"bcryptjs": "2.3.0",
"connect-redis": "3.3.0",
"flaverr": "^1.1.1",
"lodash": "3.10.1",
"machinepack-http": "3.1.2",
"moment-timezone": "0.5.13",
"pdfmake": "0.1.28",
"sails": "^1.0.0-32",
"sails-hook-orm": "^2.0.0-0",
"sails-hook-sockets": "^1.0.1",
"sails-mysql": "^1.0.0-13",
"sails-stdlib": "^0.7.1",
"sails.io.js": "1.1.9",
"serve-static": "1.12.3",
"socket.io-client": "1.7.3",
"socket.io-redis": "3.1.0",
"uuid": "3.0.1"
},
"devDependencies": {
"#angular/animations": "~4.1.3",
"#angular/common": "~4.1.3",
"#angular/compiler": "~4.1.3",
"#angular/compiler-cli": "~4.1.3",
"#angular/core": "~4.1.3",
"#angular/forms": "~4.1.3",
"#angular/http": "~4.1.3",
"#angular/platform-browser": "~4.1.3",
"#angular/platform-browser-dynamic": "~4.1.3",
"#angular/platform-server": "~4.1.3",
"#angular/router": "~4.1.3",
"#angular/upgrade": "~4.1.3",
"#swimlane/ngx-datatable": "^8.0.0",
"#types/jasmine": "^2.5.47",
"#types/node": "^6.0.48",
"angular-pipes": "^6.5.1",
"angular-router-loader": "^0.6.0",
"angular2-in-memory-web-api": "0.0.21",
"angular2-moment": "^1.3.3",
"angular2-template-loader": "^0.6.0",
"angular2-text-mask": "^8.0.1",
"awesome-typescript-loader": "^3.1.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.5.2",
"babel-preset-es2015": "^6.24.1",
"chart.js": "^2.5.0",
"clean-webpack-plugin": "0.1.16",
"clipboard": "^1.6.1",
"copy-webpack-plugin": "4.0.1",
"core-js": "^2.4.1",
"css-loader": "0.27.3",
"debug": "^2.6.8",
"ejs-loader": "0.3.0",
"eslint": "3.19.0",
"extract-text-webpack-plugin": "2.1.0",
"file-loader": "^0.11.1",
"glob": "^7.1.1",
"ie-shim": "^0.1.0",
"json2csv": "^3.7.3",
"knex": "0.13.0",
"less": "2.7.2",
"less-loader": "4.0.1",
"mime-types": "2.1.15",
"mocha": "^3.2.0",
"mydatepicker": "^1.9.2",
"ng-sidebar": "^4.1.1",
"ng2-charts": "^1.5.0",
"ng2-table": "^1.3.2",
"ng2-toastr": "^4.0.1",
"ng2-validation": "^4.1.0",
"ngx-bootstrap": "^1.6.6",
"ngx-progressbar": "^2.0.0",
"node-sass": "^4.5.2",
"primeng": "^4.0.0",
"prompt": "1.0.0",
"raw-loader": "^0.5.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"sass-loader": "^6.0.3",
"semver": "^5.3.0",
"to-string-loader": "^1.1.4",
"typescript": "~2.2.1",
"url-loader": "^0.5.8",
"waterline-utils": "^1.3.12",
"webpack": "^2.2.1",
"webpack-livereload-plugin": "^0.11.0",
"webpack-merge": "^0.15.0",
"webpack-watch-livereload-plugin": "0.0.1",
"zone.js": "~0.6.26"
},
"scripts": {
"start": "NODE_ENV=production node app.js",
"test": "npm run lint && npm run custom-tests && echo 'Done.'",
"lint": "node ./node_modules/eslint/bin/eslint . --max-warnings=0 && echo '✔ Your code looks good.'",
"custom-tests": "echo \"(No other custom tests yet.)\" && echo",
"version": "node -e 'process.stdout.write((require(\"./package.json\").version))'",
"bump": "node scripts/bump.js",
"debug": "node debug app.js",
"deploy-staging": "sails_environment=web_staging npm run bump && sails_environment=web_staging npm run deploy",
"deploy-demo": "sails_environment=web_demo npm run bump && npm run deploy",
"deploy": "cp -r eb/bootstrap/$sails_environment.sh .ebbootstrap.sh && npm run zip && rm .ebbootstrap.sh && node scripts/publish-static-assets && node scripts/deploy-to-eb",
"zip": "mkdir -p .tmp && rm .tmp/deploy.zip &> /dev/null; zip -9 -r --exclude=node_modules/* --exclude=.tmp/* --exclude=.DS_Store --exclude=.git/* --exclude=config/local.js ./.tmp/deploy.zip .",
"deploy-alerts-staging": "sails_environment=alerts_staging npm run bump && sails_environment=alerts_staging npm run deploy-alerts",
"deploy-alerts": "cp eb/bootstrap/$sails_environment.sh .ebbootstrap.sh && cp eb/apps/alerts/cron.yaml cron.yaml && npm run zip-backend && rm cron.yaml .ebbootstrap.sh && node scripts/deploy-to-eb",
"deploy-rollup-staging": "sails_environment=rollup_staging npm run bump && sails_environment=rollup_staging npm run deploy-rollup",
"deploy-rollup": "cp eb/bootstrap/$sails_environment.sh .ebbootstrap.sh && cp eb/apps/rollup/cron.yaml cron.yaml && npm run zip-backend && rm cron.yaml .ebbootstrap.sh && node scripts/deploy-to-eb",
"deploy-devices-staging": "sails_environment=devices_staging npm run bump && sails_environment=devices_staging npm run deploy-devices",
"deploy-devices": "cp eb/bootstrap/$sails_environment.sh .ebbootstrap.sh && npm run zip-backend && rm .ebbootstrap.sh && node scripts/deploy-to-eb",
"deploy-device-sim": "cp eb/bootstrap/device_sim.sh .ebbootstrap.sh && cp eb/apps/device-sim/cron.yaml cron.yaml && npm run zip-backend && rm cron.yaml .ebbootstrap.sh && sails_environment=device_sim npm run bump && sails_environment=device_sim node scripts/deploy-to-eb",
"zip-backend": "mkdir -p .tmp && rm .tmp/deploy.zip &> /dev/null; zip -9 -r --exclude=node_modules/* --exclude=.tmp/* --exclude=.DS_Store --exclude=.git/* --exclude=src/* --exclude=config/local.js ./.tmp/deploy.zip ."
},
"main": "app.js",
"repository": {
"type": "git",
"url": "xxxxxxxxxx.git"
},
"author": "xxxxxx",
"license": ""
}
and below is validate-user-password.js
module.exports = {
friendlyName: 'Validate user password (strict)',
description: 'Strictly validate a string as the potential "password" for a user.',
cacheable: true,
sync: true,
inputs: {
string: {
description: 'The string to validate as a password.',
required: true,
example: 'abcd1234',
}
},
exits: {
success: {
description: 'The specified string is 100% valid.'
},
notValid: {
description: 'The specified string is not a valid password.'
},
},
fn: function (inputs,exits) {
// Coerce
//////////////////////////////////////////////////////////////////////////////////////////////////////////
// Since we don't need to support `strict: false` for this validator (it is ALWAYS strict), then we can
// just skip this part. (Also no need for the "notStrictlyValid" exit, output from the success exit,
// or the `strict` input)
//
// n/a
// Validate
//////////////////////////////////////////////////////////////////////////////////////////////////////////
// • Must be long enough.
if (inputs.string.length < 7) {
return exits.notValid(new Error('Password must consist of at least 7 characters.'));
}
// • Must not be too long.
if (inputs.string.length > 72) {
return exits.notValid(new Error('Password must not contain more than 72 characters.'));
}
return exits.success();
}
};
Indeed, it is probably a update in Sails itself that caused that. Did you try the following configuration for validate-user-password.js ?
module.exports = {
friendlyName: 'Validate user password (strict)',
description: 'Strictly validate a string as the potential "password" for a user.',
sideEffects: 'cacheable',
sync: true,
/* ... rest of content ... */
}
I wonder if the issue is related to a change around this time in the version of machine used by Sails core. This normally wouldn't have affected your app unless the semantic version range (SVR) of your Sails dependency was manually increased. But since this app is using a prerelease of Sails v1, it's likely that was the reason this change got picked up downstream.
As #Alexis N-o mentioned, the solution is to instead of using cacheable: true, to use:
sideEffects: 'cacheable'
I tried to build my reactjs app using webpack and babel.
I started this app from react starter which comes with react-scripts build which worked before. However, it's a black box and didn't really provide all the features I need, especially when it comes to that a module doesn't like UglifyJS.
My webpack.config.js looks like this which is pretty simple:
var path = require('path');
var webpack = require('webpack');
var BUILD_DIR = path.resolve(__dirname, 'build_webpack');
var APP_DIR = path.resolve(__dirname, 'src');
module.exports = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
}
}
and I have this config in my package.js:
"scripts": {
"start": "react-scripts start",
"reactbuild": "react-scripts build",
"webpackbuild": "webpack --watch",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
Also my .babelrc file only has this:
{
"presets" : ["es2015", "es2016", "react"]
}
However, the code that worked in react-scripts build failed here, and the error output says:
ERROR in ./src/Pages/SearchTool/SearchResult.js
Module build failed: SyntaxError: Unexpected token (100:13)
(the error is referring to the data input argument)
renderChip = (data) => {
return (
<Chip
key={data.key}
I don't really see what is so special about this expression. I don't think this is very commonly used but should be legal though. Also, one reason that I switched to webpack was that the previous react build doesn't like es6, but one of my module which is important is written in es6.
I wonder what was missing in my config or other places. Thanks for all the help!
Edit:
my package.js:
{
"name": "myCoolApps",
"version": "0.1.0",
"private": true,
"devDependencies": {
"css-loader": "^0.26.1",
"react-scripts": "0.7.0",
"webpack": "^1.13.3"
},
"dependencies": {
"ace": "git+https://github.com/ajaxorg/ace.git#master",
"antd": "^2.7.2",
"axios": "^0.15.3",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"card": "^2.2.1",
"card-react": "^1.2.6",
"chat-template": "0.0.22",
"codemirror": "^5.25.0",
"credit-card-type": "^5.0.1",
"css-loader": "^0.26.1",
"d3": "^4.7.4",
"firechat": "^3.0.1",
"firepad": "^1.4.0",
"flux": "^3.1.0",
"gulp": "^3.9.1",
"gulp-sass": "^3.1.0",
"history": "^1.17.0",
"little-loader": "^0.2.0",
"lodash": "^4.17.4",
"material-ui": "^0.16.6",
"moment": "^2.17.1",
"node-sass": "^4.5.0",
"quill": "^1.2.3",
"rc-calendar": "^7.6.5",
"react": "^15.5.4",
"react-autosuggest": "^7.0.1",
"react-cookie": "^1.0.4",
"react-credit-card": "^0.20.0",
"react-dom": "^15.5.4",
"react-dropzone": "^3.8.0",
"react-event-timeline": "^1.2.2",
"react-infinite": "^0.10.0",
"react-infinite-scroller": "^1.0.7",
"react-list": "^0.8.3",
"react-notification-system": "^0.2.12",
"react-router": "^3.0.0",
"react-tap-event-plugin": "^2.0.1",
"seedrandom": "^2.4.2",
"simplewebrtc": "^2.2.2",
"style-loader": "^0.13.1",
"superagent": "^3.3.1",
"webpack": "^1.15.0",
"y-array": "^10.0.6",
"y-indexeddb": "^8.1.9",
"y-leveldb": "0.0.1",
"y-map": "^10.0.5",
"y-memory": "^8.0.8",
"y-richtext": "^9.0.8",
"y-text": "^9.3.2",
"y-webrtc": "^8.0.7",
"y-websockets-client": "^8.0.15",
"yjs": "^12.1.7"
},
"scripts": {
"start": "react-scripts start",
"reactbuild": "react-scripts build",
"webpackbuild": "webpack",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
UPDATE:
I tried the env preset, and now my webpack.config.js looks like this:
{
"presets":
[
"react",
[
"env",
{
"targets": {
"uglify": false,
"node": "current",
"debug": true,
},
}
],
],
}
However, it still complains about this expression:
ERROR in ./src/Pages/SearchTool/SearchResult.js
Module build failed: SyntaxError: Unexpected token (100:13)
98 | }
99 |
> 100 | renderChip = (data) => {
| ^
101 | return (
102 | <Chip
103 | key={data.key}
# ./src/Pages/Connections/Connections.js 43:20-57
The function originally looks like this in the program (Note: it is inside a class):
renderChip = (data) => {
return (
<Chip
key={data.key}
onRequestDelete={this.handleRequestDelete}
style={{
borderRadius: '6px',
margin: '0 4px',
height: 35
}}
>
{data.label}
</Chip>
);
}
And also I tried include plugins manually
The place this function in my class looks like:
class Name extends Component {
constructor(props) {...}
renderChip = (data) => {
return (
<Chip
key={data.key}
onRequestDelete={this.handleRequestDelete}
style={{
borderRadius: '6px',
margin: '0 4px',
height: 35
}}
>
{data.label}
</Chip>
);
}
render() {...}
}
I manually included transform-es2015-function-name and transform-es2015-arrow-functions, but they didn't work. Are there some other plugins I need to include manually? Or is it caused by some other reason?
Solved
The solution is changing the function experssion to:
renderChip() {
...
}
Please add babel-preset-env package.
Your .babelrc should look something like this: (["env" ...] part is important here)
{
"presets": [
["env", {
"targets": {
"uglify": true,
"node": "current"
}
}]
]
}
Reading the docs I mentioned above. UglifyJS does not support ES6. It is recommended to use babel-minify instead.
UglifyJS does not currently support any ES6 syntax, so if you are
using Uglify to minify your code, targeting later browsers may cause
Uglify to throw syntax errors.
To prevent these errors - specify the uglify option, which will enable
all plugins and, as a result, fully compile your code to ES5. However,
the useBuiltIns option will still work as before, and only include the
polyfills that your target(s) need.
UPDATE:
Try installing/reinstalling these packages. you may not need all of them, but you may find use in them later on.
npm install --save-dev babel-core babel-loader babel-polyfill babel-preset-env babel-register babel-plugin-syntax-dynamic-import babel-plugin-transform-object-rest-spread babel-plugin-transform-regenerator
Write
renderChip(data) {
instead of
renderChip = (data) => {
You can't declare class methods with assignment operator directly in class body, instead you can do following.
renderChip(data) {
return (
<Chip
key={data.key}
onRequestDelete={this.handleRequestDelete}
style={{
borderRadius: '6px',
margin: '0 4px',
height: 35
}}
>
{data.label}
</Chip>
);
}
You can read about ES6 classes here.
Hope this helped!
I am setting up (or actually modifying existing) project with Browserify and Babelify. For some reason I can't configure my gulpfile properly. The project itself is a React project, if it matters.
I got rid of most of the problems, but now I am getting "Unexpected token" error on Browserify. It is caused by React components or html elements with attribute names which have a dash, ie. the following:
<button type="button" data-toggle="collapse">
My Browserify task:
gulp.task('browserify', function() {
browserify('./src/js/main.js')
.transform(babelify.configure({
presets: ["react", "es2015"]
}))
.bundle()
.on('error', function(err){
process.stdout.write('' + err + '\n');
notifier.notify({
title: 'Error',
message: err,
sound: true,
wait: true
}, function (err, response) {
});
})
.pipe(source('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload());
});
Package.json:
{
"name": "srcd-mockup",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"babel-preset-es2015": "^6.0.12",
"bootstrap-sass": "^3.3.5",
"browserify": "^11.2.0",
"flux": "^2.1.1",
"font-awesome": "^4.4.0",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"jquery": "^2.1.4",
"lodash": "^3.10.1",
"node-notifier": "^4.3.1",
"react": "^0.14.1",
"react-dom": "^0.14.1",
"react-redux": "^4.0.0",
"react-router-component": "^0.27.2",
"reactify": "^1.1.1",
"redux": "^3.0.4",
"redux-logger": "^2.0.4",
"updeep": "^0.10.1",
"vinyl-source-stream": "^1.1.0"
},
"devDependencies": {
"babel-preset-react": "^6.0.12",
"babelify": "^7.0.2",
"gulp-connect": "^2.2.0",
"gulp-notify": "^2.2.0",
"gulp-sass": "^2.0.4",
"gulp-uglify": "^1.4.1",
"redux-devtools": "^2.1.5"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
What I tried before:
The weird thing here is that previously I had similar project with similar dependencies and config, and it worked fine.
Then I tried to set up the new one, and first I got Unexpected token error on this line on my main.js (initial render of React):
ReactDOM.render(<App />, document.getElementById('main'));
The error was caused by "(". Then there was no presets on Babelify.
If I only have "react" on presets, I get "ParseError: 'import' and 'export' may appear only with 'sourceType: module'", because of, well importing.
Questions:
Is this related to Babelify or can it be caused by other module or dependency?
Is this related to Babel 6?
Why is dash causing the error?
How should I set this up?
There appears to be a bug as of Babel version 6.0.12 which is rendering data-* tags as object keys without quoting them, resulting in invalid JS syntax.
You can use a pre-v6 version of Babel, or else wait for someone to submit a fix.
UPDATE:
A fix for this just got checked into the repo, so this will be fixed in the next release.