V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
yazoox
V2EX  ›  JavaScript

为什么 import 一个库后,就 syntax error, unexpected token 'export' 了?

  •  
  •   yazoox · 2021-01-19 10:20:28 +08:00 · 2472 次点击
    这是一个创建于 1391 天前的主题,其中的信息可能已经有所发展或是发生改变。

    nodejs, react, typescript

    node v14.7.0
    react 17.0
    jest 26.6.3

    这是一个测试,主要用来测试入口文件的。 我不清楚为什么写这个测试,都是 legacy (几年前的,写的人也走了)的代码。
    也不太好删除,否则,得去“解释”为什么把这个测试删除。(大家都懂的)

    我的理解,这个测试主要就是,看看能否正常把 index module 给 load 进来,不出错就行。

    describe("tests", () => {
      describe("bootstraping the app", () => {
        it("test react render method", () => {
          const app = document.createElement("div");
          app.setAttribute("id", "app");
          document.body.appendChild(app);
    
          const bootStrapper = () => {
            require("../index");
          };
    
          expect(bootStrapper).not.toThrowError();
    
          document.body.removeChild(app);
        });
      });
    });
    

    然后,index.tsx 文件,就是我们程序的入口文件,引用 react,然后 render app.

    import * as React from "react";
    ... blabla
    
    
    

    现在,有新的需要,我添加了 一个 import

    import * as React from "react";
    import { Inspector } from "react-dev-inspector";
    
    <inspector>
      <app />
    </inspector>
    
    

    用这个 wrap 原来的 app.

    项目都能够正常编译,运行。所有的功能使用下来都正常。但就是上面这个测试跑不过。
    提示出错的位置,就是那个 import 语句那里。

        expect(received).not.toThrowError()
    
        Error name:    "SyntaxError"
        Error message: "Unexpected token 'export'"
    

    不是很清楚,是 module 导出有问题,还是 import 有问题。
    google 了半天,没有找到类似问题或者合适的答案。

    特来请教一下。 谢谢

    p.s. https://stackoverflow.com/questions/38296667/getting-unexpected-token-export

    9 条回复    2021-01-21 21:16:30 +08:00
    yaphets666
        1
    yaphets666  
       2021-01-19 10:25:02 +08:00
    import { Inspector } from "react-dev-inspector";
    试下把大括号去掉
    import Inspector from "react-dev-inspector";
    yazoox
        2
    yazoox  
    OP
       2021-01-19 10:40:36 +08:00
    @yaphets666
    我查看了一下 react-dev-inspector 的文件 index.d.ts ,就一行。
    ```
    export * from './Inspector';
    ```
    所以,你说的方法不行。不过,我试了一下

    import * as devinspector from "react-dev-inspector";
    blabla...

    yarn start 能够编译通过,程序能运行。但是,test 还是过不了。错误和前面一样的。
    magicdawn
        3
    magicdawn  
       2021-01-19 11:45:40 +08:00
    项目跑起来和测试不是一个配置呗.
    建议检查 tsconfig.json compileOptions.module / babel 相关的 includes
    alan0liang
        4
    alan0liang  
       2021-01-19 12:15:11 +08:00 via Android
    应该是没有设好 babel-loader 的 excludes 吧,默认情况下我记得 babel-loader 会跳过转译 node_modules,需要自己在 webpack config 里设一下

    #1 不对,这个包用的确实是 named export 而不是 default export,需要花括号
    yazoox
        5
    yazoox  
    OP
       2021-01-20 10:24:33 +08:00
    @alan0liang
    项目运行需要编译,所以会跑 webpack,但是 jest 好像没有,直接运行的
    我们有个 jest.config.js 的配置文件 ,里面倒是有 babel 相关

    module.exports = {
    preset: "ts-jest",
    testEnvironment: "jsdom",
    reporters: ["default", "jest-junit"],
    globals: {
    "ts-jest": {
    babelConfig: {
    plugins: ["dynamic-import-node", "babel-plugin-styled-components"]
    },
    tsconfig: "<rootDir>/tsconfig.jest.json"
    }
    }
    }



    @magicdawn
    tsconfig.jest.json 只比项目运行的 jest 文件多下面这一项配置

    {
    "extends": "./tsconfig.json",
    "compilerOptions": {
    "esModuleInterop": true
    }
    }
    zthxxx
        6
    zthxxx  
       2021-01-21 11:02:22 +08:00
    @yazoox jest 如果要跑 jsx / tsx 文件,最好也编译一下,保证和 webpack loader 处理后一致,如 jest 有 transform 字段配置,通常会配置 ts-jest 和 babel

    https://jestjs.io/docs/en/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    zthxxx
        8
    zthxxx  
       2021-01-21 14:44:32 +08:00
    或者在 jest 环境下就不去 import 这个库呢,因为这个库导出的给 react 的组件是 es module 类型的 (导出的给 node 用的 plugin 这些才是 commonjs 的),所以在你的 jest 下如果不经过 babel / esm 这些转换就不支持
    yazoox
        9
    yazoox  
    OP
       2021-01-21 21:16:30 +08:00
    @zthxxx 明白你的意思了,我再试试。thx
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2626 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 03:20 · PVG 11:20 · LAX 19:20 · JFK 22:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.