Linaria: Styling custom component containing react-fontawesome import causes error

[zarrellab]

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_

[mattoni]

I had a similar issue, I believe it's because memo() has a side effect. Try styling the component without memo() then wrap that.

[zarrellab]

I had a similar issue, I believe it's because memo() has a side effect. Try styling the component without memo() then wrap that.

I was thinking the same thing for a second while trying to debug. I was mislead by a few things as restarting the build after changes is the only way to make sure that the error would be reported accurately. I stripped down my project to a minimum example of the issue. Here I found that the actual problem is importing react-fontawesome into a component. You don't even have to use the react-fontawesome within the component getting styled.

Here is the example repo: https://github.com/zarrellab/linaria-bug-example

[mattoni]

Ah, maybe that's why I'm running into it elsewhere too. I use react-fontawesome in several projects and have hit this issue.

[mattoni]

To add some extra info, I'm using a component I styled with linaria in another component that has react-fontawesome components, and running into the issue. So even simply having it next to a fontawesome component causes the problem. Commenting out the fontawesome icon allows it to compile correctly.

[hellpirat]

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

[failpunk]

@hellpirat were you able to get Linaria working with antd?

[mattoni]

Any update to this?

[zarrellab]

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

[jayu]

@zarrellab thank you for the repro. I tried it out and I found the reason. Long story short:
We use node's vm to evaluate any code whenever we need to resolve some value to be used in linaria. In this case, we evaluate ./Component.jsx file (I'm not sure if we have to resolve that file TBH, but it is happening). When we evaluate ./Component.jsx we also evaluate all its dependencies. When we evaluate FontAwesome, there is an error that setTimeout is not defined. It is because setTimeout is not defined in context setup in vm we use. setTimeout only exist in global variable. So you can replace an import line with just setTiemout; and it will also fail.

First of all, we have to provide better error logging, since the error you got tells nothing.

Secondly, we have to ensure that we can execute setTimeout during the evaluation. For some reason, it's not included in vm context, not sure why. I will look for similar issues and try to address them.

@Anber since you are working on evaluators, this might be interesting finding for you.

[Anber]

I don't sure that we are able to solve this problem in the extractor evaluation strategy, but it's already solved in the shaker strategy.
Here is the config which fixes the example repo.

[jayu]

I provided setTimeout to vm context and it worked. We can spread global to the context to provide missing identifiers. But I'm not sure if it safe.

const script = new vm.Script(
      `(function (exports) { ${code}\n})(exports);`,
      {
        filename: this.filename,
      }
    );

    script.runInContext(
      vm.createContext({
       ...global, // make `setTimeout` and others avaliable in top level name space
        global,
        process,
        module: this,
        exports: this.exports,
        require: this.require,
        __filename: this.filename,
        __dirname: path.dirname(this.filename),
      })
    );

[chrisabrams]

@Anber thank you so much for sharing your config this resolved the issue for me!