search

Decisiv / styled-components-modifiers

A library to enable BEM flavored modifiers (and responsive modifiers) in styled components.
MIT License
297 stars 11 forks source link

1.2.0 throws SyntaxError: Unexpected identifier #28

Closed joeldavidmercer closed 5 years ago

joeldavidmercer commented 5 years ago

Updating to 1.2.0 is throwing this error in console: 

SyntaxError: Unexpected identifier
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.styled-components-modifiers (/Users/joelmercer/Desktop/frontend/.next/server/static/development/pages/_app.js:4584:18)
    at __webpack_require__ (/Users/joelmercer/Desktop/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../styles/elements/Avatars.js (/Users/joelmercer/Desktop/frontend/.next/server/static/development/pages/_app.js:3690:85)
    at __webpack_require__ (/Users/joelmercer/Desktop/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../styles/elements/index.js (/Users/joelmercer/Desktop/frontend/.next/server/static/development/pages/_app.js:3981:66)
    at __webpack_require__ (/Users/joelmercer/Desktop/frontend/.next/server/static/development/pages/_app.js:23:31)
/Users/joelmercer/Desktop/frontend/node_modules/styled-components-modifiers/lib/index.js:1
(function (exports, require, module, __filename, __dirname) { import applyResponsiveStyleModifiers from './applyResponsiveStyleModifiers';

Implementation: 

import { applyStyleModifiers } from 'styled-components-modifiers';

const BUTTON_MODIFIERS = {...}
export const Button = styled.button`
 {...}
  ${applyStyleModifiers(BUTTON_MODIFIERS)}
`;

Has the correct way to implement this changed in this release?

andrewtpoe commented 5 years ago

Can you provide any more details around the project you are working on? This should work.

joeldavidmercer commented 5 years ago

So I rolled back to 1.1.1 and everything is working correctly again, the example I showed was from a barebones setup just to make sure it wasn't something in my core project.

The only conflict I can think of could be caused by something in next I have included the versions of the stuff I think could be the root of it. Please by all means give me some guidance if there is something specific you would like to know..

This is working as expected:

    "apollo-boost": "^0.4.0",
    "apollo-client": "^2.6.0",
    "next": "^8.1.0",
    "next-with-apollo": "^3.4.0",
    "react": "^16.8.6",
    "react-apollo": "^2.5.6",
    "styled-components": "^4.2.0",
    "styled-components-modifiers": "^1.1.1",

This is not working:

    "apollo-boost": "^0.4.0",
    "apollo-client": "^2.6.0",
    "next": "^8.1.0",
    "next-with-apollo": "^3.4.0",
    "react": "^16.8.6",
    "react-apollo": "^2.5.6",
    "styled-components": "^4.2.0",
    "styled-components-modifiers": "^1.2.0",
tinynumbers commented 5 years ago

@joeldavidmercer we've pushed a possible fix for this. Can you update to v1.2.1 and see if this remedies the issue you reported?