Context
Our product is (sadly) still on Webpack 3. Hope to upgrade, but in the meantime, I am trying to use an npm library that bundles cjs, mjs and iffe files. (See package.json excerpt below).
The problem is that Webpack complains when I import from these files.
import { styled } from '@stitches/react';
This throws the following error:
ERROR in ./node_modules/@stitches/react/dist/index.cjs
Module parse failed: Unexpected token (1:9356)
You may need an appropriate loader to handle this file type.
The unexpected token is something random like n or a variable name. The source code is used widely in the community so it's likely not a bug in the code.
Works when copy-pasting the code into src
In our Babel setup, we don't touch anything in node_modules, but when I copy the contents of dist/index.cjs or dist/index.mjs into our src directory and import it there, everything works fine.
This looks to me like the source code has issues with either a) how it's imported as a module, or b) it requires some kind of transpilation to work with our setup.
The question
Is this somehow related to Webpack 3? Are mjs and cjs files problematic?
package.json
{
"name": "@stitches/react",
"version": "0.2.3",
"description": "The modern CSS-in-JS library",
"type": "module",
"main": "dist/index.cjs",
"module": "dist/index.mjs",
"types": "types/index.d.ts",
"typesVersions": {
">= 4.1": {
"*": [
"types/index.d.ts"
]
}
},
"jsdelivr": "dist/index.iife.js",
"unpkg": "dist/index.iife.js",
"exports": {
".": {
"require": "./dist/index.cjs",
"import": "./dist/index.mjs",
"types": "./types/index.d.ts"
}
},
