search

dai-shi / react-compose-state

A helper function to attach state to stateless function components
MIT License
16 stars 1 forks source link

Unable to compose with MUI withStyles #4

Closed JESii closed 5 years ago

JESii commented 5 years ago

I have a functional component that already uses MUI's withStyles HOC and I wanted to add complseWithState. However, I'm getting parse errors, regardless of which one I compose first. E.e.g, either of these approaches:

const initialState = { count: 1 };
export default withStyles(BasicStyles)(composeWithState(initialState)(SubmitDisplayOverview));
export default composeWithState(initialState)(withStyles(BasicStyles)(SubmitDisplayOverview));

[BasicStyles is imported from a utility function and is used successfully in several components]

Either case generates the following error:

./node_modules/react-compose-state/src/index.js
Module parse failed: /Users/yc98js1/workspace/execution-engine-ui-etap/node_modules/react-compose-state/src/index.js Unexpected token (45:8)
You may need an appropriate loader to handle this file type.
|     render() {
|       return (
|         <BaseComponent
|           {...(this.props)}
|           {...this.state}

Suggestions? I'm using React V16.2.0.

dai-shi commented 5 years ago

Hm, I probably know what's happening. This could be handled by a configuration of bundler (like webpack.config.js), but it'd be better to fix this in this library code. Give me a few minutes.

dai-shi commented 5 years ago

@JESii Newly published v1.6.0. Could you give it a try with this?

JESii commented 5 years ago

Will try later today; I had to move on (deadlines) so may take a bit for me to get back to where I was

Thanks for the quick response!!!

On Jan 5, 2019, at 6:14 PM, Daishi Kato notifications@github.com wrote:

@JESii https://github.com/JESii Newly published v1.6.0. Could you give it a try with this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dai-shi/react-compose-state/issues/4#issuecomment-451709056, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAB5kAgd6aEFeQyij83kdFi68aixwwJks5vAVwVgaJpZM4ZyNYz.

dai-shi commented 5 years ago

If it doesn't work, I would like to ask your bundler configuration. CRA? webpack? or something else?

JESii commented 5 years ago

Same issue; today's the end of our iteration so I'll have to get back with details later this week after things settle down:

webpack; not CRA

dai-shi commented 5 years ago

Do you mind if I ask you to share the webpack config?

(I'm pretty sure if you remove the "module" field in node_modules/react-compose-state/package.json, but that's not a real solution.)

JESii commented 5 years ago

Try this; this is a corporate app which a custom setup for in-house applications.

razzle.config.js.zip

dai-shi commented 5 years ago

This is my first time to try razzle.

I ran npx create-razzle-app my-razzle-app, added react-compse-state and it worked just fine. I then added your razzle.config.js, with a modification of babel-loader position 1->2, which also worked well.

Only when I downgraded react-compose-state to v1.5.0, the same error was reproduced.

So, would you please double-check whether its version is updated? npm ls | grep react-compose-state

Alternatively, if we can configure the config like the following, it should work with react-compose-state v1.5.0.

    appConfig.resolve.mainFields = ['browser', 'main', 'module'];

This may cause other issues, so I wouldn't recommend it. But, it may help to check whether my assumption is correct or not.

JESii commented 5 years ago

I do have the latest; still showing the problem. Tried this time without MUI styles, just a simple:

const initialState = { showCategory: false, showCategoryName: '' };

export default composeWithState(initialState)(ErrorCategories);

Version:

 npm ls | grep react-compose-state
├── react-compose-state@1.6.0

Here are the packages I have installed:

  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@component/common": "^1.107.0",
    "@core/lib-react": "^0.8.0",
    "@material-ui/core": "^1.5.1",
    "@material-ui/icons": "^1.1.1",
    "autoprefixer": "^8.2.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "body-parser": "^1.18.3",
    "cookie-parser": "^1.4.3",
    "cors": "^2.8.4",
    "dateformat": "^3.0.3",
    "eslint": "^5.3.0",
    "express": "^4.16.2",
    "isomorphic-fetch": "^2.2.1",
    "prop-types": "^15.6.1",
    "razzle-heroku": "^2.1.0",
    "react": "^16.2.0",
    "react-compose-state": "^1.6.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "render-if": "^0.1.1",
    "superagent": "^3.8.3",
    "universal-cookie": "^2.2.0",
    "universal-cookie-express": "^2.2.0",
    "webpack": "^3.12.0"
  },
  "devDependencies": {
    "babel-jest": "^22.4.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint-plugin-react": "^7.10.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "jest-css-modules": "^1.1.0",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.1.5",
    "redux-devtools-extension": "^2.13.5",
    "redux-logger": "^3.0.6",
    "redux-mock-store": "^1.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.21.0",
    "webpack-pwa-manifest": "^3.6.2"
dai-shi commented 5 years ago

Oh no... So, your app is not created with razzle cli. Anyway, since I want this package to work with old environments, let me publish a new one with a tiny fix.

Please try with v1.6.1. Thanks for your patience.

dai-shi commented 5 years ago

Assuming the issue is resolved, let me close it. Feel free to reopen if the problem persists.

JESii commented 5 years ago

Sounds good; thanks. Sorry I wasn’t able to thoroughly two this out for you.

Jon Seidel, CMC® EDP Consulting, Inc. / www.edpci.com http://www.edpci.com/ / www.4mypasswords.com http://www.4mypasswords.com/ http://www.4mypasswords.com/Effective Decisions... Priceless! LinkedIn Profile http://www.linkedin.com/in/jonseidel Technology that means Business - Since 1979 mobile: 510-599-6130

Results that Make the Difference! The Certified Management Consultant (CMC) mark is awarded to consultants who meet the strict standards defined by the Institute of Management Consultants USA (an ISO/IEC 17024:2003 Certifying Body), including examination by their peers, client evaluations, and a written examination evidencing their understanding of the IMC USA's Code of Ethics. The CMC is the only consulting certification that has been ISO-accredited and recognized by the insurance industry as reducing risk. Check out IMC USA http://www.imcusa.org/?page=WHYHIREACMC for more information.

On Mar 17, 2019, at 3:04 PM, Daishi Kato notifications@github.com wrote:

Assuming the issue is resolved, let me close it. Feel free to reopen if the problem persists.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dai-shi/react-compose-state/issues/4#issuecomment-473719651, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAB5gB943YfbK_joDaAnacwoW44NB3sks5vXrvogaJpZM4ZyNYz.