The .babelrc feature works everywhere. I was clarifying the language I used to describe the changes to import statements. What’s new is that application code uses a different (much better) modules transform, whereas package code compiles modules the same as 1.3.2.4.
1 Like
OK that’s great to hear! I’m still have the problem I listed above with 1.3.3-beta.1. Any idea why Meteor isn’t seeing my transform-class-properties plugin?
Please do file an issue with a reproduction 
I’m having a ton of issues trying to update to release 1.3.3-beta.1 on Windows due to the bcrypt upgrade. I’ve tried a lot of different work arounds in both my Windows 10 and Windows 8.1 environments and I just can’t get up an running. Is anyone else having this problem with the beta?
I am just not sure, if it’s a good idea to make import statements dynamic since it’s not really what ES6/7 is doing? I can already see threads bumping up “why it’s working here but not there”. Maybe those should be require statements in the first place. But I can be completely wrong…
3 Likes
New release: 1.3.3-beta.2
To update to the latest beta release of Meteor 1.3.3, run
meteor update --release 1.3.3-beta.2
in an application directory.
2 Likes
I’m dealing with the same issues @clayne is, seeking to get babel’s transform-class-properties plugin working. Sample code for the excellent material-ui component library requires it for actions, e.g.:
handleClose = () => this.setState({open: false});
I hope version 1.3.3x/1.4 will have an easy way to include transform-class-properties.
Did you wipe the node_modules dir and reinstall? that with babel-plugin-transform-class-properties worked for me.
I’ll try it now. What version of Meteor are you running? Are you using .babelrc to load the plugin-- and if so does your .babelrc look like this?
{
"presets": ["es2015", "stage-0", "react"],
"plugins": ["react-require", "babel-root-slash-import", "transform-class-properties"]
}
I’m doing it right in the package.json and it looks like this:
"babel": {
"plugins": ["transform-class-properties"]
}
and I’m on release 1.3.3-beta.1
You can avoid es2015 and react since they’re already included in babel-preset-meteor, which is always included. I would also recommend .babelrc over package.json, since it’s more flexible (you can have multiple .babelrc files in different directories, for one thing).
I upgraded to 1.3.3-beta.2, then threw out the node_modules folder and rebuilt it via npm install , but am still getting the “Missing class properties transform” error. Could my .babelrc be interfering with my packages.json file?
Here’s my current .babelrc (located in the app root directory):
{
"presets": ["es2015", "stage-2", "react"],
"plugins": ["react-require", "babel-root-slash-import"]
}
…and here’s my packages.json:
{
"name": "myAppName",
"version": "0.1.0",
"description": "myAppName",
"scripts": {
"test": "mocha .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register"
},
"repository": {
"type": "git",
"url": "git+https://github.com/username/reponame.git"
},
"author": "",
"license": "ISC",
"babel": {
"plugins": ["transform-class-properties"]
},
"dependencies": {
"babel-plugin-transform-class-properties": "^6.9.1",
"babel-preset-stage-0": "^6.5.0",
"mantra-core": "^1.2.0",
"material-ui": "^0.15.0-beta.2",
"mongol": "^0.2.1",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-komposer": "^1.3.0",
"react-mounter": "^1.0.0",
"react-simple-di": "^1.0.1"
},
"devDependencies": {
"enzyme": "^2.2.0",
"jsdom": "^9.1.0",
"eslint": "2.10.x",
"eslint-plugin-react": "5.1.x",
"babel-core": "6.x.x",
"babel-plugin-react-require": "2.x.x",
"babel-polyfill": "6.x.x",
"babel-preset-es2015": "6.x.x",
"babel-preset-react": "6.x.x",
"babel-preset-stage-2": "6.x.x",
"babel-root-slash-import": "1.x.x",
"sinon": "1.17.x",
"chai": "3.x.x",
"mocha": "2.x.x",
"react-addons-test-utils": "^15.0.0"
}
}
Yes, if you have a .babelrc file, then the "babel" section of your package.json file will be ignored. Here’s the code that implements that logic. I would strongly recommend using only .babelrc.
Okay cool. I just got the app to build without the error by replacing my .babelrc file with {}.
Previously I’d tried lots of iterations of .babelrc, without finding the correct way to avoid the error message.
What does your .babelrc look like? Also, should my package.json look like this, i.e. removing the babel section, but leaving in references to babel packages in the dependencies?
{
"name": "myAppName",
"version": "0.1.0",
"description": "myAppName",
"scripts": {
"test": "mocha .scripts/mocha_boot.js client/**/tests/**/*.js --compilers js:babel-core/register"
},
"repository": {
"type": "git",
"url": "git+https://github.com/username/reponame.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-plugin-transform-class-properties": "^6.9.1",
"babel-preset-stage-0": "^6.5.0",
"mantra-core": "^1.2.0",
"material-ui": "^0.15.0-beta.2",
"mongol": "^0.2.1",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-komposer": "^1.3.0",
"react-mounter": "^1.0.0",
"react-simple-di": "^1.0.1"
},
"devDependencies": {
"enzyme": "^2.2.0",
"jsdom": "^9.1.0",
"eslint": "2.10.x",
"eslint-plugin-react": "5.1.x",
"babel-core": "6.x.x",
"babel-plugin-react-require": "2.x.x",
"babel-polyfill": "6.x.x",
"babel-preset-es2015": "6.x.x",
"babel-preset-react": "6.x.x",
"babel-preset-stage-2": "6.x.x",
"babel-root-slash-import": "1.x.x",
"sinon": "1.17.x",
"chai": "3.x.x",
"mocha": "2.x.x",
"react-addons-test-utils": "^15.0.0"
}
}
Will nested import be bundled in a way similar to what you’d get with webpack code splitting? Does that works with css?
Yes, that’s right. Your .babelrc should be empty aside for anything you know you actually need (and as mentioned earlier, Meteor automatically includes everything you need for es2015 and react, so really just anything beyond these).
Every babel preset/plugin you include there should still be installed via meteor npm install --save-dev babel-plugin-xxx and hence listed in the devDependencies section of your package.json file. It’s a devDependency because your app doesn’t use any of these packages, and they’re only used in development to build your app.
beta.2 fixes the issue I was having with transform-class-properties.
Sure. The issue I was having before was definitely a bug in 1.3.3-beta.1 because I didn’t change anything and it just started working with 1.3.3-beta.2.
// babelrc
{
"plugins": [
"react-hot-loader/babel",
"transform-class-properties"
]
}
// package.json
{
"name": "r3ntr_meteor",
"version": "1.0.0",
"description": "",
"main": "./entry/server/index.server.js",
"browser": "./entry/client/index.client.js",
"repository": {
"type": "git",
"url": "git+ssh://git@bitbucket.org/casalova/r3ntr_meteor.git"
},
"keywords": [],
"author": "Casalova Inc.",
"license": "ISC",
"homepage": "https://bitbucket.org/casalova/r3ntr_meteor#readme",
"directories": {
"test": "tests"
},
"config": {
"noUpdateDependencies": "scrollreveal,leaflet-draw,eslint,babel-preset-meteor,react-date-picker"
},
"scripts": {
"start": "meteor --settings private/dev/settings.json",
"start:test": "babel-node private/scripts/start.js",
"test": "babel-node private/scripts/test.js",
"lint": "eslint --ext .jsx,.js .",
"lint:fix": "eslint --fix --ext .jsx,.js .",
"lint:watch": "esw -w --ext .jsx,.js .",
"meteor:test": "meteor test --settings private/dev/test-settings.json --driver-package=practicalmeteor:mocha",
"chimpDev": "ROOT_URL=http://localhost:3000/ chimp private/config/chimp.dev.js",
"chimpCi": "ROOT_URL=http://localhost:3000/ chimp ./private/config/chimp.ci.js",
"checkDependencies": "ncu -x $npm_package_config_noUpdateDependencies",
"updateDependencies": "ncu -x $npm_package_config_noUpdateDependencies -u -a",
"testPackage": "meteor test-packages --driver-package practicalmeteor:mocha"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"babel-eslint": "^6.0.4",
"babel-plugin-transform-class-properties": "^6.9.0",
"babel-polyfill": "^6.9.0",
"babel-register": "^6.9.0",
"babel-runtime": "^6.9.0",
"chai": "^3.5.0",
"chai-as-promised": "^5.3.0",
"chimp": "^0.35.0",
"enzyme": "^2.3.0",
"eslint": "2.7.0",
"eslint-import-resolver-meteor": "0.2.3",
"eslint-import-resolver-node": "^0.2.0",
"eslint-plugin-flowtype": "^2.2.7",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-react": "^5.1.1",
"eslint-watch": "^2.1.11",
"estraverse-fb": "^1.3.1",
"postcss-default-unit": "^1.0.0",
"postcss-modules-extract-imports": "^1.0.1",
"postcss-modules-scope": "^1.0.1",
"postcss-modules-values": "^1.1.3",
"postcss-nested": "^1.0.0",
"postcss-simple-vars": "^2.0.0",
"react-hot-loader": "^3.0.0-beta.2",
"redbox-react": "^1.2.6",
"redux-devtools": "^3.3.1",
"shelljs": "^0.7.0",
"sinon": "^1.17.4",
"sinon-chai": "^2.8.0",
"walk": "^2.3.9"
},
"dependencies": {
"analytics-node": "^2.1.0",
"analytics.js": "^2.9.1",
"beanstream-node": "^1.0.0-4-beta",
"body-parser": "^1.15.1",
"cheerio": "^0.20.0",
"classnames": "^2.2.5",
"cloudinary": "^1.3.1",
"co": "^4.6.0",
"denodeify": "^1.2.1",
"entities": "^1.1.1",
"fb": "^1.1.0",
"formsy-react": "^0.18.0",
"history": "^2.1.2",
"jquery": "^2.2.4",
"js2xmlparser": "^1.0.0",
"json2csv": "^3.4.2",
"leaflet": "^0.7.7",
"leaflet-draw": "^0.2.4",
"lodash": "^4.13.1",
"lru-memoize": "^1.0.1",
"mapbox.js": "^2.4.0",
"material-ui": "^0.15.0",
"md5": "^2.1.0",
"meteor-node-stubs": "^0.2.3",
"mobile-detect": "^1.3.2",
"moment": "^2.13.0",
"object-path": "^0.9.2",
"pluralize": "^2.0.0",
"prerender-node": "^2.2.2",
"query-string": "^4.1.0",
"raf": "^3.2.0",
"rc-tooltip": "^3.3.2",
"react": "^15.1.0",
"react-addons-create-fragment": "^15.1.0",
"react-addons-css-transition-group": "^15.1.0",
"react-addons-pure-render-mixin": "^15.1.0",
"react-addons-test-utils": "^15.1.0",
"react-date-picker": "^4.0.10",
"react-day-picker": "^2.0.2",
"react-dom": "^15.1.0",
"react-geosuggest": "^1.23.0",
"react-helmet": "^3.1.0",
"react-infinite": "^0.9.2",
"react-input-autosize": "^0.6.13",
"react-komposer-fork": "^1.4.4",
"react-leaflet": "^0.11.5",
"react-motion": "^0.4.3",
"react-popover-fork": "^0.6.4",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"react-router-redux": "^4.0.4",
"react-router-scroll": "^0.2.0",
"react-select": "^1.0.0-beta13",
"react-slider-fork": "^0.6.0",
"react-tap-event-plugin": "^1.0.0",
"react-textarea-autosize": "^4.0.2",
"react-tween-state": "^0.1.5",
"recompose": "^0.19.0",
"redux": "^3.5.2",
"redux-form": "^6.0.0-alpha.14",
"redux-saga": "^0.10.4",
"redux-thunk": "^2.1.0",
"request": "^2.72.0",
"reselect": "^2.5.1",
"scrollreveal": "^2.3.3",
"shallowequal": "^0.2.2",
"sphericalmercator": "^1.0.5",
"stripe": "^4.7.0",
"underscore.string": "^3.3.4",
"velocity-animate": "^1.2.3",
"xml2js": "^0.4.16"
},
"cssModules": {
"enableSassCompilation": [
"scss"
],
"extensions": [
"scss"
],
"specificArchitecture": "web",
"ignorePaths": [
"node_modules/react-select",
"node_modules/highlight.js"
],
"postcssPlugins": {
"postcss-modules-values": {},
"postcss-nested": {},
"postcss-modules-extract-imports": {},
"postcss-modules-scope": {},
"autoprefixer": {
"browsers": [
"last 2 versions"
]
}
}
}
}