@emotion/react & @emotion/cache must be installed separately

[doei]

When setting up supertokens I got this error: supertokens Module not found: react-shadow tried to access @emotion/cache, but it isn't declared in its dependencie

After instally @emotion/cache, I had the same error with @emotion/react

Installing them both seem to solve the problem, there might be an issue with react-shadow

[rishabhpoddar]

Thanks @doei . We will get back ASAP.

[rishabhpoddar]

@doei can we have a look at the package-lock.json please? This may be happening because there might exist some other dependency in your app that also depends on react-shadow (thereby promoting it to the top level node_modules), and even though react-shadow does not have emotion in it's dependencies, it uses it. Hence this error.

[JakeGinnivan]

Emotion should be a peer dependency IMO. That way it works in nicely with other libraries like ChakraUI

See https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/package.json#L65

[doei]

This is my package.json, however, I'm in the process of completely upgrading this project, so hopefully the issue will solve itself.

{
	"version": "0.1.0",
	"private": true,
	"dependencies": {
		"@emotion/cache": "^11.9.3",
		"@emotion/react": "^11.9.3",
		"@sentry/react": "^6.1.0",
		"@testing-library/jest-dom": "^5.11.4",
		"@testing-library/react": "^11.1.0",
		"@testing-library/user-event": "^12.1.10",
		"date-fns": "^2.17.0",
		"debounce": "^1.2.1",
		"markdown-it": "^12.0.4",
		"prop-types": "^15.7.2",
		"react": "^17.0.1",
		"react-day-picker": "^8.0.0-beta.3",
		"react-dom": "^17.0.1",
		"react-is": "^17.0.2",
		"react-loader-spinner": "^4.0.0",
		"react-markdown": "^5.0.3",
		"react-scripts": "4.0.2",
		"react-spring": "^9.1.1",
		"recoil": "^0.1.2",
		"supertokens-auth-react": "^0.24.0",
		"supertokens-website": "^13.0.1",
		"web-vitals": "^1.0.1"
	},
	"scripts": {
		"start": "npx npm-run-all -p watch-css start-js",
		"start-js": "BROWSER=none PORT=8080 react-scripts start",
		"watch-css": "npm run build-css && stylus -w ./src/style.styl -o ./src/style.css",
		"build": "npm run build-css && react-scripts build",
		"build-css": "stylus ./src -o ./src",
		"test": "react-scripts test",
		"eject": "react-scripts eject",
	},
	"eslintConfig": {
		"extends": [
			"react-app",
			"react-app/jest"
		]
	},
	"browserslist": {
		"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
		],
		"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
		]
	},
	"devDependencies": {
		"eslint": "^7.24.0",
		"eslint-config-react-app": "^6.0.0",
		"npm-run-all": "^4.1.5",
		"stylus": "^0.54.8"
	}
}

[doei]

Mmh, actually, starting a new project with the same packages updated to their latest version I still have the error: Package.json

{
	"name": "pensieve-web",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
		"@testing-library/jest-dom": "^5.14.1",
		"@testing-library/react": "^13.0.0",
		"@testing-library/user-event": "^13.2.1",
		"@types/jest": "^27.0.1",
		"@types/node": "^16.7.13",
		"@types/react": "^18.0.0",
		"@types/react-dom": "^18.0.0",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"react-scripts": "5.0.1",
		"recoil": "^0.7.4",
		"supertokens-auth-react": "^0.24.0",
		"supertokens-website": "^13.0.1",
		"typescript": "^4.4.2",
		"web-vitals": "^2.1.0"
	},
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test",
		"eject": "react-scripts eject"
	},
	"eslintConfig": {
		"extends": [
			"react-app",
			"react-app/jest"
		]
	},
	"browserslist": {
		"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
		],
		"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
		]
	},
	"packageManager": "[email protected]"
}

Error output from yarn 3:

Failed to compile.

Module not found: Error: Can't resolve '@emotion/react' in '<PROJECT_PATH>/.yarn/__virtual__/react-shadow-virtual-6b7eaae9f0/0/cache/react-shadow-npm-19.0.3-7962d9932f-eb789ac10a.zip/node_modules/react-shadow'
ERROR in ./.yarn/__virtual__/react-shadow-virtual-6b7eaae9f0/0/cache/react-shadow-npm-19.0.3-7962d9932f-eb789ac10a.zip/node_modules/react-shadow/emotion.js 8:8-33
Module not found: Error: Can't resolve '@emotion/react' in '<PROJECT_PATH>/.yarn/__virtual__/react-shadow-virtual-6b7eaae9f0/0/cache/react-shadow-npm-19.0.3-7962d9932f-eb789ac10a.zip/node_modules/react-shadow'

ERROR in ./.yarn/__virtual__/react-shadow-virtual-6b7eaae9f0/0/cache/react-shadow-npm-19.0.3-7962d9932f-eb789ac10a.zip/node_modules/react-shadow/emotion.js 9:8-33
Module not found: Error: Can't resolve '@emotion/cache' in '<PROJECT_PATH>/.yarn/__virtual__/react-shadow-virtual-6b7eaae9f0/0/cache/react-shadow-npm-19.0.3-7962d9932f-eb789ac10a.zip/node_modules/react-shadow'

ERROR in ./.yarn/__virtual__/supertokens-auth-react-virtual-872f908df5/0/cache/supertokens-auth-react-npm-0.24.0-99401b24cd-63d5a59992.zip/node_modules/supertokens-auth-react/lib/build/components/featureWrapper.js 56:30-55
Module not found: Error: Can't resolve '@emotion/cache' in '<PROJECT_PATH>/.yarn/__virtual__/supertokens-auth-react-virtual-872f908df5/0/cache/supertokens-auth-react-npm-0.24.0-99401b24cd-63d5a59992.zip/node_modules/supertokens-auth-react/lib/build/components'

[rishabhpoddar]

Hmm. We are planning on either:

• Making emotion as a peer depedency; Or
• Removing the use of it from our lib entirely.

There doesn't seem to be a straightforward way other than the above two. Until then, keeping this issue open.

[JakeGinnivan]

I have worked around this by using .pnpmfile.cjs (for those using pnpm)

module.exports = {
    hooks: {
        readPackage,
    },
}

function readPackage(pkg) {
    if (pkg.name === 'supertokens-auth-react') {
        delete pkg.dependencies['@emotion/react']
    }
    if (pkg.name === 'react-select') {
        delete pkg.dependencies['@emotion/react']
    }

    return pkg
}

https://pnpm.io/pnpmfile#hooksreadpackagepkg-context-pkg--promisepkg

[rishabhpoddar]

Related to https://github.com/supertokens/supertokens-auth-react/issues/418

[porcellus]

We are preparing a PR that removes emotion entirely, just making a note of some TODOs here:

• [x] Make sure angular and vue still works!
• [x] Will importing the SDK as script tags work? (since we are using a bundler)
  • Not right now. With future work it could be possible, but I don't think it's that useful in a react project.
• [x] Can shadowroot be disabled by default? (without cause clashing with CSS of the App)
  • The same issues still apply: the app might set some styles too broadly (e.g., on the a component) which will clash with our styles.
• [x] Vue styling issue required disabling shadowroot
  • [x] If useShadowDom doens't need to be false anymore, then we should update the docs in quick setup to reflect this as well.
• [x] Update the PR template with a reminder to update the rollup config (per recipe things)
• [x] remove the palette type from all the input
• [x] Passwordless input, reduce the gap between country selection drop down and phone number input
• [x] Passwordless phone number should change default flag to be neutral
• [x] update size limits in package.json
• [x] update docs
  • [x] Docs for palette, we should also specify to only use rgba format

[rishabhpoddar]

We have removed use of emotion in supertokens-auth-react version >= 0.30.0.