I am developing an app using react and it needs to run on IE. I'm using an external library called query-string. It contains arrow functions and IE doesn't know those and for some reason the code in this library is not transpiled or translated to older JS.
I had similar issue within this project with the library popmotion which was using a find method, but I fixed that by installing Babel polyfill and including it in the main file App.jsx. I did not eject the react app as I'm quite new to this and don't know exactly how react works under the hood.
This is my package.json
{
"name": "ruzovky",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.6",
"deepcopy": "^1.0.0",
"node-sass-chokidar": "^1.3.3",
"npm-run-all": "^4.1.3",
"popmotion": "^8.3.4",
"prop-types": "^15.6.2",
"query-string": "^6.1.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "node-sass-chokidar src/ -o src/ --watch",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
To help you understand my issue: Everything else does get transpiled, as react takes care of everything (I can create react components using javascript, which no browser supports yet), except this single library. In my node_modules folder there is babel-loader and webpack too.
You should use build tool, the simplest & most widespread one is webpack.
Here is the tutorial on how to transpile ES6 to older versions via webpack
Related
I am just starting to learn next.js. I installed create-next-app tried starting a development server without changing any code provided by boilerplate. I get this error
./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages\_app.js
I am just starting with nextjs so I do not have any other information besides this and I have not changed any code
commands I used
npx create-next-app next_js_list
cd next_js_list
npm run dev
This is the package.json I have
{
"name": "next_js_list",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "11.1.1",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.1"
}
}
Same for me, looks like an error with the new next.js version 11.1.1, just go back to 11.1.0, and will be ok, a fix will be coming shortly
I have create an app with react.js. I wanted to go into production.
I did
npm run build
serve -s build
I go on localhost:5000
The welcome page works very well, but when i go on localhost:5000/maini have an error
404 | The requested path could not be found
I tried to redo npm run build, but that did not work
What do you propose ?
EDIT
Package.json
{
"name": "name-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"firebase": "^5.10.0",
"node-sass": "^4.11.0",
"p5": "^0.8.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-p5-wrapper": "0.0.4",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8",
"socket.io-client": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"devDependencies": {},
"author": "",
"license": "ISC"
}
It looks like the "-s" or "--single" argument/option on the serve package is either not working or no longer working as expected so requests to paths other than "/" are not being rewritten.
Take a look at the following issue for the serve package: https://github.com/zeit/serve/issues/525
In my test setup downgrading serve as suggested in the bug report fixed the issue.
npm uninstall -g serve
npm install -g serve#10.1.1
serve -s build
got same issue today and finally it was caused by the wrong path in which I ran the cmd "serve -s build". we need to ensure the cmd running in one level up to "build" folder, eg: we have "opt/build" path, then server cmd needs to be done in /opt/
After creating a react app with 'create-react-app' things have been successful till now. I have made a working react project. But now that I'm looking to implement unit testing with jest.
Using npm to install: 'npm install --save-dev jest'
Then running: npm ls jest I notice that the react-script is looking for a jest version that is significantly older.
package.json:
"dependencies": {
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-redux": "^6.0.0",
"react-scripts": "2.1.5",
"redux": "^4.0.1"
},
"devDependencies": {
"jest": "^24.7.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
}
npm ls jest result:
+-- jest#24.7.1
`-- react-scripts#2.1.5
`-- jest#23.6.0
npm start error:
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"jest": "23.6.0"
Don't try to install it manually: your package manager does it
automatically.
However, a different version of jest was detected higher up in the tree:
C:\Users\userName\sample js codes\redux\songs\node_modules\jest (version:
24.7.1)
Is there a solution to solve this dependency version issue?
Create-react-app comes with Jest built-in, there is no need to install it additionally.
You have a version conflict now because you installed it additionally.
To fix it, revert your changes to package.json.
The scss file in not compiling in reactjs even after having the required dev dependencies .I have used create-react-app to create the app.
Here is the package.json file.
{
"name": "mydecisionapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"css": "^2.2.1",
"loader": "^2.1.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-modal": "^3.1.11",
"react-scripts": "1.1.0",
"style": "^0.0.3",
"validator": "8.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"css-loader": "^0.28.9",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.10.0"
}
}
Here is the package style.scss file .
$brand-color:blue;
* {
color: $brand-color;
}
I looked at all imports in index.js file and it is completely ok but still, I don't see scss compiling .
create-react-app is not configured by default to support scss files. Try reading this How to add SASS/SCSS to a create-react-app
Pls ensure that your version of react-scripts inside the the package.json file is at least 2.0.0.
This is stated at the top of the documentation that can be found here: https://create-react-app.dev/docs/adding-a-sass-stylesheet
Note: this feature is available with react-scripts#2.0.0 and higher.
npm i sass-loader node-sass
I was having the same issue, and it worked for me :)
I am trying to build a full stack web application that uses React, Redux, Socket.io and some other dependencies.
Here is the package.json file for a full list of dependencies
{
"name": "react-voting-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"chai": "^3.5.0",
"chai-immutable": "^1.6.0",
"jsdom": "^9.8.3",
"mocha": "^3.1.2",
"react-scripts": "0.7.0",
"webpack": "^1.13.3"
},
"dependencies": {
"babel-preset-es2015": "^6.18.0",
"immutable": "^3.8.1",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-redux": "^4.4.6",
"redux": "^3.6.0",
"socket.io": "^1.4.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js",
"test:watch": "npm run test -- --watch",
"eject": "react-scripts eject"
}
}
I am using webpack to bundle the files together. I created the react app using create-react-app.
When I try to run the application, I get the following error
index.js:28 Uncaught TypeError: read is not a function(…)
and a bunch of other warnings from socket.io
Critical dependencies: 1:475-482 This seems to be a pre-built
javascript file. Though this is possible, it's not recommended. Try to
require the original source to get better results
Module not found: Error: Cannot resolve module 'bufferutil' in
/Users/zaidhumayun/Desktop/React/react-voting-app/node_modules/socket.io/node_modules/engine.io/node_modules/ws/lib
Module not found: Error: Cannot resolve module 'utf-8-validate' in
/Users/zaidhumayun/Desktop/React/react-voting-app/node_modules/socket.io/node_modules/engine.io/node_modules/ws/lib
Initially, I was getting another error which stated that
Critical dependencies: 75:43-65 the request of a dependency is an
expression # ./~/socket.io/~/engine.io/lib/server.js 75:43-65
However, I got rid of this error by uninstall socket.io#1.6.0 and installing socket.io#1.4.4 as suggested by this github issue
https://github.com/webpack/webpack-dev-server/issues/212
But, what happened was that the warning was just replaced with a different one. The first one given in the previous list.
After looking through the stack trace of the original error where it says, read is not a function(screenshot of the stack trace below), it looks like the error is in the read module not being required properly or not importing correctly.
Here are the two lines of code pertinent to the issue I found in Server.serverClient
var read = __webpack_require__(/*! fs */ 323).readFileSync;
clientSource = read(/*require.resolve*/(/*! socket.io-client/socket.io.js */ 468), 'utf-8');
The second line is where the error appears.
I am guessing this has something to do with the third warning which stated the module utf-8-validate could not be resolved.
How do I fix this issue? Or is there a workaround to it?