Yomguithereal / react-blessed

A react renderer for blessed.
MIT License
4.45k stars 177 forks source link

Attempted import error: 'render' is not exported from 'react-blessed'. #87

Closed ghost closed 4 years ago

ghost commented 5 years ago

I'm attempting the readme basic application with the latest create-react-app and I get this error. Any tips to get this working?

Yomguithereal commented 5 years ago

Hello @monkeysuffrage. I will need more information to be able to help you.

kenkit commented 4 years ago

Same here, can't belive this is not solved. @monkeysuffrage we use create-react-app then use the instractions in readme to install. The error is

Attempted import error: 'render' is not exported from 'react-blessed'.
Yomguithereal commented 4 years ago

This is not an issue of the library. create-react-app is meant to spawn a web application in a browser, not a shell environment. As such it does not work when running npm start and running its dev server to spawn the web page. You don't need create-react-app to make this library work. Maybe the create-react-app team would be interested in creating a react-blessed template but I doubt it.

kenkit commented 4 years ago

well it seems I was the one who misunderstood, I thought it was a web-based terminal window.

a-y-u-s-h commented 4 years ago

I'm getting this error with barebones webpack app. This is what my webpack.config.js looks like:

const path = require("path")

module.exports = environment => ({
  entry: "./src",
  mode: environment.mode,
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
})
a-y-u-s-h commented 4 years ago

Actually, solved the issue. This is how I'm running the app now, with command yarn development:

package.json:

{
  "name": "placeholder",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "development": "webpack --watch --env.mode development",
    "production": "webpack --env.mode production"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "blessed": "^0.1.81",
    "blessed-contrib": "^4.8.19",
    "cheerio": "^1.0.0-rc.3",
    "react": "^16.13.1",
    "react-blessed": "^0.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "nodemon": "^2.0.2",
    "nodemon-webpack-plugin": "^4.3.1",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-node-externals": "^1.7.2"
  },
  "babel": {
    "presets": [
      "@babel/preset-react",
      [
        "@babel/preset-env",
        {
          "targets": {
            "node": true
          }
        }
      ]
    ]
  }
}

webpack.config.js:

const webpack = require("webpack")
const path = require("path")
const fs = require("fs")

/*
  ======================================
    This file is necessary for build
    steps or debugging, so if you're
    a beginner in programming and don't
    know what this file does, just
    don't delete it.
  ======================================
*/

module.exports = environment => ({
  mode: environment.mode,
  target: "node",
  entry: "./src",
  output: {
    path: path.join(__dirname, "build"),
    filename: "[name].bundle.js"
  },
  externals: [require("webpack-node-externals")()],
  plugins: [new (require("nodemon-webpack-plugin"))()],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
})
Yomguithereal commented 4 years ago

So is there any problem there? I am a bit confused. Why are you using webpack on the server-side though?

a-y-u-s-h commented 4 years ago

Nope, no problem now with the build. Except I'm having some troubles trying to access main screen across the components, but I should open a new issue requesting for a detailed document on event handling and access to main screen and detailing the need for it.

I'm kind of a beginner when it comes to Webpack but I think it can also be used on server-side as well (with some plugins like webpack-dev-server) and since it's essentially just a bundler that provides support of various module patterns by default, I thought why not use it for CLIs and TUIs.

Yomguithereal commented 4 years ago

Except I'm having some troubles trying to access main screen across the components, but I should open a new issue requesting for a detailed document on event handling and access to main screen and detailing the need for it.

You should be able to get access to it through a ref. But I suggest you pass it through context else.