Cannot import npm package use linaria.

[nguyenabc]

Environment

localhost

• Linaria version: 4.1.2
• Bundler (+ version): 5.74.0
• Node.js version: 16.16.0
• OS: window/os

Description

Hi everyone, I build design system with storybook, typescript and linaria. I already publish package on gitlab, but when I import into another project it get the issue:

My config for linaria in .babelrc and config-overrides.json: { "presets": [ [ "react-app", { "flow": false, "typescript": true, "runtime": "automatic" } ], "@babel/preset-env", "@babel/preset-react", "@linaria" ] }

/ eslint-disable react-hooks/rules-of-hooks / const { useBabelRc, override, addWebpackModuleRule, addWebpackAlias, addWebpackResolve, } = require('customize-cra') const path = require('path')

module.exports = override( useBabelRc(), addWebpackModuleRule({ test: /.(js|tsx)$/, use: [ { loader: 'babel-loader' }, { loader: '@linaria/webpack-loader', options: { cacheDirectory: 'src/.linaria_cache', sourceMap: process.env.NODE_ENV !== 'production', }, }, ], exclude: '/node_modules/', }), addWebpackResolve({ extensions: ['.tsx', '.ts', '.js'], mainFiles: ['index'], }), addWebpackAlias({ '@stories': './src/stories', '@linaria/core': path.join(__dirname, './node_modules/@linaria/core/lib'), }), )

As understand, I think linaria don't run in the runtime. So, i don't know why it's not working when I import into another react app. Have anyone help me to explain and gimme instruction to build npm package registry for react app+ storybook + linaria?

Thank you very much.

Reproducible Demo

[nguyenabc]

Please have anyone to help me?

[nguyenabc]

@need:help

[nguyenabc]

Don't have anybody help to resolve.

[Anber]

Hi @nguyenabc

Since Storybook uses webpack as a bundler, you have to add @linaria/webpack4-loader or @linaria/webpack5-loader to its config https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config

[Anber]

And if you want to publish your design system as a package with compiled styles, you should take a look at @linaria/cli.

[nguyenabc]

Thank for your support @Anber . But I roll back to use styled-components and use rollup. They are easier to build package.