cvdlab / react-planner

:pencil2: A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.
https://cvdlab.github.io/react-planner
MIT License
1.31k stars 462 forks source link

Installation Problems #195

Open GazEdBro opened 4 years ago

GazEdBro commented 4 years ago

Firstly we are really really keen to use react-planner because it looks like by far the best available floor planner. Whilst relatively new to react I have some years experience with Node.js, so I would expect to be able to get a library working. Installation tripped a couple of times in the catalogue, one of the mtl files referenced a png when the file was a jpg - this was changed and seems successful. And another file has import ImageFul from './imageful'; which had to be changed to import ImageFul from './imageful.jsx'; which I changed but does this mean that I am missing some part of the toolchain? The main (github) page does not mention any prerequisites in terms of libraries or loaders (I had to set up and configure babel-plugin-import-glob) what npm dependencies are not installed with react-planner? Anyway having gone through a painful process, the package finally compiled - but gives this set of errors:

react_devtools_backend.js:6 [BABEL] Note: The code generator has deoptimised the styling of "http://planner.appl/js/dist/main.js" as it exceeds the max of "500KB". r @ react_devtools_backend.js:6 i @ babel.min.js:10 t @ babel.min.js:10 t.default @ babel.min.js:10 n.generate @ babel.min.js:2 n.transform @ babel.min.js:2 (anonymous) @ babel.min.js:14 n.wrap @ babel.min.js:2 e.transform @ babel.min.js:14 s @ babel.min.js:1 r @ babel.min.js:24 i @ babel.min.js:24 r @ babel.min.js:24 e.src.n..l.content @ babel.min.js:24 n.onreadystatechange @ babel.min.js:24 XMLHttpRequest.send (async) s @ babel.min.js:24 (anonymous) @ babel.min.js:24 o @ babel.min.js:24 u @ babel.min.js:24 f @ babel.min.js:1 (anonymous) @ babel.min.js:1 main.js:1 Uncaught TypeError: e.substr is not a function at $a.load (:1:417556) at ts.load (:1:418437) at Module. (:45:1223858) at n (:1:356) at :1:1198 at :1:1210 at i (babel.min.js:24) at r (babel.min.js:24) at e.src.n..l.content (babel.min.js:24) at XMLHttpRequest.n.onreadystatechange (babel.min.js:24) load @ main.js:1 load @ main.js:1 (anonymous) @ main.js:53 n @ main.js:1 (anonymous) @ main.js:1 (anonymous) @ main.js:1 i @ babel.min.js:24 r @ babel.min.js:24 e.src.n..l.content @ babel.min.js:24 n.onreadystatechange @ babel.min.js:24 XMLHttpRequest.send (async) s @ babel.min.js:24 (anonymous) @ babel.min.js:24 o @ babel.min.js:24 u @ babel.min.js:24 f @ babel.min.js:1 (anonymous) @ babel.min.js:1 [object%20Module]:1 GET http://planner.appl/[object%20Module] 404 (Not Found)

I am at a loss now having spent at least 40 hours on this. Almost certainly missing something basic!

GazEdBro commented 4 years ago

Going round the houses still on this. Did a clean install using the demo webpack.conf.js - now however I play it I am getting

ERROR in ./src/renderer.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react' from '/home/directory' If you want to resolve "react", use "module:react" Did you mean "@babel/react"?

So am am pretty sure that there are 2 parts of the system, one is referencing @babel and just babel, but still can't find a resolution.

wilsmex commented 4 years ago

I had similar issues. What made the /demo folder finally compile for me was adding the following after line ~48 on the /demo/webpack.config.js file "import-glob", I then ran npx webpack in that folder and it compiled down for me I also added npm install babel-loader babel-preset-react at some point troubleshooting, but am not sure if that had an impact or not...

GazEdBro commented 4 years ago

Hi - I had to use someone to help out on this. Embarrassing! (wilsmex I had tried the import-glob) fix myself but it still stuck. Anyway this bit is finished for me. But I will leave this open as a marker that this aspect can use some improvement. (OK any admin feel free to close).