时间戳

首页 > 解决方案 > NPM 供应商插件无法构建

reactjs - NPM 供应商插件无法构建

问题描述

我遇到了以下非常奇怪的构建问题，我似乎无法追踪我正在构建的 gatsby 插件：https ://github.com/flockcover/gatsby-plugin-branch-web-sdk 。奇怪的是，当我在插件目录下拥有完全相同的插件，而不是通过 npm 出售时，构建通过就好了

141 | var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
  142 | var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
> 143 | var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
      | ^
  144 | 
  145 | // A reserved attribute.
  146 | // It is handled by React separately and shouldn't be written to the DOM.


  WebpackError: 

  - react-dom-server.node.development.js?5336:143 Parser.pp$4.raise
    ~/react-dom/cjs/react-dom-server.node.development.js?5336:143:1

  - react.development.js?1871:438 Parser.pp.unexpected
    ~/react/cjs/react.development.js?1871:438:1

  - emptyObject.js?42e4:11 Parser.pp$3.parseExprAtom
    ~/fbjs/lib/emptyObject.js?42e4:11:1

  - index.js?2927:58 Parser.pp$3.parseExprSubscripts
    ~/object-assign/index.js?2927:58:1



  - react.development.js?1871:1455 Parser.pp$3.parseMaybeConditional
    ~/react/cjs/react.development.js?1871:1455:1

  - react.development.js?1871:1432 Parser.pp$3.parseMaybeAssign
    ~/react/cjs/react.development.js?1871:1432:1


  - invariant.js?4599:48 Parser.pp$3.parseExprAtom
    ~/fbjs/lib/invariant.js?4599:48:27

  - index.js?2927:58 Parser.pp$3.parseExprSubscripts
    ~/object-assign/index.js?2927:58:1



  - react.development.js?1871:1455 Parser.pp$3.parseMaybeConditional
    ~/react/cjs/react.development.js?1871:1455:1

  - react.development.js?1871:1432 Parser.pp$3.parseMaybeAssign
    ~/react/cjs/react.development.js?1871:1432:1
```

gatsby clipboard:
```
 System:
    OS: macOS High Sierra 10.13.4
    CPU: x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.2 - ~/.nvm/versions/node/v8.9.2/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 5.5.1 - ~/.nvm/versions/node/v8.9.2/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 61.0.2
    Safari: 11.1
  npmPackages:
    gatsby: 1.9.273 => 1.9.273 
    gatsby-link: ^1.6.40 => 1.6.46 
    gatsby-plugin-emotion: ^1.1.17 => 1.1.17 
    gatsby-plugin-intercom-spa: ^0.0.5 => 0.0.5 
    gatsby-plugin-netlify: ^1.0.19 => 1.0.21 
    gatsby-plugin-netlify-cms: ^2.0.1 => 2.0.1 
    gatsby-plugin-react-helmet: ^2.0.10 => 2.0.11 
    gatsby-plugin-segment-js: ^2.0.1 => 2.0.1 
    gatsby-plugin-sharp: ^1.6.44 => 1.6.48 
    gatsby-remark-images: ^1.5.67 => 1.5.67 
    gatsby-remark-relative-images: ^0.1.2 => 0.1.2 
    gatsby-source-filesystem: ^1.5.36 => 1.5.39 
    gatsby-transformer-remark: ^1.7.41 => 1.7.44 
    gatsby-transformer-sharp: ^1.6.24 => 1.6.27 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

通过明智的调试，我发现在 gatsby-ssr 中添加对 setHeadComponents 的调用时似乎会出现这种情况。

任何帮助将非常感激！我真的不知道在哪里看:(

标签： reactjswebpackgatsby

解决方案

最后，经过几个小时的问题，结果是我的插件中缺少 .babelrc，这使得 webpack 不知道如何处理 JSX。

解决方案是将 babel-preset-react 添加到我的插件的 package.json 中，并对我的 babelrc 做出反应。

这在插件目录下工作，因为它是由我网站的 babel 配置处理的。

推荐阅读