reactjs - 'npm pack' React Component to use in other projects -


tl;dr

after re-reading post, may reducible "how can compile jsx -> js before packing package". seeing unexpected token error on same line jsx begins.

goal

i have react component wrote renders waveform visualizer using canvas tag. drawing in component , relies on nothing other react.

the host project

the component want package 'waveformvisualizer living in project created within. project has typical structure such index.js entry point webpack, babel loaders allowing me write component using es6 , jsx among es7 features ... syntax object spreading. in projectdir/src/components there <app /> component renders <waveformvisualizer /> component in center of page. dist folder hold generated bundle.js, etc..

exporting package locally

i'm trying "publish" locally @ moment. though may publish npm's registry soon, right want able run npm install ../projects/waveformvisualizer/waveformvisualizer-1.0.0.tgz , import waveformvisualizer './waveformvisualizer wherever want render component in separate projects. seems npm pack partial part of full publishing pipeline let me @ least import package on machine. set package.json file in package containing project. set name , version, , main field point file react component. run npm pack. places waveformvisualizer-1.0.0.tgz in project root directory.

the problem

so want use component in brand new project. cd new project , run npm install ../projects/waveformvisualizer/waveformvisualizer-1.0.0.tgz. seems add lot of stuff node_modules/waveformvisualizer. (it seems need npm ignore of unimportant files). nevertheless, waveformvisualizer.js component file there. when run import waveformvisualizer 'waveformvisualizer , hit save, webpack-dev-server recompiles , see following:

error in ./node_modules/waveformvisualizer/src/components/waveformvisualizer.js module parse failed: /users/<me>/projects/testnpmproject/node_modules/waveformvisualizer/src/components/waveformvisualizer.js unexpected token (165:3) may need appropriate loader handle file type. |   render() { |       return ( |           <div> |               <canvas |                   ref={canvasref => (this.canvasref = canvasref)}  @ ./src/index.js 5:26-55  @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

i've tried searching around error haven't found helpful far. 1 know can fix situation?


Comments

Post a Comment

Popular posts from this blog

resizing Telegram inline keyboard -

telegram's inline keyboard great feature lots of different use cases. inline buttons added list of items this: inline_keyboard = [[inlinekeyboardbutton(text="button", callback_data="button"), inlinekeyboardbutton(text="reset",callback_data="reset")]] inline_keyboard_markup = inlinekeyboardmarkup(inline_keyboard) update.message.reply_text("hi", reply_markup=inline_keyboard_markup) the above code adds 2 buttons each half width of chat screen. i know the normal keyboard button there resize_keyboard parameter somehow can used. my question is there way resize inline buttons ? example make full width or quarter width. unfortunately, can't now. :( you can suggest @botsupport , might add feature next version.
Read more

command line - How can a Python program background itself? -

consider following python command-line program. doesn't work because incomplete, think illustrates problem: #!/usr/bin/python3 import multiprocessing pool = multiprocessing.pool() task in expensive_iterator_with_user_interaction(): pool.call_async(expensive_computation, (task,)) pool.close() print("dear user, may press ctrl-z , bg script.") pool.join() thus, problem scripts needs user input while it's launching expensive parallel processes. there moment when user interaction not needed anymore. then, ask user background process shell actions. however, can achieved program itself? (side note: core of problem entanglement of user input firing “expensive computations”. therefore, cannot separate both in 2 scripts, , letting 1 spawning other daemon.) the command screen may you. use screen -l create new session , run application. after inputting data, can press " ctrl-a " , press " d " on keyboard detach session. now...
Read more

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -

Image
my wordpress installation on azure app service on linux using custom docker container has slow response times. pages take around 20-40 seconds load. i have troubleshooting plugin installed indicates problem "curl error 28: resolving timed out after n milliseconds" when making requests following urls https://api.wordpress.org/core/version-check/1.7/ http://api.wordpress.org/core/version-check/1.7/ https://api.wordpress.org/plugins/update-check/1.1/ http://api.wordpress.org/plugins/update-check/1.1/ https://api.wordpress.org/themes/update-check/1.1/ http://api.wordpress.org/themes/update-check/1.1/ curl works fine on scm-site command line. example works ok. curl -x post http://api.wordpress.org/core/version-check/1.7/ edit if ssh container , run php code, works fine. <?php $url = 'http://api.wordpress.org/core/version-check/1.7/'; $fields = array( 'version' => urlencode('4.8.1'), 'php' => urlencode(...
Read more