dop251
Using react material UI (or other UI libraries) with goja
Hey, this is pretty cool package!
Ive been playing with this, and its very nice, great for a Go developer to build an app with a react front end. However I have been struggling to get Material UI react to work with it, and infact I tried also Semantic UI but that failed within similar errors. I decided to concentrate on Material.
Reading a couple of issues here, this seems to be the place the error is occuring - the error is:
init JSVM static/build/bundle.js
panic: TypeError: Object has no member 'createContext' at bundle.js:43829:49(35)
goroutine 53 [running]:
main.newJSVM.func1(0xc000080c00)
/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/react.go:207 +0x4aa
github.com/dop251/goja_nodejs/eventloop.(*EventLoop).RunOnLoop.func1()
/Users/alex/go/pkg/mod/github.com/dop251/[email protected]/eventloop/eventloop.go:111 +0x31
github.com/dop251/goja_nodejs/eventloop.(*EventLoop).runInBackground(0xc000447160)
/Users/alex/go/pkg/mod/github.com/dop251/[email protected]/eventloop/eventloop.go:129 +0x6c
created by github.com/dop251/goja_nodejs/eventloop.(*EventLoop).Start
/Users/alex/go/pkg/mod/github.com/dop251/[email protected]/eventloop/eventloop.go:88 +0x3f
I have attempted to use yarn to update the package.json (as I read in another issue that might be the problem, I am now using the package.json
{
"name": "go-starter-kit",
"version": "0.1.0",
"description": "",
"scripts": {
"eslint": "eslint *.js client",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "olebedev",
"license": "MIT",
"dependencies": {
"@material-ui/core": "^4.10.2",
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.2",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-plugin-react": "^6.10.3",
"expose-loader": "^0.7.1",
"express": "^4.15.2",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.11.1",
"json-loader": "^0.5.7",
"normalize.css": "^6.0.0",
"postcss-functions": "^2.1.0",
"postcss-loader": "^1.3.3",
"precss": "^1.4.0",
"proxy-middleware": "^0.15.0",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-email-editor": "^1.1.1",
"react-helmet": "^5.0.3",
"react-lite-ui": "^1.0.3",
"react-redux": "^4.4.8",
"react-router": "^3.0.5",
"react-router-dom": "^5.2.0",
"redux": "^3.6.0",
"redux-logger": "^3.0.1",
"redux-saga": "^0.16.0",
"style-loader": "^0.16.1",
"svgo-loader": "^1.2.1",
"url-loader": "^0.5.8",
"webpack": "^1.12.13",
"webpack-dev-middleware": "^1.10.1",
"webpack-hot-middleware": "^2.18.0",
"whatwg-fetch": "^2.0.3",
"when": "^3.7.8"
},
"babel": {
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-runtime"
],
"env": {
"dev": {
"presets": [
"react-hmre"
]
}
}
},
"eslintConfig": {
"rules": {
"indent": [
2,
2
],
"quotes": [
2,
"single"
],
"linebreak-style": [
2,
"unix"
],
"semi": [
2,
"always"
],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"sourceType": "module"
},
"plugins": [
"react"
]
},
"main": "index.js",
"repository": "[email protected]:olebedev/go-react-starter-kit.git"
}
I also got rid of the vendor approach to pinning and have been using Go Modules. My Go Modules looks like
go 1.13
require (
github.com/dgrijalva/jwt-go v3.2.0+incompatible
github.com/dlclark/regexp2 v1.2.0 // indirect
github.com/dop251/goja v0.0.0-20200526165454-f1752421c432
github.com/dop251/goja_nodejs v0.0.0-20200128125109-2d688c7e0ac4
github.com/elazarl/go-bindata-assetfs v1.0.0
github.com/elazarl/goproxy v0.0.0-20200426045556-49ad98f6dac1 // indirect
github.com/elazarl/goproxy/ext v0.0.0-20200426045556-49ad98f6dac1 // indirect
github.com/fatih/structs v1.1.0
github.com/gin-gonic/gin v1.6.3
github.com/go-sourcemap/sourcemap v2.1.3+incompatible // indirect
github.com/itsjamie/go-bindata-templates v0.0.0-20170313182150-78f87e838df0
github.com/jinzhu/gorm v1.9.13
github.com/joho/godotenv v1.3.0
github.com/nu7hatch/gouuid v0.0.0-20131221200532-179d4d0c4d8d
github.com/olebedev/gojax v0.0.0-20170318114811-bb153be84336
github.com/spf13/viper v1.7.0
github.com/urfave/cli v1.22.4
golang.org/x/oauth2 v0.0.0-20200107190931-bf48bf16ab8d
google.golang.org/api v0.26.0
gopkg.in/elazarl/goproxy.v1 v1.0.0-20180725130230-947c36da3153 // indirect
)
Would love some help getting Material working with this, thanks @dop251 !
Hey @amlwwalker, it looks like there is a problem with the bundle itself. Can you confirm that was built and all the main function available?
I beleive, you can verify it Node.js:
const bundle = require('./path/to/the/bundle');
bundle.main({ url: '/', headers: {}, uuid: '1' }, (...args) => {
console.log(args);
})
Hey, thanks for responding
I think i've done as expected:
~/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit amlwwalker/upgrade-engine ●✚ node
Welcome to Node.js v13.9.0.
Type ".help" for more information.
> const bundle = require('/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/data/static/build/bundle.js');
Uncaught TypeError: _react.default.createContext is not a function
at Object.<anonymous> (/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/data/static/build/bundle.js:43829:36)
at Object.<anonymous> (/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/data/static/build/bundle.js:43837:31)
at __webpack_require__ (/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/data/static/build/bundle.js:20:30)
at Object.<anonymous> (/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/data/static/build/bundle.js:43800:45)
at Object.<anonymous> (/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/data/static/build/bundle.js:43812:31)
at __webpack_require__ (/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/data/static/build/bundle.js:20:30)
at Object.<anonymous> (/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/data/static/build/bundle.js:43783:41)
at __webpack_require__ (/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/data/static/build/bundle.js:20:30)
at Object.<anonymous> (/Users/alex/go/src/github.com/amlwwalker/email-gmail/gin-react-starter-kit/server/data/static/build/bundle.js:43390:41)
> bundle.main({ url: '/', headers: {}, uuid: '1' }, (...args) => {
... console.log(args);
... })
I tried to move the original project over to go modules so that I could "update it" to more modern Go, however having issues with a strange import that I can't work out but however my repo I am using is here
Interestingly however, the project seems to be yours where I am having an error and I think its because your project github.com/olebedev/on uses a repo that doesn't exist anymore??
~/go/src/amlwwalker/gin-react-starter-kit master make install
yarn install v1.22.0
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.47s.
go: finding gopkg.in/fsnotify.v1 v1.4.9
go: github.com/olebedev/on imports
github.com/codegangsta/cli: github.com/codegangsta/[email protected]: parsing go.mod:
module declares its path as: github.com/urfave/cli
but was required as: github.com/codegangsta/cli
make: *** [install] Error 1
Its got me slightly stumped!
Interestingly however, the project seems to be yours
Yeap, and the https://github.com/ntquan1704/gin-react-starter-kit is a fork of my project as well. That's why I answer here.
oh cool! Have you got any ideas what I might be doing wrong? I am more used to Gin that Echo (if that's the one you are referring to). However does yours work with Material without this error? All support appreciated!
P.S have you managed to get material UI working with yours? If it did, I could try and port it bit by bit to Gin, or just learn to use Echo...
@olebedev I managed to have another look at this.
I cloned the project you mentioned and added import Button from '@material-ui/core/Button'; to the router/index.js
then i changed the render() function to
render(
<Button variant="contained" color="primary">
Hello World
</Button>,
document.getElementById('app')
);
and I get:
webpack built a54c988079af730a3efb in 6406ms
webpack building...
webpack built 18e9f9945c00883feec8 in 687ms
init JSVM static/build/bundle.js
panic: TypeError: Object has no member 'createContext' at bundle.js:45087:49(35)
goroutine 11 [running]:
main.newJSVM.func1(0xc000516180)
/Users/alex/go/src/github.com/amlwwalker/email-gmail/new-gin-react-material-test/server/react.go:207 +0x4aa
github.com/amlwwalker/email-gmail/new-gin-react-material-test/vendor/github.com/dop251/goja_nodejs/eventloop.(*EventLoop).RunOnLoop.func1()
/Users/alex/go/src/github.com/amlwwalker/email-gmail/new-gin-react-material-test/vendor/github.com/dop251/goja_nodejs/eventloop/eventloop.go:109 +0x31
github.com/amlwwalker/email-gmail/new-gin-react-material-test/vendor/github.com/dop251/goja_nodejs/eventloop.(*EventLoop).run(0xc0010364c0, 0xc001036a01)
/Users/alex/go/src/github.com/amlwwalker/email-gmail/new-gin-react-material-test/vendor/github.com/dop251/goja_nodejs/eventloop/eventloop.go:116 +0x70
created by github.com/amlwwalker/email-gmail/new-gin-react-material-test/vendor/github.com/dop251/goja_nodejs/eventloop.(*EventLoop).Start
/Users/alex/go/src/github.com/amlwwalker/email-gmail/new-gin-react-material-test/vendor/github.com/dop251/goja_nodejs/eventloop/eventloop.go:87 +0x44
Error: socket hang up
at connResetException (internal/errors.js:609:14)
at Socket.socketOnEnd (_http_client.js:463:23)
at Socket.emit (events.js:333:22)
at endReadableNT (_stream_readable.js:1201:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
Looking at line 45087 in bundle.js I see var ThemeContext = _react.default.createContext(null);
Have you any suggestions as to why this might be happening?
I ran yarn upgrade-interactive to update all the packages in the package.json to see if new packages would solve it but same error.