error:
./src/App.tsx
Cannot find file: 'emotion-react.browser.esm.js' does not match the corresponding name on disk: 'C:\Users\gabrielti\Documents\emasa-management\node_modules\@emotion\react\dist\Emasa-Management'.
I use a mono repo structure, which is as follows
packages / client
packages / server
Mono repo package.json:
{
"name": "xemasa_monorepo",
"version": "1.0.0",
"main": "index.js",
"repository": "https://github.com/sptGabriel/x-Management.git",
"private":true,
"workspaces":{
"packages": [
"packages/*"
]
},
"author": "Gabriel Costa Cerqueira <Gabrielcerqueira96@hotmail.com>",
"license": "MIT",
"devDependencies": {
"husky": "^4.3.0"
},
"husky": {
"hooks": {
"prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
}
Client package.json:
{
"name": "@emasa_monorepo/client",
"version": "0.1.0",
"dependencies": {
"@emotion/babel-preset-css-prop": "^11.0.0",
"@emotion/react": "^11.1.2",
"@emotion/styled": "^11.0.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/styled-system": "^5.1.10",
"axios": "^0.21.0",
"class-validator": "^0.12.2",
"history": "^5.0.0",
"jsonwebtoken": "^8.5.1",
"lodash.get": "^4.4.2",
"mobx": "^6.0.4",
"mobx-react-lite": "2.2.2",
"mobx-state-tree": "^4.0.2",
"polished": "^4.0.5",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hamburger-menu": "^1.2.1",
"react-icons": "^4.1.0",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "4.0.1",
"react-spinners": "^0.9.0",
"styled-system": "^5.1.5",
"typescript": "^4.1.2",
"universal-cookie": "^4.0.4",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"type-check": "tsc --project tsconfig.json --pretty --noEmit",
"lint": "eslint --ext js,jsx,ts,tsx --fix",
"prettier-format": "prettier --config .prettierrc ./src/**/*.{ts,tsx} --write"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"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": {
"@babel/plugin-proposal-decorators": "^7.12.1",
"@types/jest": "^26.0.15",
"@types/lodash.get": "^4.4.6",
"@types/node": "^14.14.10",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-hamburger-menu": "^0.0.3",
"@types/styled-components": "^5.1.4",
"@types/universal-cookie": "^2.2.0",
"@typescript-eslint/eslint-plugin": "^4.9.0",
"@typescript-eslint/parser": "^4.9.0",
"eslint": "^7.14.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.15.0",
"eslint-import-resolver-typescript": "^2.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"lint-staged": "^10.5.2",
"prettier": "^2.2.1",
"typescript": "^4.1.2"
},
"babel": {
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
],
"presets": [
"react-app"
]
}
}
babelrc
{
"presets": [
"react-app",
"@babel/preset-env",
"@babel/preset-react",
{
"runtime": "automatic",
"importSource": "@emotion/react"
}
],
"plugins": [
"@emotion/babel-plugin",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
app.jsx:
import React from 'react'
import { observer } from 'mobx-react-lite'
import { ThemeProvider } from '@emotion/react'
import { useAppTheme } from './shared/utils/useAppTheme'
import GlobalReset from './shared/utils/cssReset'
const App: React.FC = observer(() => {
const { theme } = useAppTheme()
return (
<ThemeProvider theme={theme}>
<GlobalReset />
<div>a</div>
</ThemeProvider>
)
})
export default App
file: emotion-react.browser.esm.js exists on : enter image description here
emotion-react.browser.esm.js code:
import { createElement, useContext, useRef, useLayoutEffect } from 'react';
import '@emotion/cache';
import { h as hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext } from './emotion-element-4fbd89c5.browser.esm.js';
export { C as CacheProvider, T as ThemeContext, a as ThemeProvider, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-4fbd89c5.browser.esm.js';
import '@babel/runtime/helpers/extends';
import '@emotion/weak-memoize';
import 'hoist-non-react-statics';
import '../isolated-hoist-non-react-statics-do-not-use-this-in-your-code/dist/emotion-react-isolated-hoist-non-react-statics-do-not-use-this-in-your-code.browser.esm.js';
import { insertStyles, getRegisteredStyles } from '@emotion/utils';
import { serializeStyles } from '@emotion/serialize';
import { StyleSheet } from '@emotion/sheet';
var pkg = {
name: "@emotion/react",
version: "11.1.2",
main: "dist/emotion-react.cjs.js",
module: "dist/emotion-react.esm.js",
browser: {
"./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js",
"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
},
types: "types/index.d.ts",
files: [
"src",
"dist",
"jsx-runtime",
"jsx-dev-runtime",
"isolated-hoist-non-react-statics-do-not-use-this-in-your-code",
"types/*.d.ts",
"macro.js",
"macro.d.ts",
"macro.js.flow"
],
sideEffects: false,
author: "mitchellhamilton <mitchell@mitchellhamilton.me>",
license: "MIT",
scripts: {
"test:typescript": "dtslint types"
},
dependencies: {
"@babel/runtime": "^7.7.2",
"@emotion/cache": "^11.0.0",
"@emotion/serialize": "^1.0.0",
"@emotion/sheet": "^1.0.1",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"hoist-non-react-statics": "^3.3.1"
},
peerDependencies: {
"@babel/core": "^7.0.0",
react: ">=16.8.0"
},
peerDependenciesMeta: {
"@babel/core": {
optional: true
},
"@types/react": {
optional: true
}
},
devDependencies: {
"@babel/core": "^7.7.2",
"@emotion/css": "11.0.0",
"@emotion/css-prettifier": "1.0.0",
"@emotion/server": "11.0.0",
"@emotion/styled": "11.0.0",
"@types/react": "^16.9.11",
dtslint: "^0.3.0",
"html-tag-names": "^1.1.2",
react: "16.14.0",
"svg-tag-names": "^1.1.1"
},
repository: "https://github.com/emotion-js/emotion/tree/master/packages/react",
publishConfig: {
access: "public"
},
"umd:main": "dist/emotion-react.umd.min.js",
preconstruct: {
entrypoints: [
"./index.js",
"./jsx-runtime.js",
"./jsx-dev-runtime.js",
"./isolated-hoist-non-react-statics-do-not-use-this-in-your-code.js"
],
umdName: "emotionReact"
}
};
var jsx = function jsx(type, props) {
var args = arguments;
if (props == null || !hasOwnProperty.call(props, 'css')) {
// $FlowFixMe
return createElement.apply(undefined, args);
}
var argsLength = args.length;
var createElementArgArray = new Array(argsLength);
createElementArgArray[0] = Emotion;
createElementArgArray[1] = createEmotionProps(type, props);
for (var i = 2; i < argsLength; i++) {
createElementArgArray[i] = args[i];
} // $FlowFixMe
return createElement.apply(null, createElementArgArray);
};
var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
// initial client-side render from SSR, use place of hydrating tag
var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is
// probably using the custom createElement which
// means it will be turned into a className prop
// $FlowFixMe I don't really want to add it to the type since it shouldn't be used
props.className || props.css)) {
console.error("It looks like you're using the css prop on Global, did you mean to use the styles prop instead?");
warnedAboutCssPropForGlobal = true;
}
var styles = props.styles;
var serialized = serializeStyles([styles], undefined, typeof styles === 'function' || Array.isArray(styles) ? useContext(ThemeContext) : undefined);
// but it is based on a constant that will never change at runtime
// it's effectively like having two implementations and switching them out
// so it's not actually breaking anything
var sheetRef = useRef();
useLayoutEffect(function () {
var key = cache.key + "-global";
var sheet = new StyleSheet({
key: key,
nonce: cache.sheet.nonce,
container: cache.sheet.container,
speedy: cache.sheet.isSpeedy
}); // $FlowFixMe
var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
if (cache.sheet.tags.length) {
sheet.before = cache.sheet.tags[0];
}
if (node !== null) {
sheet.hydrate([node]);
}
sheetRef.current = sheet;
return function () {
sheet.flush();
};
}, [cache]);
useLayoutEffect(function () {
if (serialized.next !== undefined) {
// insert keyframes
insertStyles(cache, serialized.next, true);
}
var sheet = sheetRef.current;
if (sheet.tags.length) {
// if this doesn't exist then it will be null so the style element will be appended
var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
sheet.before = element;
sheet.flush();
}
cache.insert("", serialized, sheet, false);
}, [cache, serialized.name]);
return null;
});
if (process.env.NODE_ENV !== 'production') {
Global.displayName = 'EmotionGlobal';
}
function css() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return serializeStyles(args);
}
var keyframes = function keyframes() {
var insertable = css.apply(void 0, arguments);
var name = "animation-" + insertable.name; // $FlowFixMe
return {
name: name,
styles: "@keyframes " + name + "{" + insertable.styles + "}",
anim: 1,
toString: function toString() {
return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
}
};
};
var classnames = function classnames(args) {
var len = args.length;
var i = 0;
var cls = '';
for (; i < len; i++) {
var arg = args[i];
if (arg == null) continue;
var toAdd = void 0;
switch (typeof arg) {
case 'boolean':
break;
case 'object':
{
if (Array.isArray(arg)) {
toAdd = classnames(arg);
} else {
if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {
console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.');
}
toAdd = '';
for (var k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += ' ');
toAdd += k;
}
}
}
break;
}
default:
{
toAdd = arg;
}
}
if (toAdd) {
cls && (cls += ' ');
cls += toAdd;
}
}
return cls;
};
function merge(registered, css, className) {
var registeredStyles = [];
var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
if (registeredStyles.length < 2) {
return className;
}
return rawClassName + css(registeredStyles);
}
var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
var hasRendered = false;
var css = function css() {
if (hasRendered && process.env.NODE_ENV !== 'production') {
throw new Error('css can only be used during render');
}
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var serialized = serializeStyles(args, cache.registered);
{
insertStyles(cache, serialized, false);
}
return cache.key + "-" + serialized.name;
};
var cx = function cx() {
if (hasRendered && process.env.NODE_ENV !== 'production') {
throw new Error('cx can only be used during render');
}
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return merge(cache.registered, css, classnames(args));
};
var content = {
css: css,
cx: cx,
theme: useContext(ThemeContext)
};
var ele = props.children(content);
hasRendered = true;
return ele;
});
if (process.env.NODE_ENV !== 'production') {
ClassNames.displayName = 'EmotionClassNames';
}
if (process.env.NODE_ENV !== 'production') {
var isBrowser = "object" !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
var isJest = typeof jest !== 'undefined';
if (isBrowser && !isJest) {
var globalContext = isBrowser ? window : global;
var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
if (globalContext[globalKey]) {
console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');
}
globalContext[globalKey] = true;
}
}
export { ClassNames, Global, jsx as createElement, css, jsx, keyframes };
I already searched and found nothing about it, I don't know what's going on