I have following function in actions.js file
export const mockFunction = () => {
return true
}
I have an index.js file, where I want to export this function to the rest of the app
import * as actions from './actions'
export {actions}
I get as error:
Failed to compile
./src/providers/xxform_provider/actions.jsx
Error: ENOENT: no such file or directory, open '/Users/client/xxxx/src/providers/xxform_provider/actions.jsx'
I am not using webpack, actually I guess no, if I have a look at my package.json
I am using create-react-app
https://github.com/facebook/create-react-app
Does anybody know what create-react-app uses as a js bundler? I can not tell from the package.json file
{
"name": "react_porter",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#fortawesome/react-fontawesome": "^0.1.8",
"#material-ui/core": "^4.9.0",
"#material-ui/lab": "^4.0.0-alpha.40",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-datetime": "^2.16.3",
"react-dom": "^16.12.0",
"react-facebook-login": "^4.1.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"react-swipe": "^6.0.4",
"react-swipeable-views": "^0.13.5",
"styled-components": "^5.0.0",
"swipe-js-iso": "^2.1.5",
"swipejs": "^2.2.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
actions.js
const mockFunction = () => true;
export default mockFunction;
index.js
import mockFunction from './actions';
i hope this helps
Related
Module not found: Error: Can't resolve '#mui/icons-material/Search' in 'C:\Users\pande\Documents\slack-clone\src\components'
Failed to compile.
Module not found: Error: Can't resolve '#mui/icons-material/Search' in 'C:\Users\pande\Documents\slack-clone\src\components'
ERROR in ./src/components/Header.js 9:0-52
Module not found: Error: Can't resolve '#mui/icons-material/Search' in 'C:\Users\pande\Documents\slack-clone\src\components'
webpack compiled with 1 error
import styled from "styled-components";
import { Avatar } from '#mui/material';
import SearchIcon from "#mui/icons-material/Search";
import AccessTimeIcon from "#mui/icons-material/AccessTime";
import HelpOutlineIcon from "#mui/icons-material/HelpOutline";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "../Firebase";
const Header = () => {
const [user] = useAuthState(auth);
return (
<HeaderContainer>
{/* header left */}
<HeaderLeft>
<HeaderAvatar
onClick={() => auth.signOut()}
alt={user?.displayName}
src={user?.photoURL}
/>
<AccessTimeIcon />
</HeaderLeft>
<HeaderSearch>
<SearchIcon />
<input type = "text" placeholder="Search" />
</HeaderSearch>
<HeaderRight>
<HelpOutlineIcon />
</HeaderRight>
</HeaderContainer>
);
};
export default Header;
package.json file
{
"name": "slack-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.9.3",
"#reduxjs/toolkit": "^1.8.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^14.3.0",
"firebase": "^9.9.1",
"firebase-hooks": "^0.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-firebase-hooks": "^5.0.3",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-spinkit": "^3.0.0",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"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"
]
},
"resolutions": {
"styled-components": "^5"
},
"devDependencies": {
"#types/react-spinkit": "^3.0.7",
"#types/styled-components": "^5.1.25"
}
}
I have added the below packages, and the icons are working fine.
"#emotion/react": "11.10.0",
"#emotion/styled": "11.10.0",
"#mui/icons-material": "5.8.4",
"#mui/material": "5.9.3",
#emotion/styled and #emotion/react are the dependency packages for icons. Attaching the sandbox for reference.
I have a react app , I packaged it using npm pack and I want to use it inside the main.ts in an electron app ,
I'm trying to import it like this import App from 'mypackage' but it keeps giving me this error
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\node_modules\mypackage\src\index.js from C:\src\main\main.ts not supported.
Instead change the require of index.js in C:\src\main\main.ts to a dynamic import() which is available in all CommonJS modules.
in my json file
{
"name": "mypackage",
"version": "0.1.0",
"main":"src/index.js",
"private": true,
"dependencies": {
"#blueprintjs/core": "^3.52.0",
"#blueprintjs/popover2": "^0.12.9",
"#rimbu/core": "^0.8.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.37",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-scripts": "4.0.3",
"react-table": "^7.7.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"type" : "module",
"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"
]
},
"devDependencies": {
"#types/react-table": "^7.7.9",
"sass": "^1.45.1"
}
}
I add in my package.json proxy for making request to server runing on other port.
after that, my module css styles stop working, in the devTools i found that the styles are loading well, but classnames for DOM elements are not loading at all.
How it looks now:
How it should be:
some page code:
import styles from "./LoginPage.module.css";
export default function LoginPage() {
return (
<div className={styles.LoginPage}>
</div>
);
}
Here is my package.json:
{
"name": "job-bot-admin-panel",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000/",
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"http-proxy-middleware": "^2.0.4",
"multiselect-react-dropdown": "^2.0.21",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^7.2.8",
"react-router-dom": "^6.3.0",
"react-scripts": "^0.9.5",
"react-select": "^5.2.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
your filename is incorrect. for css modules you don't need to add .module to the filename, just name it LoginPage.css and import it with that same name and your styles should be fine. React is getting confused with your module filename.
I created a react project with create-react-app some times ago and i wanted to add some test with jest. I read that Jest comes with create-react-app, but when i try to run the simple test that comes with the project by typing "yarn test", i have this error message: TypeError: (0 , _react2.test) is not a function
The test:
import React from 'react';
import { render, screen, expect, test} from '#testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
The result:
My package.json
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --ext .js,.jsx",
"lint-fix": "npm run lint -- --fix"
},
"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.28.0",
"eslint-plugin-react": "^7.24.0"
}
}
Does anyone know what i am missing ? Thank you !
I try to test my app created via create-react-app. There is only one test file generated automatically:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
This is my package.json (also i have package-lock.json (~ 15k rows)):
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"avro-js": "^1.9.1",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-redux": "^7.1.1",
"react-scripts": "3.2.0",
"react-syntax-highlighter": "^11.0.2",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
When i try to test it using test script i get this error:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Details:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export
{ default as a11yDark } from './a11y-dark';
Also, i don't have .babelrc file. I tried to add .babelrc but it didn't help (or maybe i did it incorrectly)
If you are getting this error when trying to import the javascript styles for the component, make sure you are targetting the
react-syntax-highlighter/dist/cjs/...
instead of the
react-syntax-highlighter/dist/esm/...
Jest should be able to parse that.
So, finally i've solved this.
My final configs are:
babel.config.js:
module.exports = {
presets: ['#babel/preset-env', '#babel/preset-react'],
};
package.json:
{
"name": "project",
"version": "1.0",
"private": true,
"dependencies": {
"avro-js": "^1.9.1",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-redux": "^7.1.1",
"react-scripts": "3.2.0",
"react-syntax-highlighter": "^11.0.2",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"jest": {
"transformIgnorePatterns": [
"/node_modules/(?!(react-syntax-highlighter)/)"
]
},
"devDependencies": {
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"eslint": "^6.7.1",
"jest": "^24.9.0",
"jest-cli": "^24.9.0",
"react-test-renderer": "^16.12.0",
"redux-mock-store": "^1.5.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I'm not sure that this is the best solution, but at least it works