roman01la / html-to-react-components

Converts HTML pages into React components
https://roman01la.github.io/html-to-react-components/
MIT License
2.13k stars 136 forks source link

Build Error: API Usage in browser build #20

Closed kewilson closed 6 years ago

kewilson commented 6 years ago

Get a slew of errors when attempting to import the npm package.

Won't post the whole thing but the first line is: ERROR in C:/nvm/v8.9.4/node_modules/html-to-react-components/node_modules/htmltojsx/src/htmltojsx.js

Installed the pkg globally as instructed. Linked local node_modules to global installation. ran npm run build -> lots of errors

Any guidance you can provide regarding usage of your pkg in js would be very welcome. Example code below ..

import html2reactjs from 'html-to-react-components'

htmlPage = 'html page content stuff here';

html2reactjs( htmlPage, { path: compFolder, fileExtension: 'jsx' } );

roman01la commented 6 years ago

Minimal repro would be very helpful.

roman01la commented 6 years ago

Also for programmatic usage the lib should be installed locally.

kewilson commented 6 years ago

Grab the https://github.com/artf/grapesjs-plugin-boilerplate

npm i npm i --no-save grapesjs npm run build npm start

verify all is well in localhost:8080 (opened automatically)

npm i html-to-react-components Modify grapesjs-plugin-boilerplate/src/index.js add import h2rc from 'html-to-react-components' to list of existing imports save npm run build

Watch screen for errors

roman01la commented 6 years ago

Webpack errors are pretty informative here.

Module build failed: Error: Couldn't find preset "es2015" relative to directory "grapesjs-plugin-boilerplate/node_modules/htmltojsx"

Module not found: Error: Can't resolve 'fs'

roman01la commented 6 years ago

I've just double checked compilation with Webpack for the browser and it looks like it won't work. In master I just changed how browser build excludes Node deps. Now it's done via IN_BROWSER flag which should be defined at compile time (example config). But build still fails due to a syntax error and I'm not sure where it comes from. Also it seems like there's no "easy" way of bundling prettier for the browser (Prettier is used to format output code)

roman01la commented 6 years ago

Got it working. Update to 1.6.0 and see Building for browser section

kewilson commented 6 years ago

awesome .. will check it out, thanks a bunch!

roman01la commented 6 years ago

JFYI: Just added online REPL http://roman01la.github.io/html-to-react-components/repl/

kewilson commented 6 years ago

I've updated and things build so woot! woot! Off to see how the API responds, thanks again much appreciated!