What could be causing the error "styled is not defined as a function" while creating my component library using Rollup?

Currently, I am facing an issue with my component library which is built using React, styled-components, framer-motion, Rollup, and Storybook. The library is being consumed by a NextJS website, but when trying to use it, I keep encountering the following error:

TypeError: styled is not a function

The error seems to be related to the code below, taken from the compiled library:

var React = require('react');
var styled = require('styled-components');
var framerMotion = require('framer-motion');

const ButtonElm = styled(framerMotion.motion.button)`
    padding: ${props => props.padding};
    border-radius: ${props => props.theme.radii.default};
    font-size: ${props => props.fontSize};
    ${props => (props.bold ? "font-weight: bold" : null)};
    text-align: center;
    cursor: pointer;
    width: auto;
    display: inline-block;
    text-decoration: none;
`;

I have attempted various changes to the build configuration without success. It's unclear what exactly is causing this bug and how to resolve it. Any insight or assistance would be greatly appreciated. Thank you.

javascriptnext.jsstyled-componentsrollupjsframer-motion

Answer №1

After encountering a bug, I was able to successfully resolve it thanks to guidance from a GitHub issue posted on the RollupJS repository (link here).

The solution involved adding the property interop: "auto" to the rollup.config.mjs configuration file, specifically within the CommonJS output file. Here is an example snippet of how it looked after implementation:

output: [
        {
            file: packageJson.main,
            format: "cjs",
            sourcemap: true,
            interop: "auto",
        },
        ...
    ],

This modification to the build file addressed the issue in the following manner:

var React = require('react');
var styled = require('styled-components');

var styled__default = _interopDefault(styled);

const ButtonElm = styled__default.default(framerMotion.motion.button)`
    padding: ${props => props.padding};
    border-radius: ${props => props.theme.radii.default};
    font-size: ${props => props.fontSize};
    ${props => (props.bold ? "font-weight: bold" : null)};
    text-align: center;
    cursor: pointer;
    width: auto;
    display: inline-block;
    text-decoration: none;
`;

By addressing the default import handling of styled-components, the error was successfully resolved. The issue stemmed from incorrect handling of the object with a default property which became evident when running console.log(typeof styled);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that the div from the header file remains fixed directly above the fixed div from another file?

This is the header section that I want to keep fixed within the "header" div. <div id="header" style="display:block;"> <table style="width:100%"> <tr> <td class="col-sm-6" style="background-color:lavender;"><a href ...

javascriptphpjqueryhtmlcss

Identifying the color category based on the color code in the props and displaying JSX output

I am in need of a solution to display colors in a table cell. The color codes are stored in mongodb along with their descriptions. I am looking for a library that can determine whether the color code provided is in RGB or hex format, and then render it acc ...

javascriptreactjsmongodb

Converting an HTML ul-li structure into a JavaScript object: Steps to save the structure

My HTML structure uses ul and li elements as shown below: <ul class="treeview" id="productTree"> <li class="collapsable lastCollapsable"> <div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div> <span ...

javascriptjqueryhtmlhtml-lists

As a newcomer to Javascript, I am currently working on developing a CRUD-based application and could use some assistance with implementing the Edit functionality

I am currently in the process of developing a Javascript CRUD application that showcases data within an HTML Table. I have successfully implemented the Create, Read, and Delete functions. However, for the Edit function, I am looking to display the data in ...

javascripthtmlarraysjsoncrud

Every time I click once, two unnecessary AJAX calls are triggered, and the DOM remains outdated until I manually refresh the page

Whenever I click on a span, it sends an ajax request to delete the clicked todo from the database. However, in the DOM, the item is not removed until I refresh the page. Here is my index.html file: <ul class="list"> </ul> I noticed ...

javascriptjquerynode.jsajaxexpress

JavaScript makes it simple to display student names based on their ID numbers

Here is my JavaScript code: <script language="Javascript"> var data = { 7: "Jack Black", 8: "John Smith" }; var id = document.getElementById("id"), emp = document.getElementById("name"); id.addEventListener("keyup", function() { emp.value ...

javascripthtmlnumberslookup

Clear the Material-UI textfield upon form submission

After submitting the form, how can I clear the value from the TextField? All of the components in my code are functional components, not class ones. The example below shows one of the TextFields, with others similar to it. Currently, setting type='sea ...

javascriptreact-nativematerial-ui

Converting primary key strings to BSON for the _id field in MongoDB using Mongoskin

The primary key in Mongodb is typically _id and its data type is bson. For example: {_id : "4e7020cb7cac81af7136236b"} I am interested in setting another field's value as the primary key. For instance: apple How can I convert the string "apple" to ...

javascriptnode.jsmongodb

Accessing a key from an AJAX JSON response and applying it within a .each() loop in jQuery

I'm struggling with a seemingly simple task that I just can't seem to get right. My goal is to convert multiple text inputs into select fields using AJAX and jQuery. Everything works smoothly, except when trying to make the $.each function dynam ...

javascriptjqueryhtmlajaxjson

Leverage the Ajax response to bypass a loop iteration in Jquery

I am currently facing a challenge where I need to skip a loop iteration based on the response received from an Ajax call. The issue lies in the fact that I am unable to access the Ajax response outside of the actual Ajax call. While I have managed to fin ...

javascriptjqueryajax

Sequelize error: Foreign key mentioned, yet not found in the table

I recently started using Sequelize and have been relying heavily on the documentation available here. The documentation mentions the importance of using hasOne(), hasMany(), and belongsTo() to automatically add foreign key constraints. In my case, I am wor ...

javascriptmysqlnode.jssequelize.js

What steps can I take to resolve my password validation rule when confirming during sign-up?

Utilizing react-hook-form in combination with Material-UI for my sign-up form has been a challenge. I am currently working on implementing a second password field to confirm and validate that the user accurately entered their password in the initial field, ...

javascriptreactjsmaterial-uireact-hook-form

The Jquery code encountered an issue where it was unable to access the property 'length' of an undefined

My goal is to submit a form using jQuery and AJAX, which includes file upload functionality. The challenge I'm facing is that the forms are dynamically created, so I need to identify which form was clicked and retrieve its input values. $(document).r ...

javascriptjqueryajax

Only consider valid values for input and ignore any zeros

I am working on a form where I need to accept any number, regardless of if it's negative, a float, or a long integer. I have implemented code to not allow null, undefined, or empty values, but I encountered an issue where entering 0 is being read as e ...

javascripthtmlgetelementbyid

Utilize Javascript to refine JSON data strings

Currently, I am tackling a small project and facing a minor JS issue. The JSON string that I have looks like this: var jsObj = { "templates": { "form0": { "ID": "MyAlertNew", "isVisible": "true", ...

javascriptjson

When a global variable is defined after a return statement within a function declaration, it does

Check out this Javascript code snippet: http://jsfiddle.net/ramchiranjeevi/63uML/ var foo = 1; function bar() { foo = 10; return; function foo() {} } bar(); console.log(foo); // should return 10, but returns 1 It's interesting to no ...

javascriptclosures

Unable to cancel the RTK query request

It's quite a dilemma. I need to handle the request differently when there is no user present. I've attempted different approaches like this and that const { data: carts = [] as ICart[], isFetching } = api.useGetCartProductsQuery(user.id, { skip: ...

javascriptreactjsnext.jsreact-reduxrtk-query

Error: The function `map` cannot be applied to `cardsData`

I'm encountering an issue where I need to store user queries in cardsData and then map through the data within cardsData. However, when I run the code on my terminal, it throws an error. As a beginner, I've researched various forums that mention ...

javascriptnext.js

Why is it necessary to create a new object in Node.js to establish a server?

After reviewing the information about socket.io, there is one aspect that I find confusing. I understand that to create a server, it can be done like this: var io = require ("socket.io")(); However, I am curious about why it necessitates creating a new ...

javascriptnode.jsexpresssocket.io

Is it possible to utilize JavaScript for displaying a continuous stream of images?

In this scenario, you are tasked with working with an image API and need to send a POST request to retrieve an image stream for display on the rest of your webpage. While I am able to use jQuery to make an ajax request to the service upon page load, I am ...

javascriptjqueryimagestream