search

MathiasGilson / Tailwind-Styled-Component

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
MIT License
818 stars 43 forks source link

import_tailwind_styled_components.default.* is not a function when "type": "module" #78

Open aplr opened 2 years ago

aplr commented 2 years ago

When using "type": "module" in my package.json, the styled component import fails with the following error:

TypeError: import_tailwind_styled_components.default.button is not a function
    at Object.<anonymous> (/app/build/index.js:8624:214)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /node_modules/@remix-run/serve/dist/index.js:43:17
    at Layer.handle [as handle_request] (/node_modules/express/lib/router/layer.js:95:5)
    at next (/node_modules/express/lib/router/route.js:144:13)
    at next (/node_modules/express/lib/router/route.js:138:14)
    at next (/node_modules/express/lib/router/route.js:138:14)
    at next (/node_modules/express/lib/router/route.js:138:14)
    at next (/node_modules/express/lib/router/route.js:138:14)
    at next (/node_modules/express/lib/router/route.js:138:14)
    at next (/node_modules/express/lib/router/route.js:138:14)

What needs to be done to fix this?

alexjidras commented 1 year ago

@aplr Downgrade tailwind-styled-components to 2.1.6 yarn upgrade tailwind-styled-components@2.1.6

@MathiasGilson i'm getting the same issue in my vitest unit tests jsdom env.

machineghost commented 1 year ago

I downgraded to 2.1.6 and I still had the same issue:

error - TypeError: tailwind_styled_components__WEBPACK_IMPORTED_MODULE_13__.div is not a function
    at eval (webpack-internal:///./src/pages/ResourcePage.js:36:76)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)