callstack / linaria

Zero-runtime CSS in JS library
https://linaria.dev
MIT License
11.67k stars 417 forks source link

@linaria/esbuild bundler shows error "TypeError: linaria is not a function" #904

Closed dave-stevens-net closed 2 years ago

dave-stevens-net commented 2 years ago

Environment

Description

I followed your instructions on https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#esbuild to add the @linaria/esbuild plugin to esbuild. However, when I add the import as follows it returns an object (containing the default property) instead of the plugin function itself.

// My esbuild.mjs module
import {build} from 'esbuild'
import linaria from '@linaria/esbuild'

  build({
    ...
    plugins: [linaria()],
  }).then(() => {

The above logic produces the error, TypeError: linaria is not a function. I can get around this issue by coding the plugins as follows:

import linaria from '@linaria/esbuild'

  build({
    ...
    plugins: [linaria.default()],
  }).then(() => {
Anber commented 2 years ago

Hi @dave-stevens-net Looks like @linaria/esbuild in your project is resolved to lib-version instead of esm. Could you please provide a repo that reproduces that behaviour?

dsod commented 2 years ago

Node simply wont import the esm file:

import linaria from '@linaria/esbuild/esm/index.js';
> To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

Changing the @linaria/esbuild/esm/index.js file extension to .mjs allows me to import the ESM module. In order for Node to choose a specific module system based on how the module is imported, some changes to the package.json is required: https://nodejs.org/api/packages.html#dual-commonjses-module-packages

Here is a minimal repo that reproduces the issue: https://github.com/dsod/linaria-esbuild-import-issue

iMoses commented 2 years ago

The change required is simply replacing this part of the package.json file

  "main": "lib/index.js",
  "module": "esm/index.js",

with this:

  "type": "module",
  "exports": {
    "import": "./esm/index.js",
    "require": "./lib/index.js"
  },

was tested locally and it works well

Anber commented 2 years ago

Fixed and released. Thank you @iMoses and @dsod!