Question

我有一个Next.js项目，其结构如下：

- Project/

  - src/
    - pages/
      - _app.tsx
      - index.tsx
    - config.tsx

  - dist/
    - pages/
      - _app.js
      - index.js
    - config.js
    - package.json
    - node_modules/
      - next/**/*
      - mypackage/
        - index.js

  - package.json
  - tsconfig.json

  - node_modules/
    - mypackage/
      - next/**/*
      - index.js

Project/src/中的文件使用Typescript。然后，我使用tsconfig.json中的以下设置将.tsx文件编译为.js文件：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "react",
    "moduleResolution": "node",
    "outDir": "dist",
    "rootDir": "src",
    "target": "es5"
  },
  "include": ["src"]
}

这按预期工作。它将Project/src中的所有内容编译到es5（默认情况下，模块设置为commonjs）并将其输出到Project/dist。然后，我可以从npm run dev文件夹运行Project/dist，它会创建我的下一个应用。

我遇到的问题是我创建了一个自定义npm软件包mypackage，该软件包需要Project/dist/config.js中的node_modules/mypackage/index.js。我将mypackage/index.js导入Project/dist/pages/_app.js中。

该程序包也是在Typescript中创建的，并且实质上使用相同的tsconfig，这意味着node_modules/mypackage/index.js也在common5模块的es5中。

运行应用程序时，我收到错误消息ReferenceError: exports is not defined，堆栈显示这是在Package/dist/config.js中发生的。我相信错误是指该文件中的以下几行之一：

Object.defineProperty(exports, "__esModule", { value: true });

exports.default = userConfig;

堆栈跟踪还显示，这似乎是Next使用webpack的错误：

rror was not caught ReferenceError: exports is not defined
    at Module../config.js (config.js:14)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at Object../node_modules/mypackage/index.js (index.js:17)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at Object../pages/_app.js (_app.js:6)
    at __webpack_require__ (bootstrap:788)
    at fn (bootstrap:149)
    at next-client-pages-loader.js:3
    at register (page-loader.js:179)
    at PageLoader.registerPage (page-loader.js:221)
    at Array.register [as push] (_app.js:280)
    at Object../node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&absolutePagePath=private-next-pages%2F_app.js!./ (next-client-pages-loader.js:2)
    at __webpack_require__ (bootstrap:788)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at _app.js?ts=1562111349132:1

我不知道该如何解决。我尝试过：

将tsconfig.json更改为目标es6。由于使用import而不是require而导致的“ SyntaxError：Unexpected identifier”错误导致失败。
升级到Next.js金丝雀分支，旨在解决上述问题。由于next/server中缺少模块，因此无法编译。该分支尚不够稳定，无法使用。
将tsconfig.json jsx设置更改为preserve。由于Next.js不支持.jsx扩展而失败。
将tsconfig.json jsx设置更改为“ react-native”。无法解决问题。
手动删除Object.defineProperty(exports, "__esModule", { value: true });行。无法解决问题。

关于如何解决此问题的任何想法？

Next.js问题：ReferenceError：未定义导出

0 个答案: