Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Code Sandbox feature doesn't work with component that using babel-plugin

See original GitHub issue

Bug Report

I’ve tried to use code sandbox feature with component that has been built by emotion with babel-plugin-emotion to enable the way for styling by something like…

const StyledButton = styled.button`...`

and code sandbox doesn’t include the babel-plugin into it, so it raising the error download

To Reproduce

install emotion, react-emotion, babel-plugin-emotion
put { "plugins": ["emotion"] } in .babelrc
styling component by

import styled from 'react-emotion'

export default styled.button`background: blue`

Create mdx file for that component
From docz UI click code sandbox button
see the error

Expected behavior Any component that has been built with babel-plugin be able to show in code sandbox

Environment

OS: OSX 10.14.0
Node version 8.11.4
yarn version 1.9.4

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:9 (3 by maintainers)

Top GitHub Comments

1reaction

CompuIvescommented, Nov 29, 2018

Hey! I can help with this 😄.

CodeSandbox supports .babelrc, but it’s disabled for the CRA projects since they don’t enable it. We could maybe export it as a vanilla template, which does support .babelrc.

0reactions

hamcompecommented, Nov 29, 2018

@nicholasess Sure! Seems like it’s something to deal with the codesandbox first.

Top Results From Across the Web

Code Sandbox feature doesn't work with component ... - GitHub

I've tried to use code sandbox feature with component that has been built by emotion with babel-plugin-emotion to enable the way for styling...

babel plugin template - CodeSandbox

CodeSandbox is an online editor tailored for web applications.

babel configurations for code sandbox for react app

so I took a working babel code sandbox which had the below configurations. { "presets": [ "@babel/preset-env" ], "plugins": [ [ "@babel/plugin- ...

The css Prop - Emotion

This option works best for testing out the css prop feature or in projects where the babel configuration is not configurable (create-react-app, codesandbox, ......

React Universal Component 2.0 & babel-plugin-universal-import

To the SPA crowd being able to use a variable within a dynamic import ... to say fantastic work on all of your...