Background:
I am trying to test an npm package that I am developing: a React Component that manages a SVG filter animation. In verifying that it works as expected, I have used npm pack to generate a tarball, which I have then installed as a dependency in another project (one I expect to consume said package when properly published).
To make this easier, I will refer to the npm package I am developing as package A and refer to the project that consumes it as project B. Please take note of the technologies mentioned below as their giving context will likely provide insight.
Relevant Technologies
packageA
- node: 14.18.1
- esbuild: ^0.11.11
- typescript: ^4.2.3
projectB
- node: 14.18.1
- remix: 1.4.1
- typescript: ^4.2.3
Observations + Problems:
Observations:
npm pack, when run inpackage A, spits out a tarball that includes everything BUT the output build directory ofpackage A.package Ahas a package.json with a type field set as "module", thereby declaratively supporting ES Module System syntax.npm installof this tarball inproject Bis successful.- If I change my import of
package Ato its absolute path (node_modules/projectA/build/main.js) inproject B's node_modules I avoid the problem defined in Problems #1.
Problems:
- Any attempt to consume
package Ainproject Bis met with the following error:
- Any attempt to consume
// THIS IMPORT
// projectB > index.js
import PackageAComponent from 'packageA'
// RESULTS IN:
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/jackwilliammorris/Code/better-brain-blogging/node_modules/fuzzy-scrawl/build/esbuild/browser.js
require() of ES modules is not supported.
require() of /Users/jackwilliammorris/Code/better-brain-blogging/node_modules/fuzzy-scrawl/build/esbuild/browser.js from /Users/jackwilliammorris/Code/better-brain-blogging/server/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename browser.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/jackwilliammorris/Code/better-brain-blogging/node_modules/fuzzy-scrawl/package.json.
at new NodeError (internal/errors.js:322:7)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at Object.<anonymous> (/Users/jackwilliammorris/Code/better-brain-blogging/app/routes/braindumps/index.tsx:8:25)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
Relevant Code Snippets
// projectB package.json
{
"name": "projectB",
"private": true,
"description": "",
"license": "",
"sideEffects": false,
"scripts": {
... ,
"dev": "run-p dev:*",
"dev:arc": "node ./dev sandbox",
"dev:css": "npm run generate:css -- --watch",
"dev:remix": "remix watch",
...
},
"prettier": {},
"dependencies": {
"@architect/architect": "^10.2.1",
"@architect/functions": "^5.0.4",
"@happy-dom/jest-environment": "^3.1.0",
"@notionhq/client": "^1.0.4",
"@remix-run/architect": "^1.4.1",
"@remix-run/node": "^1.4.1",
"@remix-run/react": "^1.4.1",
"@remix-run/server-runtime": "^1.4.1",
"bcryptjs": "2.4.3",
"classnames": "^2.3.1",
"cuid": "^2.1.8",
"fuzzy-scrawl": "file:../fuzzy-scrawl/fuzzy-scrawl-0.0.0.tgz",
"highlight.js": "^11.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tiny-invariant": "^1.2.0"
},
"devDependencies": {
"@faker-js/faker": "^6.1.1",
"@remix-run/dev": "^1.4.1",
"@remix-run/eslint-config": "^1.4.1",
"@testing-library/cypress": "^8.0.2",
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^14.0.4",
"@types/architect__functions": "^3.13.6",
"@types/bcryptjs": "2.4.2",
"@types/eslint": "^8.4.1",
"@types/jest": "^27.4.1",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"@vitejs/plugin-react": "^1.3.0",
"c8": "^7.11.0",
"cross-env": "^7.0.3",
"cypress": "^9.5.3",
"esbuild": "^0.14.29",
"eslint": "^8.12.0",
"eslint-config-prettier": "^8.5.0",
"happy-dom": "^2.55.0",
"jest": "^27.5.1",
"mock-aws-s3": "^4.0.2",
"msw": "^0.39.2",
"npm-run-all": "^4.1.5",
"prettier": "^2.6.1",
"prettier-plugin-tailwindcss": "^0.1.8",
"start-server-and-test": "^1.14.0",
"tailwindcss": "^3.0.23",
"ts-jest": "^27.1.4",
"ts-node": "^10.7.0",
"typescript": "^4.6.3",
"vitest": "^0.8.2"
},
"engines": {
"node": "14"
}
}
// packageA package.json
{
"name": "fuzzy-scrawl",
"version": "0.0.0",
"author": "slackermorris",
"repository": "",
"license": "MIT",
"keywords": [
"css",
"typescript",
"scss"
],
"main": "./build/main.js",
"module": "./build/main.js",
"type": "module",
"types": "./build/tsc/main.d.ts",
"scripts": {
"esbuild-browser:dev": "NODE_ENV=development node build esbuild-browser:dev",
},
"devDependencies": {
"@types/jest": "^26.0.21",
"@types/node": "^15.0.1",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.19.0",
"esbuild": "^0.11.11",
"esbuild-css-modules-plugin": "^2.3.2",
"esbuild-plugin-css-modules": "^0.1.3",
"esbuild-sass-plugin": "^2.2.6",
"esbuild-style-plugin": "^1.6.0",
"eslint": "^7.22.0",
"jest": "^26.6.3",
"live-server": "^1.2.2",
"sass": "^1.53.0",
"ts-jest": "^26.5.4",
"ts-node": "^9.1.1",
"typedoc": "^0.20.35",
"typescript": "^4.2.3"
},
"dependencies": {
"gsap": "^3.10.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
