为create-react-app项目解决'WebpackMissingModule'-专门针对'binpacker'

Question

我为此付出了努力-我正在开发一个小型的create-react-app项目，该项目需要使用binpacker，而且我一直在得到

  

menuToData.js：2未捕获的错误：找不到模块“装箱”       在webpackMissingModule（menuToData.js：2）

我有

• 删除了“ node_modules”
• 已删除yarn.lock
• 使用yarn
重新安装了节点模块
• 尝试使用require代替import

没有任何帮助。

我的package.json是

{
  "name": "something",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/core": "^10.0.10",
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/free-solid-svg-icons": "^5.8.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "axios": "^0.18.0",
    "binpacking": "^0.0.1",
    "bulma": "^0.7.5",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.3",
    "react-scripts": "3.0.1",
    "react-spinners": "^0.5.4",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-saga": "^1.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

和我要导入“ binpacking”的文件（'menuToData.js'）

import binpacking from 'binpacking'
const Packer = binpacking.Packer;


const maxWidth = 30
const maxHeight = 20

const packer = new Packer(maxWidth,maxHeight)

export default (menu,allData) => {

  const blocks = []

  if (menu < 0 || menu > allData.length-1) return []

  const items = allData[menu].items

  for (let i = 0; i <items.length ; i++) {
    const wurst = items[i]
    for (let j = 1; j <= wurst.Quantity ; j++) {
      blocks.push({name:wurst.Name,w:wurst.Width,h:wurst.Length})
    }

  }

  if (! blocks) return []
  blocks.sort((a,b) => (b.h < a.h));
  packer.fit(blocks);

  console.log(blocks)

}

这是node_modules

中的模块

模块中的js/index.js文件是

exports.GrowingPacker = require('./packer.growing.js').GrowingPacker;
exports.Packer = require('./packer.js').Packer;

任何帮助，不胜感激！

Answer 1

尝试npm卸载binpack，如果不起作用，请检查项目的根目录中是否有node modules文件夹，删除该节点，从项目文件夹中删除node_modules并进行npm安装。我建议坚持从语句中导入以进行反应。