I am just a new developer on React. I have just starting a new app using the create-react-app plugin. After that I have customised my own App Component, but this is using some third party components which makes the npm run test (react-scripts test --env=jsdom) fails with an error:
SyntaxError: Unexpected token import
This error only happens for an import inside a dependency at node_modules I am using. For example, it gives no error on
import React, { Component } from 'react';
Since I am using the create-react-app plugin I do not know what I need to change to make it pass. However, it seems to be something related with some babel configurations missing.
I think I should not need to install babel-jest dependency since that is embedded with create-react-app.
I have also tried to execute, without success:
npm run test -- --no-cache
The package.json file:
{
"name": "dhis2-hello-world",
"version": "0.1.0",
"private": true,
"dependencies": {
"d2": "^28.3.0",
"d2-manifest": "^1.0.0",
"d2-ui": "^28.0.8",
"d2-utilizr": "^0.2.15",
"loglevel": "^1.6.0",
"material-ui": "^0.20.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17",
"rxjs": "^5.5.5"
},
"scripts": {
"prestart": "d2-manifest package.json ./public/manifest.webapp",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"manifest.webapp": {
"name": "DHIS2 App Template",
"description": "DHIS2 App Template",
"icons": {
"48": "icon.png"
},
"developer": {
"url": "",
"name": "DHIS2"
},
"activities": {
"dhis": {
"href": ".."
}
}
}
}
The error:
/node_modules/d2-ui/lib/app-header/HeaderBar.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import PropTypes from 'prop-types';
PropTypes is being imported on a component at d2-ui which is being import at App component like this:
import React, { Component } from 'react';
import HeaderBarComponent from 'd2-ui/lib/app-header/HeaderBar';
I was looking for a way to solve it without need to eject the project.
Could anyone give me some clues of how to solve that problem?
Many thanks!
Related
I want to use styled-component in nextjs react .
This is how I use styled-component:
import styled from 'styled-components';
export const MainTitleContainer = styled.div`
text-align:right;
margin:3rem 0;
padding:2rem;
`;
export const MainTitle = styled.h1`
font-size:3.8rem;
font-family:Bnazanin;
`;
import {MainTitleContainer,MainTitle} from '../styles/Home.styles';
As soon as I import styled-components (import styled from 'styled-components';) into my nextjs app I get the following error:
../../node_modules/styled-components/dist/styled-components.browser.esm.js:1:73
Module not found: Can't resolve 'react'
null
error image
Here is my package.json:
{
"name": "next-horse-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "11.0.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"styled-component": "^2.8.0"
},
"devDependencies": {
"babel-plugin-styled-components": "^1.13.2",
"eslint": "7.31.0",
"eslint-config-next": "11.0.1"
}
}
How can I fix this error?
It looks like the "s" is missing in package.json for "styled-components", try running removing node_modules, and running npm i styled-components
I am using Linux Mint OS. I am learning Testing in react.js. I created an app using create react app. I installed jest-cli using sudo npm i -g jest-cli. My folder structure is like below
My test is like below
App.test.js
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);
});
describe('Addition', () => {
it('knows that 2 and 2 make 4', () => {
expect(2 + 2).toBe(4);
});
});
My package.json is like below
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"babel-preset-es2015": "^6.24.1",
"react": "^16.3.1",
"react-bootstrap-sweetalert": "^4.4.1",
"react-dom": "^16.3.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"react-smart-data-table": "^0.5.3",
"react-table": "^6.8.2",
"semantic-ui-react": "^0.79.1",
"sweetalert": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0"
},
"proxy": "http://localhost:4000"
}
I am getting below error
I read this SO post. As per instruction of that post I did following steps
Delete package-lock.json and node_modules.
Remove jest from the dependencies in package.json (This is not present in my setup)
Then do npm install.
But I am still getting error.
You don’t need to install jest-cli, that may be what’s causing the error. create react app already has jest bundled, try removing jest-cli from your global dependencies and running npm test.
Remove all your node_modules(Delete the node modules folder). Then install them using yarn or npm install, Run your test using npm test or yarn test command.
I moved from npm to yarn and for some reason, although I imported the react-native library it doesn't recognize it, I get the error:
./src/App.js
Module not found: Can't resolve 'react-native' in '/var/react-projects/gymgains/src'
I delete the package.json.lock, also yarn.lock and tried again:
yarn
Yet it didn't solve the problem.
Here is my package.json:
{
"name": "App",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-firebase-file-uploader": "^2.4.2",
"react-native": "^0.58.5",
"react-native-cli": "^2.0.1",
"react-scripts": "2.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
And here is my import statements:
import React, { Component } from 'react';
import firebase from 'firebase';
import { Text, View, Image } from 'react-native';
import 'firebase/firestore';
import FileUploader from 'react-firebase-file-uploader';
Is there a difference between running it with 'yarn start' to see it in the browser and push it to an Android to test it in the simulator, could that be the problem that react-native does not work in the web browser?
Any idea how to solve this issue?
Thanks
I had some very similar issue:
Module not found: Can't resolve 'react-native'
and in my case it helped me to do
yarn add react-native-web
As you do not have that module installed. You could give it a try.
Can you try npm install and see. I think your node_modules does not have react-native package.
I'm trying to learn how to use React and I'm trying to build a todo app. Right now my index.js file is as such:
var React = require('react');
var ReactDom = require('react-dom');
//create component
var TodoComponent = React.createClass({
render: function(){
return(
<h1>Hello!</h1>
);
}
});
//put component into html page
ReactDom.render(<TodoComponent/>, document.getElementById('todo-wrapper'))
but in my terminal I get this error:
ERROR in ./~/react-dom/lib/ReactMount.js
Module not found: Error: Cannot resolve module 'react/lib/React' in /Users/tylerbray/Documents/Side Projects/Ninja React/react-playlist/node_modules/react-dom/lib
# ./~/react-dom/lib/ReactMount.js 15:12-38
here is my json file:
{
"name": "react-playlist",
"version": "1.0.0",
"description": "A simple react to-do list",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run build",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
},
"repository": {
"type": "git",
"url": "git+https://github.com/iamshaunjp/react-playlist.git"
},
"keywords": [
"react"
],
"author": "The Net Ninja",
"license": "MIT",
"bugs": {
"url": "https://github.com/iamshaunjp/react-playlist/issues"
},
"homepage": "https://github.com/iamshaunjp/react-playlist#readme",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^15.6.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.16.5"
}
}
I'm not sure what to make of it and I was hoping someone here could point me in the right direction. Repo can be found here: https://github.com/Brayheart/react-todo
var React = require('require');
should be:
var React = require('react');
Problem is that you are using "react-dom": "^15.6.2" which is creating an issue. Packaging has changed after react 16, There is no react/lib/* and react-dom/lib/* anymore (check docs for more details: https://reactjs.org/blog/2017/09/26/react-v16.0.html#packaging).
To fix an issue
update "react-dom" to "^16.2.0".
Remove node_modules
Run "npm install"
Then you also need to change your "index.js" as you have upgraded react version. "React.createClass" is not a part of core package anymore it is extracted to separate package "create-react-class" (for more details check docs: https://reactjs.org/blog/2017/09/26/react-v16.0.html#packaging), So i have modified it to use React.component.
import React from 'react';
import ReactDom from 'react-dom';
//create component
class TodoComponent extends React.Component {
render() {
return(
<h1>Hello!</h1>
);
}
}
//put component into html page
ReactDom.render(<TodoComponent/>, document.getElementById('todo-
wrapper'))
run "npm start"
Opened app using url http://localhost:1234
it should work :)
I want to put React app files in the React Native app.
I used React Native Web to support React Native components in the React app.
Last step I want to put all files from React App folder to React Native App folder.
the difference is in Package.json
React Package.json :
{
"name": "appname",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
React Native Package.json:
{
"name": "appname",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"react-native-windows": "0.47.0-rc.5"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12",
"rnpm-plugin-windows": "^0.2.7"
},
"jest": {
"preset": "react-native"
}
}
So is it possible I can merge the two packages together?
For your native app you can use package.json from React Native, no need to merge. You don't need "react-dom" and similar libs in native app. If your components are all from React Native for Web, there will be no problem running them on native.