0

I have a reactjs npm package, and I want to include it in html file, I got the bundeled files here but I'm facing an issue that require isn't a function, because i'm not in a nodejs project. So i can't import other dependencies, Can anyone help me further? 

console.log(window.React, 'AAB');

window.ReactDOM.render(window.React.createElement(window.ListItem, {
  labelOption: 'name',
  typeOption: 'type',
  valueOption: 'k',
  onRemoveItem: (e) => {console.log('1')},
  item: {name: 'Zeyad', type: 'person'}
}, 'Hi'), document.getElementById("app"));
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="https://unpkg.com/react-multiple-selector@1.0.7/dist/styles.css">
  </head>

  <body>
    Name:
    <div id="app"></div>

    <script>
var exports = {};
    </script>
    <script
      crossorigin
src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    ></script>
    <script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/index.js"></script>
    <script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/ListItem.js"></script>
    <script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/data.js"></script>
  <script src="https://gist.githubusercontent.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js"></script>
  </body>
</html>
Zeyad Etman
  • 2,250
  • 5
  • 25
  • 42

3 Answers3

0

If you want to create a simple reactjs application, you can use umd and an example is available from the react website itself - here

However, not all modules that are built for reactjs support UMD, and you will have to use react in a bundled fashion. Read the official documentation and more. react-multiple-selector looks like it does not support UMD yet.

The inspector console shows that the error is from https://unpkg.com/react-multiple-selector@1.0.7/dist/index.js and https://unpkg.com/react-multiple-selector@1.0.7/dist/ListItem.js

While searching for an option for require in a browser, I came across this SO. However, know that you are trying to hack your way into doing this, and is only a hack not a solution.

aksappy
  • 3,400
  • 3
  • 23
  • 49
0

in its current form, the package is still an npm package: you need to install it locally along with its peer-dependencies, and then build it using a build tool like webpack or parcel or (parcel is by far the easiest)

to build it using parcel, do the following create a folder, go inside of it and open a terminal, and run the following commands

npm init -y
npm install -g parcel-bundler
npm install react-multiple-selector react react-dom react-scripts react-select lodash.debounce

create an index.js file under src/index.js, and put the following code inside of it

import React from 'react';
import ReactDOM from 'react-dom';
import ListItem from 'react-multiple-selector/dist/ListItem';

ReactDOM.render(React.createElement(ListItem, {
  labelOption: 'name',
  typeOption: 'type',
  valueOption: 'k',
  onRemoveItem: (e) => {console.log('1')},
  item: {name: 'Zeyad', type: 'person'}
}, 'Hi'), document.getElementById("app"));

put your index.html under src/assets/, and include the index.js using a relative path. it should look like the following

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="https://unpkg.com/react-multiple-selector@1.0.7/dist/styles.css">
  </head>

  <body>
    Name:
    <div id="app"></div>
    <script src="../index.js"></script>
  </body>
</html>

from the root of your folder, run parcel -p 1234 watch src/assets/index.html your page should be available at localhost:1234

0

Have you considered creating a React project to utilize the npm package instead of keeping everything in a single html file?

https://reactjs.org/docs/getting-started.html

omgitsgod
  • 36
  • 4