Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Be able to `unpkg import` preact/compat + react-redux?

See original GitHub issue

The official guide recommends react-redux: https://preactjs.com/guide/v10/upgrade-guide/#preact-redux

it also recommends import + unpkg: https://preactjs.com/guide/v10/getting-started (under https://preactjs.com/guide/v10/getting-started)

<!doctype html>
<html>
  <head>
    <style type="text/css">
      .cell {
        width: 35px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "preact": "https://unpkg.com/preact@10.6.6/dist/preact.module.js",
          "preact/hooks": "https://unpkg.com/preact@10.6.6/hooks/dist/hooks.module.js",
          "preact/compat": "https://unpkg.com/preact@10.6.6/compat/dist/compat.module.js",
          "htm": "https://unpkg.com/htm?module",
          "prop-types": "https://unpkg.com/prop-types@15.8.1/index.js",
          "react": "https://unpkg.com/preact@10.6.6/compat/dist/compat.module.js",
          "react-dom": "https://unpkg.com/preact@10.6.6/compat/dist/compat.module.js",
          "react-redux": "https://unpkg.com/react-redux@7.2.6/es/index.js"
        }
      }
    </script>
    <script type="module">
      import * as Preact from 'preact'
      import htm from 'htm'
      import * as React from 'react'
      import * as ReactDOM from 'react-dom'
      import * as ReactRedux from 'react-redux'

      const html = htm.bind(Preact.createElement)
     ...
    </script>
  </body>
</html>

I can’t get it to work whatsoever. All sorts of import errors.

Issue Analytics

State:
Created 2 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

brandonroscommented, Mar 2, 2022

<!doctype html>
<html>
  <head>
    <style type="text/css">
      .cell {
        width: 35px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "preact": "https://unpkg.com/preact@10.6.6/dist/preact.module.js",
          "preact/hooks": "https://unpkg.com/preact@10.6.6/hooks/dist/hooks.module.js",
          "preact/compat": "https://unpkg.com/preact@10.6.6/compat/dist/compat.module.js",
          "htm": "https://unpkg.com/htm@3.1.0/dist/htm.module.js",
          "react": "https://unpkg.com/preact@10.6.6/compat/dist/compat.module.js",
          "react-dom": "https://unpkg.com/preact@10.6.6/compat/dist/compat.module.js",
          "react-redux": "https://cdn.skypack.dev/react-redux"
        }
      }
    </script>
    <script type="module">
      import * as React from 'react'
      import * as ReactDOM from 'react-dom'
      import * as ReactRedux from 'react-redux'
      import htm from 'htm'

      console.log({
        React,
        ReactDOM,
        ReactRedux
      })

      const html = htm.bind(React.createElement)

      class Cell extends React.Component {
        constructor(props) {
          super(props)
        }

        render() {
          return html`
            <input
              type="text"
              class="cell"
              value="${this.props.value}"
              data-columnIndex=${this.props.columnIndex}
              data-cellIndex=${this.props.cellIndex}
              onchange=${(event) => this.props.setCellValue(event, this.props.columnIndex, this.props.cellIndex)}
            />
          `
        }
      }

      class Column extends React.Component {
        constructor(props) {
          super(props)
        }

        render() {
          return html`
            <div class="column">
              ${this.props.cells.map((cell, index) => html`<${Cell}
                                                                key=${index}
                                                                columnIndex=${this.props.columnIndex}
                                                                cellIndex=${index}
                                                                value=${cell}
                                                                setCellValue=${this.props.setCellValue}
                                                              />`)}
            </div>
          `
        }
      }

      class Table extends React.Component {
        constructor(props) {
          super(props)
        }

        render() {
          return html`
            <div class="table">
              ${this.props.table.map((column, index) => html`<${Column}
                                                                key=${index}
                                                                columnIndex=${index}
                                                                cells=${column}
                                                                setCellValue=${this.props.setCellValue}
                                                              />`)}
            </div>
          `
        }
      }

      class App extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            table: [
              [0, 1],
              [0, 1]
            ]
          }
        }

        setCellValue(event, columnIndex, cellIndex) {
          const newTable = JSON.parse(JSON.stringify(this.state.table))
          newTable[columnIndex][cellIndex] = parseFloat(event.target.value, 10)
          console.log(newTable)
          this.setState({
            table: newTable
          })
        }

        render() {
          return html`
            <${Table} table=${this.state.table} setCellValue=${this.setCellValue.bind(this)}/>
          `
        }
      }

      window.addEventListener('load', () => {
        React.render(html`<${App}/>`, document.body)
      })
    </script>
  </body>
</html>

Worked flawlessly, thanks.

0reactions

rschristiancommented, Mar 2, 2022

Not sure what is calling prop-types but if unpkg can’t esmodule-ize it… I guess this is dead in the water?

As far as I know / can tell, unpkg does not make ES modules out of packages that do not supply that format. You might want to look into a CDN like skypack instead: https://skypack.dev

Top Results From Across the Web

redux/README.md - UNPKG

21, We have a variety of resources available to help you learn Redux, ... 34, - Valentino Gagliardi's post [React Redux Tutorial for...

preact - UNPKG

preact/compat /src/index.d.ts ; 9, export as namespace React; ; 10, declare namespace React { ; 11, // Export JSX ; 12, export import...

types/react-redux/index.d.ts - UNPKG

The CDN for @types/react-redux. ... 1, // Type definitions for react-redux 7.1 ... 40, import hoistNonReactStatics = require('hoist-non-react-statics');.

react-redux/package.json - UNPKG

The CDN for react-redux. ... 14, "bugs": "https://github.com/reduxjs/react-redux/issues",. 15, "main": "./lib/index.js",. 16, "unpkg": "dist/react-redux.js" ...

react-dynamic-import/README.md - UNPKG

The CDN for react-dynamic-import. ... 161, * This loads specific module from many available. 162, * modules in the directory, using given module...