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

Inscribe latitude from marker onto input field

Currently, I am working on a feature where markers are added to Google Maps API v3 by clicking on the map. Each marker then displays its coordinates in an info window. However, I am facing an issue with picking up the latitude and longitude values and inse ...

javascriptjqueryhtmlformsgoogle-maps-api-3

What is the process of invoking a JavaScript function from Selenium?

How can I trigger a JavaScript function from Selenium WebDriver when using Firefox? Whenever I am logged into my website, I typically utilize this command in Firebug's Command Editor to launch a file upload application: infoPanel.applicationManager. ...

javascriptselenium

When using the JavaScript .sort() method, any undefined value must always be considered as coming before any other value

I am working on sorting an array of objects based on multiple fields, typically around 3-4 fields. Some values within the objects may be undefined, and I need to ensure that these undefined values are considered as "earlier" in the sorting process, wheth ...

javascriptsorting

What is the best way to transfer a querystring received in Node.js to a page being shown through res.render?

I have a nodejs file where I am rendering a page named foo.html. Within foo.html, I am using ajax to retrieve variables from a querystring and load an appropriate xml document based on those variables. The issue arises when I run my nodejs server, which is ...

javascriptajaxnode.js

Rendering illuminated component with continuous asynchronous updates

My task involves displaying a list of items using lit components. Each item in the list consists of a known name and an asynchronously fetched value. Situation Overview: A generic component named simple-list is required to render any pairs of name and va ...

javascripttypescriptasync-awaitlit

Transferring information from JSON to HTML

Recently, I came across this handy design tool within our service that helps generate Gauge charts by simply adding a specific div class to the desired pages. <div class="gauge" id="g0" data-settings=' { "value": ...

javascripthtmljson

The NodeJS server encountered an issue when attempting to load the JavaScript modules

Hey everyone. I'm currently using Node.js and Express.js for the back end of my web application, but I keep running into issues with the server trying to bind references in the source code. Here's the structure of my app: src/ - static/ - ...

javascriptnode.jsexpressimportroutes

The React server-side rendering isn't reflecting changes made on the client-side route

Upon the first refresh, both the server and client side are updated; however, subsequent updates only affect the client side when switching pages with react router. For instance, refreshing the page or entering a new URL causes changes on the server and t ...

javascriptnode.jsreactjsexpressserver-side-rendering

The quiet harmony of FeathersJS and Socket.io as they attentively listen to events is

I've been working hard to get everything set up and running smoothly, but it seems like I'm stuck on the last piece of the puzzle. Despite following the documentation closely, I can't seem to figure out what I'm missing. Here is the @an ...

javascriptnode.jssocket.iofeathersjs

Guide on converting a complex nested json into the jquery autocomplete format

How can I properly format a complex nested JSON for use with jQuery autocomplete? I have been attempting to map my custom JSON data to fit the required jQuery autocomplete format of label and value, but unfortunately, my list is returning as 'undefine ...

javascriptjsonjquery-ui-autocomplete

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

javascripthtmltypescript

Prevent browser menus from opening by using JavaScript without triggering a new popup window

In seeking to safeguard the source code of my website, I am looking to prevent any unauthorized access. Therefore, I aim to deactivate all common methods of accessing the code such as Ctrl+U, Ctrl+Shift+I, F12, and browser menu options. ...

javascriptphphtmlcss

Function that returns an array

Hey there, wondering about variable scope in closures! I've come across a lot of questions on this topic but haven't found the solution to my issue. Here's the code snippet: var teams = []; var players = []; var getRoles = function(roleL ...

javascriptnode.jsclosures

AngularJS checkbox ng-repeat directive not displaying controller data

I am facing an issue with rendering checkbox data from the Controller file in my HTML. Here is the code snippet: HTML: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script& ...

javascriptangularjscheckboxangularjs-ng-repeat

When the parent component in React JS rerenders, the props are not automatically passed down to the child

I have come across similar questions in the past, but I have not found any answers that directly address the issue I am facing in my scenario. In my case, there is a parent component that passes a property to a child component's state. Depending on t ...

javascriptreactjs

React does not allow objects as children, but what if it's actually an array?

My function is encountering an error message that reads: "Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead." I am struggling to understand why this error is occurring. ...

javascriptarraysreactjs

Transferring the chosen dropdown value to the following page

I am attempting to transfer the currently selected value from a dropdown to the next page using an HTTP request, so that the selected value is included in the URL of the subsequent page. The form dropdown element appears as follows: <form name="sortby ...

javascriptphpjqueryhtml

"Converting a basic function into a promise for an AngularJS tutorial: How to handle the error message '

To help my colleagues understand AngularJS, I am creating a dummy exercise. In this example, I want to call a service that provides an Object Array to be passed into a Controller and assigned to a $scope variable (using information about the Beatles). Inst ...

javascriptangularjs

What is the best way to ensure that posts made with Contentlayer stay dynamic for future posts on Vercel?

My issue is that on the webpage I have set up using contentlayer, I display my blog posts from GitHub through Vercel. However, when I publish a new post on GitHub, I am unable to see it because it has not been built yet. What can I do on the Nextjs13 site ...

javascriptreactjsnext.js

I need to search through a tree structure in typescript based on a specific value without encountering a maximum stack call exceeded error

How can I perform a value-based search on a complex tree structure in TypeScript without encountering the maximum stack call exceeded error? I am attempting to navigate through an expandable tree using TypeScript, and I will provide the code snippet below ...

javascripttypescript