linaria doesn't work within monorepo

[Hotell]

bug

What is the current behavior?

errors are thrown when:

• linaria/loader is used within webpack.config per package (doesn't work with rootMode: 'upward' within babel-loader options)
• linaria CLI is used from monorepo root (there is no way how to pass --root-mode upward)

Error (it wont apply previous babel presets/plugins at all):

ERROR in ./src/app.tsx
Module build failed (from ./node_modules/linaria/loader.js):
SyntaxError: /Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/src/app.tsx: Unexpected token (26:6)

  24 |   render() {
  25 |     return (
> 26 |       <div className="App">
     |       ^
  27 |         <header className="App-header">
  28 |           <img src={logo} className="App-logo" alt="logo" />
  29 |           <p>
    at Parser.raise (/Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/node_modules/@babel/parser/lib/index.js:3831:17)
    at Parser.unexpected (/Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/node_modules/@babel/parser/lib/index.js:5143:16)
    at Parser.parseExprAtom (/Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/node_modules/@babel/parser/lib/index.js:6283:20)
    at Parser.parseExprSubscripts (/Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/node_modules/@babel/parser/lib/index.js:5862:23)
    at Parser.parseMaybeUnary (/Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/node_modules/@babel/parser/lib/index.js:5842:21)
    at Parser.parseExprOps (/Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/node_modules/@babel/parser/lib/index.js:5729:23)
    at Parser.parseMaybeConditional (/Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/node_modules/@babel/parser/lib/index.js:5702:23)
    at Parser.parseMaybeAssign (/Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/node_modules/@babel/parser/lib/index.js:5647:21)
    at Parser.parseParenAndDistinguishExpression (/Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/node_modules/@babel/parser/lib/index.js:6435:28)
    at Parser.parseExprAtom (/Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/node_modules/@babel/parser/lib/index.js:6215:21)
ℹ ｢wdm｣: Failed to compile.

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

What is the expected behavior?

linaria should work within monorepo ( with babel rootMode: 'upward' )

Please provide your exact Babel configuration and mention your Linaria, Node, Yarn/npm version and operating system.

• I'm using lerna with yarn workspaces
• I've tried to "escape" linaria via nohoist which didn't work either

_package.json workspace config:_

{
  "workspaces": {
    "packages": ["packages/*"],
    "nohoist": ["**/linaria", "**/linaria/**"]
  }
}

// babel.config.js in repo root
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry',
        modules: false,
        loose: true,
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
    [
      'linaria/babel',
      {
        displayName: !IS_PROD,
      },
    ],
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
  ],
  ignore: ['node_modules'],
};

// webpack.config.js within `./packages/my-app` root

module.exports = {
  // omitting config except module...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        include: /src/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              rootMode: 'upward',
            },
          },
          // NOTE: if linaria/loader is removed compilation works ofc 🚨
          {
            loader: 'linaria/loader',
            options: { sourceMap: isDev },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { sourceMap: isDev },
          },
        ],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [{ loader: 'file-loader' }],
      },
    ],
  },
};

[satya164]

Linaria loader also accepts a babelOptions property. Have you tried it?

[Hotell]

Linaria loader also accepts a babelOptions property. Have you tried it?

Oh my, oh my..... I've spent half day with this.... you're a life saver @satya164

Speaking of which, I'll submit PR with some docs improvements if you won't mind.

Cheers !

[Hotell]

For anyone else looking at this issue, here is the fix:

module.exports = {
  // omitting config except module...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        include: /src/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              rootMode: 'upward',
            },
          },
          {
            loader: 'linaria/loader',
            options: {
              sourceMap: isDev,
             // ✅ you need to explicitly set rootMode
              babelOptions: {
                rootMode: 'upward',
              },
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { sourceMap: isDev },
          },
        ],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [{ loader: 'file-loader' }],
      },
    ],
  },
};

[Hotell]

What about the CLI though ?

[Hotell]

CLI works only when executed from the root (which is not what you want usually when working in monorepo):

I've defined linaria.config.js

const config = {
  displayName: true,
  babelOptions: {
    rootMode: 'upward',
  },
}

module.exports = config

Works:

yarn linaria -o dist/styles packages/*/src/**/*.tsx packages/*/src/**/*.ts

Doesn't Work:

• I've also tried to provide linaria.config.js per package directory, but the outcome is the same

yarn lerna exec --stream --scope @twisto/customer-registration 'linaria -o dist/styles src/**/*.tsx src/**/*.ts'

SyntaxError: /Users/hotell/Projects/devel/twisto/twisto-ui/packages/customer-registration/src/app.tsx: Unexpected token (26:6)
:   24 |   render() {
:   25 |     return (
: > 26 |       <div className="App">
:      |       ^

[satya164]

Is the config file in the same directory where the CLI is being executed? Maybe we need a --config option to pass path to config file?

[Hotell]

Is the config file in the same directory where the CLI is being executed

yes

Maybe we need a --config option to pass path to config file

sounds good !

[satya164]

PR welcome to add a --config option

[Hotell]

folks! you rock ! ❤️🍻