Linaria: Styled BlueprintJS: Duplicate plugin/preset detected.

[MaximeHeckel]

Environment

// babel plugins and presets
"@babel/core": "7.4.0",
"@babel/plugin-transform-async-to-generator": "7.12.1",
"@babel/plugin-transform-regenerator": "7.12.1",
"@babel/plugin-transform-runtime": "7.12.1",
"@babel/preset-env": "7.12.1",
"@babel/preset-react": "7.12.5",
"@babel/preset-typescript": "7.12.1",
"@babel/types": "7.12.6",

// blueprintjs core library
"@blueprintjs/core": "3.32.1",

// linaria dependencies
"@linaria/babel": "3.0.0-beta.0",
"@linaria/core": "3.0.0-beta.0",
"@linaria/react": "3.0.0-beta.0",
"@linaria/shaker": "3.0.0-beta.0",
"@linaria/webpack-loader": "3.0.0-beta.0",

// react
"react": "16.12.0",
"react-dom": "16.12.0"

// webpack
"webpack": "4.44.2",

• Linaria version: 3.0-beta
• Bundler (+ version): Webpack 4.44.12
• Node.js version: Node 12
• OS: macOS

Description

Hi 👋 I'm fairly new to Linaria, but have used quite a few styled components libraries in the past, and what I want to achieve is the following:

I'd like to override BlueprintJS components using the styled function from @linaria/react as a cleaner way to override their style. I tried the following:

import { Tab } from "@blueprintjs/core";
import { styled } from "@linaria/react";

const StyledTabs = styled(Tabs)`
  height: 50px;
`;

I'm not entirely sure whether this will work or not given that (from the docs) You can use the styled(..) tag to style any component as long as they accept a className and a style prop. But here I'm actually getting a bundler issue:

Error: An unexpected runtime error ocurred during dependencies evaluation: 
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]
It may happen when your code or third party module is invalid or uses identifiers not available in Node environment, eg. window. 
Note that line numbers in above stack trace will most likely not match, because Linaria needed to transform your code a bit.

Webpack wise I followed the docs, and the setup is fairly basic:

const babelrc = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react",
    "module:@linaria/babel"
  ],
  plugins: [
    "@babel/proposal-class-properties",
    "@babel/transform-regenerator",
    "@babel/transform-async-to-generator",
    "@babel/transform-runtime"
  ]
};


...

{
              test: /\.(ts|tsx)$/,
              include: paths.appSrc,
              use: [
                {
                  loader: require.resolve("babel-loader"),
                  options: {
                    babelrc: false,
                    ...babelrc
                  }
                },
                {
                  loader: require.resolve("@linaria/webpack-loader"),
                  options: {
                    sourceMap: isDev,
                    cacheDirectory: paths.linariaCache,
                    // preprocessor: "none",
                    displayName: isDev,
                    babelOptions: {
                      ...babelrc
                    }
                  }
                }
              ]
            },

I even tried to remove any plugins for the linaria loader:

const babelrc = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react",
    "module:@linaria/babel"
  ],
  plugins: [
    "@babel/proposal-class-properties",
    "@babel/transform-regenerator",
    "@babel/transform-async-to-generator",
    "@babel/transform-runtime"
  ]
};

...
{
              test: /\.(ts|tsx)$/,
              include: paths.appSrc,
              use: [
                {
                  loader: require.resolve("babel-loader"),
                  options: {
                    babelrc: false,
                    ...babelrc
                  }
                },
                            {
              test: /\.(ts|tsx)$/,
              include: paths.appSrc,
              use: [
                {
                  loader: require.resolve("babel-loader"),
                  options: {
                    babelrc: false,
                    ...babelrc
                  }
                },
                {
                  loader: require.resolve("@linaria/webpack-loader"),
                  options: {
                    sourceMap: isDev,
                    cacheDirectory: paths.linariaCache,
                    // preprocessor: "none",
                    displayName: isDev,
                    babelOptions: {
                      presets: [...babelrc.presets],
                      plugins: []
                    }
                  }
                }
              ]
            },

But the error still occurs.

Has anyone faced a similar issue? Or maybe due to the way blueprintjs bundles its components, this is simply not possible? Any hint to guide us to a solution would be really helpful.

Thank you in advance!

[Anber]

Hi @MaximeHeckel

It should work with BlueprintJS, and I've personally used BlueprintJS with Linaria 2.0.
Unfortunately, I can't see from your error log which plugin is duplicated, but I've found and fixed one potential reason, so that the problem may be gone in the next beta.

[Anber]

Could you please try 3.0.0-beta.1?

[MaximeHeckel]

Hey @Anber it works on 3.0.0-beta.1, thank you so much! Any particular changes between the 2 betas that might have triggered this? (just for my own personal understanding of the issue)

[Anber]

There was a mess with package name, that was fixed in https://github.com/callstack/linaria/pull/720
For some reasons, Linaria tries to extend existed Babel config and override options of its own preset, but it wasn't able to find that preset because it was prefixed with module:.

[MaximeHeckel]

Thank you @Anber this makes perfect sense now
Feel free to close this issue 😄