为什么 import 一个库后，就 syntax error, unexpected token ‘export’ 了？

資深大佬 : yazoox 13

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

大佬有話說 (8)

資深大佬 : yaphets666

import { Inspector } from “react-dev-inspector”;
试下把大括号去掉
import Inspector from “react-dev-inspector”;

主資深大佬 : yazoox

@yaphets666
我查看了一下 react-dev-inspector 的文件 index.d.ts ，就一行。
“`
export * from ‘./Inspector’;
“`
所以，你说的方法不行。不过，我试了一下

import * as devinspector from “react-dev-inspector”;
blabla…

yarn start 能够编译通过，程序能运行。但是，test 还是过不了。错误和前面一样的。

資深大佬 : magicdawn

项目跑起来和测试不是一个配置呗.
建议检查 tsconfig.json compileOptions.module / babel 相关的 includes

資深大佬 : alan0liang

应该是没有设好 babel-loader 的 excludes 吧，默认情况下我记得 babel-loader 会跳过转译 node_modules，需要自己在 webpack config 里设一下

#1 不对，这个包用的确实是 named export 而不是 default export，需要花括号

主資深大佬 : yazoox

@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

@yazoox jest 如果要跑 jsx / tsx 文件，最好也编译一下，保证和 webpack loader 处理后一致，如 jest 有 transform 字段配置，通常会配置 ts-jest 和 babel

https://jestjs.io/docs/en/configuration#transform-objectstring-pathtotransformer–pathtotransformer-object

資深大佬 : zthxxx

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

https://github.com/zthxxx/react-dev-inspector/issues/14#issuecomment-764200981

資深大佬 : zthxxx

或者在 jest 环境下就不去 import 这个库呢，因为这个库导出的给 react 的组件是 es module 类型的 (导出的给 node 用的 plugin 这些才是 commonjs 的)，所以在你的 jest 下如果不经过 babel / esm 这些转换就不支持