-
Notifications
You must be signed in to change notification settings - Fork 414
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Regression: "Using styled tag in runtime is not supported" on valid code #1241
Comments
@PierreGUI Have you configured @linaria/babel-preset? If not, you can configure it, refer to here https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#linariababel-preset |
Yes. I'm migrating from Linaria 2, and the setup is the same (except for the plugin's name). ["@babel/preset-env", {...}],
"@babel/preset-typescript",
["@babel/preset-react", { "runtime": "automatic" }],
"@linaria" |
@PierreGUI Are you using a Windows computer? If yes, please create a new const nodeModulesRegExp = /[\\/]node_modules[\\/]/;
module.exports = {
rules: [
{
action: require.resolve('@linaria/shaker'),
},
{
test: nodeModulesRegExp,
action: 'ignore',
},
{
test: (filename, code) => {
if (!nodeModulesRegExp.test(filename)) {
return false;
}
return /(?:^|\n|;)\s*(?:export|import)\s+/.test(code);
},
action: require.resolve('@linaria/shaker'),
}
]
}; |
I'm not using a window computer. I tried your rules but it didn't solve the problem. Worth mentioning the error appears to originate from my own modules, not third parties. In these files I use Linaria, but it looks like the
|
@PierreGUI It looks like your Babel Transform is not applied, can you provide your |
webpack.config.js (excerpt): {
entry: {
home: resolve('src/home.ts'),
profile: resolve('src/profile.ts'),
settings: resolve('src/settings.ts'),
},
module: {
rules: [
{
include: [resolve('src')],
test: /\.(j|t)sx?$/,
use: [
{ loader: 'babel-loader' },
{
loader: '@linaria/webpack5-loader',
options: {
displayName: mode === 'development',
sourceMap: false,
},
},
],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [new MiniCssExtractPlugin()],
} This is almost exactly the same config I use with Linaria 2 (successfully). LMK if you find anything. |
@PierreGUI, have you managed to reproduce it? |
@Anber not this one, tbh I forgot about it because I'm blocked by other issues at build time (namely, #1226 (comment) and #1262 (comment)) |
Guys, any updates about this problem? Im facing the same problem when trying render my component react 18 component through jest . |
Hi @Clasen00, This error occurs only when |
@Anber currently Im using a 3.0.0-beta.13 version. |
@Clasen00, you can either add |
Hi @lixingjuan! If you want to use Linaria 6+, you need to replace |
Environment
Description
This error popped with v4, while it used to work fine with Linaria v2 (I'm migrating from).
Note I have experienced this error both during build and runtime (after fixing build by commenting out code):
Uncaught Error: Using the "styled" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.
Reproducible Demo
Still trying to make one. It happens in my huge codebase but isn't easy to reproduce at a small scale.
The text was updated successfully, but these errors were encountered: