Issue when importing glamorous components which are individually exported

[andrewdelprete]

Hey there, I'm having an issue with the plugin when trying to import and destructure glamorous components. Here is some pseudo code I think will reproduce the issue.

MyComponent.js

import { Logo }  from './styles'
import glamorous from 'glamorous'

export default const MyComponent = () => (
    <div>
         <Logo />
    </div>
)

styles.js

import glamorous from 'glamorous'

export const Logo = glamorous.div({
    color: 'red'
})

.babelrc

{
    "presets": [
      'react', ["env", { "targets": { "browsers": ["last 2 versions"] }, "useBuiltIns": true }]
    ],
    "plugins": [
      "transform-class-properties",
      ["transform-object-rest-spread", { "useBuiltIns": true }],
      ["glamorous-displayname"]
    ]
}

Error I've got a few different errors as I've messed with it.

Module build failed: Error: /Users/andrewdelprete/project/styles.js: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

Module build failed: TypeError: /Users/andrewdelprete/project/MyComponent.js: Property value expected type of string but got null

Perhaps it's something small, any help would be greatly appreciated.

[kentcdodds]

Cool, could you run babel-cli on the styles.js file and give us the output?

[andrewdelprete]

➜  project npm start

> babel-plugin-glamorous-displayname-issue-3@0.0.1 start /Users/andrewdelprete/project
> babel styles.js

Error: styles.js: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
    at NodePath.insertAfter (/Users/andrewdelprete/project/node_modules/babel-traverse/lib/path/modification.js:175:13)
    at /Users/andrewdelprete/project/node_modules/babel-plugin-glamorous-displayname/dist/index.js:65:35
    at Array.forEach (native)
    at PluginPass.exit (/Users/andrewdelprete/project/node_modules/babel-plugin-glamorous-displayname/dist/index.js:57:44)
    at newFn (/Users/andrewdelprete/project/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/andrewdelprete/project/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/andrewdelprete/project/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/andrewdelprete/project/node_modules/babel-traverse/lib/path/context.js:117:8)
    at TraversalContext.visitQueue (/Users/andrewdelprete/project/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/andrewdelprete/project/node_modules/babel-traverse/lib/context.js:108:19)

npm ERR! Darwin 16.6.0
npm ERR! argv "/Users/andrewdelprete/.nvm/versions/node/v7.7.1/bin/node" "/Users/andrewdelprete/.nvm/versions/node/v7.7.1/bin/npm" "start"
npm ERR! node v7.7.1
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! babel-plugin-glamorous-displayname-issue-3@0.0.1 start: `babel styles.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the babel-plugin-glamorous-displayname-issue-3@0.0.1 start script 'babel styles.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the babel-plugin-glamorous-displayname-issue-3 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     babel styles.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs babel-plugin-glamorous-displayname-issue-3
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls babel-plugin-glamorous-displayname-issue-3
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/andrewdelprete/project/npm-debug.log

[andrewdelprete]

If remove the export keyword and just do:

const Logo = glamorous.div({
    color: 'red'
})

I get

import glamorous from 'glamorous';

const Logo = glamorous.div({
    color: 'red'
});
Logo.displayName = 'Logo';

So it just looks like it doesn't like the export keyword at all.

[kentcdodds]

Yep, that seems to be the problem. Wanna muck around with the plugin here to see how we can fix it? :smile: It'd be a lot of fun even if you're new at this :)

[andrewdelprete]

Maybe now is a good time to take your Egghead AST course 😂

[kentcdodds]

Sadly, I'm still working on that, and the Frontend Masters version isn't coming out until next month :-(

But there's this and this :smile:

[kentcdodds]

New version released as 1.1.1 :)

[kentcdodds]

Whoops, that release was busted. Released 1.1.2 😅