Latest Meteor 1.8.1 not compiling with React DND

dgan · July 30, 2019, 12:19pm

Hi,

Just tried to use React DND (Drag and Drop) with current Meteor 1.8.1 and getting the following error at transpiling:

Uncaught SyntaxError: Unexpected token export

Looking at the source code it points to this in modules.js

Did not find any solutions on StackOverflow or anywhere else. Did find another person having the same issue here:

github.com/meteor/meteor

Unexpected token export error when importing npm package that uses esm export

opened 08:32PM - 06 Sep 18 UTC

closed 05:19PM - 06 Nov 19 UTC

notacouch

Hello, I'm trying to get amCharts to work in MeteorJS as an npm package. Our …latest version [uses es2015 module exports](https://github.com/amcharts/amcharts4/blob/4.0.0-beta.49/dist/es2015/core.js#L8), which does not seem to be supported in Meteor if it's within an npm package. I've also tried to get it to work by using the latest meteor, ecmascript, babel-runtime, several babel plugins (es6 to cjs, reify), and even esm, but no dice. Could use some guidance/help! - The error occurs in both Meteor versions 1.7.0.5 and 1.7.1-rc6 - I'm using Windows 7, Chrome Canary Version 71.0.3544.2 (Official Build) (64-bit) and Firefox 61.0.2. - Expected behavior: [According to documentation](https://docs.meteor.com/packages/modules.html), es2015 modules should just work. - Actual behavior: Chrome:  ![meteorjs error - unexpected token export in modules js](https://user-images.githubusercontent.com/2334143/45183005-d7777e00-b1f0-11e8-831b-f976836a3d2d.PNG) ![meteorjs error - error on es6 export 2](https://user-images.githubusercontent.com/2334143/45183015-dd6d5f00-b1f0-11e8-911b-a99a50540ff5.PNG) Firefox: > SyntaxError: export declarations may only appear at top level of a module modules.js:1001 - I've provided steps below to reproduce the error in two ways: 1) You can try adding the npm package manually or 2) cloning this repo: https://github.com/notacouch/meteor-esm-export-bug/ ### 1) Reproducing manually in a basic app generated via `meteor create` ```bash meteor npm install --save @amcharts/amcharts4 ``` Add the following to your client/main.js: ```javascript import * as am4core from "@amcharts/amcharts4/core"; ``` Run `meteor`. ### 2) Reproducing via repo I've revisited the steps myself. Cloned the repo: ```bash git clone https://github.com/notacouch/meteor-esm-export-bug.git ``` output: > Cloning into 'clonetest'... > remote: Counting objects: 29, done. > remote: Compressing objects: 100% (22/22), done. > remote: Total 29 (delta 2), reused 25 (delta 1), pack-reused 0 > Unpacking objects: 100% (29/29), done. ```bash cd meteor-esm-export-bug ``` Installed packages... ```bash meteor npm install ``` output: > added 233 packages from 276 contributors and audited 1324 packages in 31.152s > found 0 vulnerabilities Ran meteor... ```bash meteor ``` output: > => Started proxy. > => Started MongoDB. > => Started your app. > > => App running at: http://localhost:3000/ > Type Control-C twice to stop. Any help would be appreciated. Thanks!

( diadama commented 10 days ago •

edited

got the same error with react-dnd

On Windows and Mac with the current Meteor version)

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// //
// node_modules/react-dnd/lib/index.js //
// //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
export * from ‘./common’;
export * from ‘./hooks’;
export * from ‘./decorators’;

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

},“common”:{“index.js”:function(){

dgan · July 30, 2019, 12:37pm

FYI, Updated to 1.8.2 beta 13 and that does not fail with the same error.

Updated using:

meteor update --release 1.8.2-beta.13

giova.panasiti · August 6, 2019, 11:40pm

Any news on this?

I’ve got the same probelm

dgan · August 7, 2019, 12:37am

Yes, just update to the latest 1.8.2 beta. Works great!

meteor update --release 1.8.2-beta.16

davidsavoie1 · August 19, 2019, 2:27pm

But what is the actual problem? I’m not keen on using a beta version in production…

EDIT : Alright, I’ve read about the root cause from the links above. I guess I’ll have to go for the beta version then if I don’t want to go for a complicated workaround…

davidsavoie1 · August 19, 2019, 3:39pm

Î tried reintroducing react-dnd package in my Meteor 1.8.1 project (not the beta version) by using the command npm install instead of meteor npm install and, to my great surprise, it doesn’t crash like it used to.

Could anybody explain the difference between the two commands? What could be different under the hood?

EDIT: Nope! I was mistaken. It fails just the same with npm install only…

davidsavoie1 · August 23, 2019, 2:24pm

Just for the record, it happens that React-DnD has a commonJS compatible version react-dnd-cjs with associated cjs backends. Using those allows me to avoid using a beta version of Meteor.

storyteller · August 25, 2019, 1:16pm

If that is the case, then you might want Meteor to recompile the npm package.

davidsavoie1 · August 27, 2019, 12:11am

Thanks for your input, I wouldn’t have known. However, the react-dnd-cjs is available directly via NPM, it’s not a hidden export in the repo itself, so I didn’t need to recompile it.

captainn · August 27, 2019, 12:29am

You should generally always use meteor npm install because it will make sure if the package you are installing uses any native modules (like the bcrypt package) it’ll install or build binaries for Meteor’s embedded version of node, instead of whatever you have on your system.