Babel wrapper package for use with Meteor.
This repository has been merged into Meteor main repository. You can find it there.
Babel wrapper package for use with Meteor
License: Other
Babel wrapper package for use with Meteor.
This repository has been merged into Meteor main repository. You can find it there.
What I tried:
@babel/runtime-corejs2
babelrc
with this: { "plugins": [ "@babel/plugin-transform-runtime", { "corejs": 2 } ] }
@babel/plugin-transform-runtime
with @babel/core
and pinning them to 7.0.0-beta.56
But didn't change the situation.
Relevant links:
Relevant post on Meteor Forum: https://forums.meteor.com/t/error-cannot-find-module-babel-runtime-helpers-builtin-interoprequiredefault/44944/7
Relevant Meteor issue: meteor/meteor#10126
Babel release changelog: https://github.com/babel/babel/releases/tag/v7.0.0-beta.56
Updated docs for runtime plugin: https://github.com/babel/babel/releases/tag/v7.0.0-beta.56
Original PR in Babel: babel/babel#8266
Here is the stacktrace:
=> Started proxy.
W20180804-14:25:34.341(0)? (STDERR) XXXXXXXXX/.meteor/local/build/programs/server/boot.js:475
W20180804-14:25:34.381(0)? (STDERR) }).run();
W20180804-14:25:34.381(0)? (STDERR) ^
W20180804-14:25:34.382(0)? (STDERR)
W20180804-14:25:34.382(0)? (STDERR) Error: Cannot find module '@babel/runtime/helpers/builtin/interopRequireDefault'
W20180804-14:25:34.382(0)? (STDERR) at Function.Module._resolveFilename (module.js:547:15)
W20180804-14:25:34.383(0)? (STDERR) at Function.resolve (internal/module.js:18:19)
W20180804-14:25:34.383(0)? (STDERR) at Object.require (XXXXXXXXX/.meteor/local/build/programs/server/boot.js:288:32)
W20180804-14:25:34.384(0)? (STDERR) at makeInstallerOptions.fallback (packages/modules-runtime.js:651:18)
W20180804-14:25:34.384(0)? (STDERR) at require (packages/modules-runtime.js:244:16)
W20180804-14:25:34.384(0)? (STDERR) at livedata_connection.js (XXXXXXXXX/.meteor/local/build/programs/server/packages/ddp-client.js:147:30)
W20180804-14:25:34.384(0)? (STDERR) at fileEvaluate (packages/modules-runtime.js:343:9)
W20180804-14:25:34.385(0)? (STDERR) at require (packages/modules-runtime.js:238:16)
W20180804-14:25:34.385(0)? (STDERR) at namespace.js (packages/ddp-client/common/namespace.js:1:300)
W20180804-14:25:34.385(0)? (STDERR) at fileEvaluate (packages/modules-runtime.js:343:9)
We're using meteor-babel
in our wallabyJS config, and a recent update to this package has broken it.
Here's the compilers part:
compilers: {
'**/*.js?(x)': wallaby.compilers.babel({
presets: ['meteor', '@babel/preset-react', '@babel/preset-flow'],
plugins: [
'@babel/plugin-transform-modules-commonjs',
'@babel/plugin-proposal-class-properties',
'meteor-babel/plugins/dynamic-import', // Disabling this generates another error
],
}),
},
If I disable the use of the meteor-babel plugin, I get this error:
SyntaxError: Support for the experimental syntax 'dynamicImport' isn't currently enabled
How to enable dynamic import now?
I used to use grigio:babel which is now marked as "deprecated" because of the new babel-compiler package. But I have troubles using this, as babel-compiler does not support client code. Why is this so? I should be no problem to transpile it for the client during the build process, as it is possible with grunt / gulp for quite a long time. Supporting babel on the server only is a huge drawback.
When babel parses React elements, it forgets the variables alias
import React from "react";
import ReactDOM from "react-dom";
import { Meteor } from "meteor/meteor";
import { LocaleProvider } from "antd";
import enUS from "antd/lib/locale-provider/en_US";
console.log(LocaleProvider);
Meteor.startup(() => {
ReactDOM.render(
<LocaleProvider locale={enUS}>
<h1>Hello World</h1>
</LocaleProvider>,
document.getElementById("render-target")
);
});
Compiles into:
// ...............
module.importSync("antd/lib/locale-provider/style/css", {
style: function (v) {
_style = v;
}
}, 0);
var _default = void 0;
module.importSync("antd/lib/locale-provider", {
"default": function (v) {
_default = v;
}
}, 1);
// ...............
console.log(_default); //LocaleProvider=_default.... Right!
Meteor.startup(function () {
ReactDOM.render(React.createElement(
LocaleProvider, // <- babel forgot its supposed to be _default
{
locale: enUS
},
React.createElement(
"h1",
null,
"Hello World"
)
), document.getElementById("render-target"));
});
.babelrc
{
"ignore": [
"imports/do-not-babel.js"
]
}
This does not seem to be working.
When using meteor and antd (a react components framework), we need to use babel-plugin-import to convert this code:
import { Button } from 'antd';
into
var _button = require('antd/lib/button');
It was working with [email protected], but now it's not working ([email protected]). I guess it because now meteor-babel will compile first using reifyCompiler and then pass the result to babel, while in v0.13.0 babel compile first and then pass the result to reify.
Is it possible to make reify not transpile specific module (like antd)? so babel will take the responsible to transpile it using babel-plugin-import?
Changing this line to:
var cacheHash = util.deepHash(meteorBabelVersion, source, JSON.stringify(options));
...more than doubles hashing performance. The simplest and most performant thing would probably be to drop deepHash
and just take the SHA of JSON.stringify({meteorBabelVersion, source, options})
.
Edit: Oops, since source
is a really big string, maybe don't JSON the whole thing, just options
, and use deepHash
.
React introduced the "New JSX Transform" that no longer requires the React variable to be available in the current context. This isn't enabled by default, but can be done manually, see https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup. Am I correct that this could be implemented in
Line 83 in 3b8dfd3
options.presets.push(require("@babel/preset-react"));
with
options.presets.push(
[require("@babel/preset-react"), {
runtime: "automatic",
}]
);
I tried doing this locally in my ~/.meteor
directory, but Meteor didn't appear to pickup these changes..
It seems like Meteor is ignoring the env option in a babelrc. After you set the NODE_ENV or BABEL_ENV it appears that the Meteor build process fails to take into account the environment and run the plugins that are listed under that environment. For example, if your .babelrc looks like:
{
"env": {
"unittesting": {
"plugins": ["rewire"]
}
}
}
and you run the command: NODE_ENV="unittesting" meteor test --driver-package practicalmeteor:mocha --port 3100
You get an error caused by missing rewire. However, if you put the rewire plugin at the top level of the .babelrc file everything works fine. All of this leads me to think that Meteor is breaking from expected babel behavior and just ignoring the env option. See: https://forums.meteor.com/t/environment-variable-in-babelrc-ignored-by-meteor-build/33166 for additional details.
I'm trying to upgrade from Meteor 1.6 to Meteor 1.11.1 and I'm getting the same error on virtually every file: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute
.
Attaching a debugger to the running meteor process (the builder, not the runner) and modifying Object.defineProperty
to look for these situations and pause:
origDefineProperty = Object.defineProperty;Object.defineProperty = function(o, p, v, ...args) {
if (v) {
if ((v.writeable || v.value !== undefined) && (v.get || v.set)) {
debugger;
}
}
try {
return origDefineProperty.call(Object, o, p, v, ...args)
}
catch (e) {
debugger;
console.error(e);
console.log(o, p, v, ...args);
}
}
Shows that the offending value + getter combo is caused by the handleKey
function in util.js(https://github.com/meteor/babel/blob/master/util.js#L49)
This is caused by an internal package (a hack to make sourcemaps work better) - but it feels like something that should be fixed, if a getter/setter is defined, don't set the value.
This package doesn't have documentation so I'm not sure a) how to use it properly and b) whether it'd be helpful for the issues I'm currently facing.
In my case, meteor testing with practicalmeteor:mocha is choking on the spread operator, resulting in:
SyntaxError: Unexpected token ...
Meteor has it's magical if (Meteor.isClient) import 'foo.scss';
syntax which violates JavaScript standards.
What is the best way to achieve compatibility with JavaScript parsers, like js-hyperclick, which fails to parse Meteor files as a result of this?
I've reported the issue and my workaround hack here: AsaAyers/js-hyperclick#122
After release 1.10.2 the meteor-babel's version should be 7.9.0. meteor/meteor@156bdcd
On npm the version also 7.9.0 https://www.npmjs.com/package/meteor-babel
Seems like @benjamn forgot to commit changes in this repo)
See https://facebook.github.io/react/docs/jsx-in-depth.html#the-transform:
JSX will infer the class's displayName from the variable assignment when the
displayName is undefined:// Input (JSX):
var Nav = React.createClass({ });
/> / Output (JS):
var Nav = React.createClass({displayName: "Nav", });
and https://babeljs.io/docs/usage/jsx/:
Tags are automatically transformed to their equivalent React.createElement(...) and displayName is automatically inferred and added to all React.createClass calls.
Here's the repro (run inside a clone of this repo):
Avitals-MacBook-Air:babel avital$ node
> Babel = require('./index')
{ getDefaultOptions: [Function: getDefaults],
parse: [Function: parse],
compile: [Function: compile],
installRuntime: [Function: installRuntime],
runtime: [Function: installRuntime] }
> Babel.compile("Foo = React.createClass({render: function () { return <div></div> }});", {whitelist: ["react"]}).code
'Foo = React.createClass({ render: function () {\n return React.createElement("div", null);\n } });'
(This manifests itself as a failure on the react-template-helper
Meteor packages in the github.com/meteor/react-packages repo. The failing test tests a diagnostic message that extracts displayName
. Previous versions of this package worked when they depended on an older version of the babel-compiler
package that used the babel-core
NPM package directly)
Matt's blog post (http://info.meteor.com/blog/whats-coming-in-meteor-12-and-beyond) seems to suggest that we can start using ES6 in Meteor projects, right now.
Is there a way to add this package into Meteor 1.1 apps and start using ES6 immediately? I'm guessing it's not as simple as Npm.depends({"meteor-babel": ...})
, is it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.