react-grid-layout / react-resizable

A simple React component that is resizable with a handle.

Home Page:https://strml.github.io/react-resizable/examples/1.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error when trying to import ResizableBox

kroscek opened this issue · comments

Problem Report

I'm trying to import ResizableBox locally without npm install.

Here is my package.json:

{
  "name": "my-react-app",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
    "@babel/plugin-transform-flow-strip-types": "^7.12.1",
    "@babel/plugin-transform-regenerator": "^7.12.1",
    "@babel/plugin-transform-spread": "^7.12.1",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-flow": "^7.12.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "flow-bin": "^0.133.0",
    "html-webpack-plugin": "^3.2.0",
    "lodash": "^4.17.20",
    "pre-commit": "^1.1.2",
    "prop-types": "^15.7.2",
    "style-loader": "^1.0.0",
    "ts-loader": "^8.0.5",
    "typescript": "^4.0.3",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  },
  "dependencies": {
    "@babel/plugin-transform-async-to-generator": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "muuri": "^0.9.0",
    "muuri-react": "^3.1.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-draggable": "^4.0.3",
    "react-hot-loader": "^4.13.0",
    "underscore": "1.9.2"
  }
}

System Info

Browser: Firefox/Chrome
OS: Windows 10

Reproduction Bug

Please check "inspect element" in your browser to see the error
https://codesandbox.io/s/react-resizable-issue-gczqy

Uncaught TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    Babel 2
    render webpack:///./src/react-resizable/Resizable.js?:31
    React 16
    <anonymous> webpack:///./src/index.js?:13
    <anonymous> webpack:///./src/index.js?:14
    js https://gczqy.sse.codesandbox.io/main.js:1156
    __webpack_require__ https://gczqy.sse.codesandbox.io/main.js:20
    <anonymous> webpack:///multi_(webpack)-dev-server/client?:2
    0 https://gczqy.sse.codesandbox.io/main.js:1245
    __webpack_require__ https://gczqy.sse.codesandbox.io/main.js:20
    <anonymous> https://gczqy.sse.codesandbox.io/main.js:84
    <anonymous> https://gczqy.sse.codesandbox.io/main.js:87

This is not a supported use. Install it from npm or at least from the npm-packaged version, otherwise you'll need to use the exact same Babel plugins to run it.