javascript - 解决create-react-app项目的 'WebpackMissingModule'——专门针对 'binpacker'

Question

我对此感到抓狂——我正在开发一个小型的 create-react-app 项目，需要使用 binpacker我不断得到

menuToData.js:2 Uncaught Error: Cannot find module 'binpacking' at webpackMissingModule (menuToData.js:2)

我有

• 删除了 `node_modules``
• 删除了yarn.lock
• 使用yarn重新安装 Node 模块
• 尝试使用 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 uninstall binpacking，如果不起作用，请检查项目根目录中是否有 Node 模块文件夹，将其删除，从项目文件夹中删除 node_modules 并进行 npm install。我建议坚持从 React 语句中导入。