Fix dual packages ES module import bug

[iMoses]

Fixes #904 (and possibly #1043)

Solution is based on this documentation: https://nodejs.org/api/packages.html#approach-1-use-an-es-module-wrapper

It properly configures the package entry point for both CommonJS and ESM, which is currently not the case (see #904)

[Anber]

Hi @iMoses!

It looks like the solution doesn't work well. "type": "module" changes a lot in the way how that module should be written. Maybe we can change the type only for react, core, and atomic? Otherwise, we have to fix a lot of code.

[iMoses]

@Anber seems that the problem is mainly with the integration packages (@linaria/rollup, @linaria/esbuild) and only possibly with @linaria/react

you wanna try applying the fix only there and see if it helps the ci processes?

[iMoses]

i'll try to fix this issues locally first

[cojoclaudiu]

@iMoses, @Anber this will be the fix for

error when starting dev server:
TypeError: linaria is not a function

?

more context

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import linaria from '@linaria/rollup';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react(), linaria()],
});

[Anber]

Hi @cojoclaudiu. I don't know. Maybe. We have an example for Vite (and I use Vite in my projects), and everything works well. Let's see how @iMoses's approach will affect the problem.

[iMoses]

@cojoclaudiu yes, it should be

currently I only tested it locally with @linaria/rollup on Node v16 and it did the trick

[cojoclaudiu]

@Anber I know the example but it's not working. The verisions of the vite and linaria in that example are not the latest. With the latest verision is not working.

@iMoses I will have a look locally as well and I will be back.

[cojoclaudiu]

@cojoclaudiu yes, it should be

currently I only tested it locally with @linaria/rollup on Node v16 and it did the trick

How did you approuch the change for react/package.json since there it is an export already?

[iMoses]

@cojoclaudiu I haven't, I'll need to debug it later today after I get the environment ready to run the tests locally

[cojoclaudiu]

@cojoclaudiu I haven't, I'll need to debug it later today after I get the environment ready to run the tests locally

I followed you last commit https://github.com/callstack/linaria/pull/1057/commits/24845e8e07db2da5e8c8e6c7af0bf1d205e5ae0f and updated locally react/package.json and I get this back

src/components/Button/Button.tsx: require() of ES Module /node_modules/@linaria/react/lib/processors/styled.js from /node_modules/@linaria/babel-preset/lib/utils/getTagProcessor.js not supported.
styled.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename styled.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /node_modules/@linaria/react/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

  14 | }
  15 | var _jsxFileName = "/src/components/Button/Button.tsx";
> 16 | import { styled } from "@linaria/react";
     |          ^^^^^^
  17 | import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
  18 | const ButtonContainer = styled.div`
  19 |  margin-top: 40px;
16:33:26 [vite] Internal server error: /src/components/Button/Button.tsx: require() of ES Module /Users/claudiu.cojocaru/node_modules/@linaria/react/lib/processors/styled.js from /node_modules/@linaria/babel-preset/lib/utils/getTagProcessor.js not supported.
styled.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename styled.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /node_modules/@linaria/react/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

  14 | }
  15 | var _jsxFileName = "/src/components/Button/Button.tsx";
> 16 | import { styled } from "@linaria/react";
     |          ^^^^^^
  17 | import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
  18 | const ButtonContainer = styled.div`
  19 |  margin-top: 40px;
  Plugin: linaria

if the "type": "module" is removed I get this error:

The argument 'path' must be a string or Uint8Array without null bytes. Received '\x00react/jsx-dev-runtime'
16:39:46 [vite] Internal server error: The argument 'path' must be a string or Uint8Array without null bytes. Received '\x00react/jsx-dev-runtime'
  Plugin: linaria
  File: /src/components/Button/Button.tsx

[Anber]

@cojoclaudiu @iMoses I have fixed a couple of bugs with rollup@3 and the Vite example works well now. Could you please check this issue again?

[cojoclaudiu]

@cojoclaudiu @iMoses I have fixed a couple of bugs with rollup@3 and the Vite example works well now. Could you please check this issue again?

I'm going to check now.

@Anber

failed to load config from /Users/claudiu/Development/vite-linaria-react-ts/vite.config.ts
error when starting dev server:
TypeError: linaria is not a function

https://github.com/cojoclaudiu/vite-linaria-react-ts

[Anber]

@cojoclaudiu okay… I'll take a look later today.

[cojoclaudiu]

@cojoclaudiu okay… I'll take a look later today.

let me know later, maybe I can dig more as well after work

[Anber]

Looks like we just need to rename all files in esm folders from js to mjs. Tomorrow I'll try to change the build system in order to support mjs.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 091496cbbd4533b2e375fef6f3d1cb59813f6960

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@linaria/atomic	Minor
@linaria/core	Minor
@linaria/esbuild	Minor
@linaria/react	Minor
@linaria/rollup	Minor
@linaria/testkit	Patch
linaria-website	Patch
@linaria/babel-preset	Patch
linaria	Patch
esbuild-example	Patch
rollup-example	Patch
vite-example	Patch
webpack5-example	Patch
@linaria/cli	Patch
@linaria/stylelint	Patch
@linaria/webpack4-loader	Patch
@linaria/webpack5-loader	Patch
@linaria/webpack-loader	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Anber]

@all-contributors please add @iMoses for code

[allcontributors[bot]]

@Anber

I've put up a pull request to add @iMoses! :tada: