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.

linaria doesn't work within monorepo

See original GitHub issue

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' }],
      },
    ],
  },
};

Issue Analytics

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

Top GitHub Comments

2reactions

Hotellcommented, Mar 5, 2019

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' }],
      },
    ],
  },
};

1reaction

Hotellcommented, Mar 6, 2019

folks! you rock ! ❤️🍻