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.

Styling custom component containing react-fontawesome import causes error

See original GitHub issue

Environment

linaria 1.3.1
webpack 4.30.0

Description

Using the method from the docs to style custom components (https://github.com/callstack/linaria/blob/master/docs/BASICS.md#styling-custom-components) on a component that imports from react-fontawesome produces an error:

Module build failed (from ./node_modules/linaria/loader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: setTimeout is not defined

Reproducible Demo

https://github.com/zarrellab/linaria-bug-example

example code:

component.jsx

import React from 'react'
import { styled } from 'linaria/react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome

export default ({ className, style }) => (
  <span className={className} style={style}>
    🤷‍♂ 
  </span>
))

main.jsx

import React from 'react'
import { styled } from 'linaria/react'

import Component from './component'

export default styled(Component)`
  color: white;
`

Full error I see in my project:

ERROR in ./src/components/common/styled/checkbox.jsx
Module build failed (from ./node_modules/linaria/loader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: setTimeout is not defined
    at runLoaders (.../node_modules/webpack/lib/NormalModule.js:298:13)
    at .../node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at .../node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (.../node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (.../node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (.../node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (.../node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at provider (.../node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
    at .../node_modules/graceful-fs/graceful-fs.js:90:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:54:3)
 @ ./src/components/common/styled/index.js 2:0-49 2:0-49
 @ ./src/components/list/item/item-view/item-view.jsx
 @ ./src/components/list/item/item-view/index.js
 @ ./src/components/list/item/item.jsx
 @ ./src/components/list/item/index.js
 @ ./src/components/list/redux/list-actions.js
 @ ./src/components/list/redux/index.js
 @ ./src/components/list/index.js
 @ ./src/app/app.jsx
 @ ./src/app/index.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.jsx @babel/polyfill whatwg-fetch

Edited after diving deeper

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:12 (3 by maintainers)

Top GitHub Comments

1reaction

zarrellabcommented, Aug 21, 2019

The only update I have is we moved to styled-components and do not have this issue.

1reaction

hellpiratcommented, Jun 23, 2019

I got the same error when trying to use linaria with antd components

Top Results From Across the Web

react-fontawesome not displaying icons - Stack Overflow

Your component can then use icons like so: import ReactDOM from 'react-dom'; import FontAwesomeIcon from '@fortawesome/react-fontawesome' import { faCoffee } ...

React | Font Awesome Docs

Font Awesome now has an official React component that's available for a friction-less way to use our icons in your React applications.

How To Use Font Awesome 5 with React - DigitalOcean

In this tutorial you'll explore how to use the React Font Awesome component. Font Awesome website with its icons. Prerequisites. No coding is ......

Icon - Ant Design

Import icons from @ant-design/icons , component name of icons with different ... Custom Icon. Create a reusable React component by using <Icon component={....

How to create and style custom buttons in React Native

Learn how to create custom UI components with React Native three ways — creating your ... import React from "react"; import { View,...