Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Picker组件,在ssr的场景抛出异常: SyntaxError: Unexpected token export. #3013

Closed
1 task done
DevilZh opened this issue Dec 27, 2018 · 10 comments
Closed
1 task done
Assignees
Labels

Comments

@DevilZh
Copy link

DevilZh commented Dec 27, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.2.6

Environment

all

Reproduction link

https://github.com/ant-design/ant-design-mobile

Steps to reproduce

必现

What is expected?

不报错

What is actually happening?

语法报错


前提: nodejs版本v.8.7,做服务端渲染,使用到了picker相关组件,同时服务端没有es6编译为es5的过程
原因排查: Picker组件依赖rmc-cascader组件,该组件又依赖了三方包array-tree-filter,此包使用了es6的模块语法,并没经过编译就直接发布至npm

@chang-ke
Copy link

@DevilZh 应该可以使用babel-node让node支持es6模块

@DevilZh
Copy link
Author

DevilZh commented Dec 27, 2018

@Tungpin 服务端是用的typescript,直接是将ts编译为js的,不想再在此基础上添加其他编译环节

@chang-ke
Copy link

@DevilZh

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.arrayTreeFilter = factory());
}(this, (function () { 'use strict';

function arrayTreeFilter(data, filterFn, options) {
    options = options || {};
    options.childrenKeyName = options.childrenKeyName || "children";
    var children = data || [];
    var result = [];
    var level = 0;
    do {
        var foundItem = children.filter(function (item) {
            return filterFn(item, level);
        })[0];
        if (!foundItem) {
            break;
        }
        result.push(foundItem);
        children = foundItem[options.childrenKeyName] || [];
        level += 1;
    } while (children.length > 0);
    return result;
}

return arrayTreeFilter;

})));

该npm包使用的是umd模块,node可以正常使用

@DevilZh
Copy link
Author

DevilZh commented Dec 27, 2018

@Tungpin 你看的是lib/index.js吧,然而作者在package.json文件中配置的main属性是根目录的index.js,根目录的index.js用的是ES Module语法

@chang-ke
Copy link

@DevilZh image

@DevilZh
Copy link
Author

DevilZh commented Dec 27, 2018

@Tungpin 兄嘚,你是直接安装的这个模块吗?你的是最新版,事实上, 包的依赖关系是,picker-view -> rmc-cascader@5.0.2 -> array-tree-filter@1.0.x 也就是说array-tree-filter的版本是1.0版本

array-tree-filter1.0版本是这样的:

正因为是嵌套依赖,所以作为使用者,无法随意更改这个版本号

@chang-ke
Copy link

@DevilZh 所以你要么给这个repo提issue,要么自己利用工具处理

@ziluo
Copy link
Contributor

ziluo commented Dec 28, 2018

@DevilZh @Tungpin 感谢定位问题,马上给rmc-cascader提Issue跟进

@ziluo
Copy link
Contributor

ziluo commented Dec 28, 2018

@DevilZh rmc-cascader已发布5.0.3,可以再试下

@ziluo ziluo closed this as completed Dec 28, 2018
@DevilZh
Copy link
Author

DevilZh commented Jan 10, 2019

@ziluo 感谢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants