massive-oss / haxe-react

React JS applications development using the Haxe language

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unexpected use of 'self' no-restricted-globals

Jarrio opened this issue · comments

There appears to be no direct instructions on the build process so I assume it's meant to follow the regular build process similar to haxe react-native does. I believe this issue may be down to basic project setup but would like to mention it here to help anyone else looking to use the library.

As I couldn't get the sample project to compile, I attempted to get a project going with npm init react-app my-app but I kept on getting the error ./src/index.js Line 45: Unexpected use of 'self' no-restricted-globals with the haxe code output, manually fixing this error by changing the export code to window.self just reveals tons of other issues.

I tried modifying the sample project removing the references to msignals and only using ReactComponent rather than ReactComponentOfStateAndRefs and just export the Main file to get the project to at least compile. There also wasn't a package.json file bundled with the sample project so I used the standard one:

{
  "name": "bin",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {},
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

which also outputs this no-restricted-globals error message. Now I could be totally wrong in my approach here but I believe the regular way to start up a react instance is by running npm start so any help or an updated sample project (maybe just a plain empty one instead to avoid dependencies getting deprecated) would be appreciated.

Edit: Running browserify as mentioned in the readme, did not fix this issue

What is the Haxe build command (and Haxe compiler version) to produce the JS?

Haxe Compiler 4.0.0-preview.5+7eb789f

build.hxml

-js bin/src/App.js
-cp src
-main Main
-lib react
# -lib msignal
-D react_global
-D react_no_inline
-debug
-dce full

Ok got it: it looks like CRA has eslint enabled by default but Haxe generated output shouldn't be linted as generated code doesn't care about linters :D

You can try using --macro includeFile('no-linting.js') to inject a comment disabling linting, e.g.:

/* eslint-disable */

Or you can get your JS processed through Haxe Modular or Haxe Webpack Loader which will both inject the linting disable comment (note: both aren't compatible with preview5 - I've heard it works with preview4 though).

Yes, this fixed the issue! I went with the first approach as it was the most convenient. Much appreciated!

You may also want to look at a my Webpack Haxe example which has an ad-hoc configuration you can learn of instead of CRA's hidden monster ;) https://github.com/elsassph/webpack-haxe-example (note the React version is in a branch: https://github.com/elsassph/webpack-haxe-example/tree/react)