导入自定义 npm 包会导致空/空对象

Posted 2023-02-22

【中文标题】导入自定义 npm 包会导致空/空对象

【英文标题】：importing custom npm package results in empty/null object

【发布时间】：2016-06-22 21:01:30

【问题描述】：

我可以在同一个包中导入 MyComponent 并将其呈现在页面上，但我无法链接或下载 MyComponent 包并导入组件。

package.json:

  "name": "my-component",
  "version": "1.0.0",
  "main": "dist/index.js",
  "directories": ,
  "dependencies": ,
  "devDependencies": 
    "babel-loader": "^6.2.3",
    "babel-preset-es2015": "",
    "babel-preset-react": "",
    "css": "^2.2.1",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "node-sass": "^3.4.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "sass": "^0.5.0",
    "sass-loader": "^3.1.2",
    "style": "0.0.3",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  

webpack.config.js：

var path = require('path');

module.exports = 
  entry: './src/MyComponent.jsx',
  output: 
    path: './dist/',
    filename: './index.js'
  ,
  module: 
    loaders: [
      test: /\.jsx$/,
      include: path.resolve(__dirname),
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: 
        presets: ['react', 'es2015']
      
    ,
    
      test: /\.scss$/,
      include: /.scss$/,
      loader: 'style!css!sass'
    ,
    
      test: /\.html$/,
      loader: "file?name=[name].[ext]",
    ,]
  
;

./src/MyComponent.jsx

import React from 'react';

export default class MyComponent extends React.Component 
  constructor(props) 
    super(props);
  
  render() 
    return (
      <div>Hello World.</div>
    );
  


MyComponent.propTypes = 
  class: React.PropTypes.string

MyComponent.defaultProps = 
  class: ''


console.log(MyComponent)

使用 webpack 开发服务器，我可以将此组件导入另一个文件并将其呈现到页面。

当我在另一个项目中链接和/或安装 webpack 构建的结果时，我希望能够执行相同的操作，如下所示：

new-app.jsx：

import React from 'react'
import ReactDOM from 'react-dom'
import MyComponent from 'my-component'
console.log(MyComponent)
ReactDOM.render(MyComponent, document.body)

当我从“my-component”导入模块时，MyComponent.jsx 中存在的 console.log 语句按预期记录“function MyComponent(props) ...”，但新的 console.log 语句应用程序记录一个空对象。

渲染 new-app.jsx 时的控制台输出：我相信第一个日志是来自 MyComponent.jsx 的日志，第二个日志来自我的新应用程序。

index.js:19783 MyComponent(props) 
            _classCallCheck(this, MyComponent);

            return _possibleConstructorReturn(this, Object.getPrototypeOf(MyComponent).call(this, props));
          
index.js:58 Object 

我的配置中是否缺少任何内容？我是否以不正确的方式导出/导入？

【问题讨论】：

我有点困惑.. 你的 node_modules 文件夹中有一个名为 my-component 的包吗？

是的，在我的新应用程序中，有一个文件夹 ./node_modules/my-component 包含源和工件。这可以通过 npm 链接它们，或者通过发布到 npm 并执行 npm 安装来实现

好吧，也许看看他们在这里的做法：github.com/gpbl/react-day-picker，你的 webpack 配置中可能需要库 webpack.github.io/docs/configuration.html#output-library

【参考方案1】：

解决方案是将其添加到 webpack.config.js 的输出中

library: 'MyComponent',
libraryTarget: 'umd'

【讨论】：

很久以前这个问题，但我自己也遇到过。这些行实际上是做什么的？

【参考方案2】：

我也遇到过类似的问题

import MySingleton from "../../../dist/my-bundle-webpack-package";

MySingleton.instance.foo();

错误：

Cannot read property 'instance' of undefined

我的包文件的 index.ts 是：

export class MySingleton
   ...

module.exports = MySingleton;

问题的解决方案是删除module.exports：

export class MySingleton
   ...

【参考方案3】：

添加 libraryTarget: 'umd' 在这里没有帮助。

我在尝试通过npm link 将 npm 包用作库时遇到了一些问题。在我的案例中，罪魁祸首是两个项目的重复依赖项 - Project 和 Lib 正在导入相同的模块。 Webpack 在这里静默失败。

通过将"externals" 添加到我在 Lib 中的 webpack 配置中来修复它，告诉这些包将存在于项目中

externals: 
    "pixi.js": "pixi.js",
    immer: "immer",
    redux: "redux",
    lodash: "lodash",
    gsap: "gsap",
  ,