I thought i had figured out what the problem was but alas, i did not. When running my build script yarn build or even npm run build the script builds just fine but the process never completes and just hangs... Does anyone have an idea on how to go about troubleshooting this sort of problem?
here's my package.json
{
"name": "stars-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"bulma": "^0.5.1",
"custom-react-scripts": "0.2.0",
"firebase": "^4.3.0",
"font-awesome": "^4.7.0",
"lodash": "^4.17.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-feather": "^1.0.7",
"react-router-dom": "^4.2.2",
"styled-components": "^2.1.2"
},
"scripts": {
"start": "NODE_PATH=src react-scripts start",
"build": "NODE_PATH=src react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"firebase-tools": "^3.9.2"
}
}
Related
My site is not mobile friendly when testing with Google Mobile friendly. But actually when accessing it, it is mobile friendly.
What should I do to fix it? I am using Next.js.
Result when I test: https://search.google.com/test/mobile-friendly/result?id=zwleJJ0VXRiIwFagHtBHuA
My package.json:
{
"name": "tintuc",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 8080",
"build": "next build",
"start": "next start -p 8080",
"sitemap": "next-sitemap",
"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
"find:unused": "next-unused",
"depcheck": "npx depcheck"
},
"dependencies": {
"#apollo/client": "^3.3.19",
"#headlessui/react": "^1.4.1",
"#heroicons/react": "^1.0.4",
"date-fns": "^2.25.0",
"deepmerge": "^4.2.2",
"graphql": "^15.5.0",
"highlight.js": "^11.6.0",
"html-react-parser": "^3.0.4",
"lodash": "^4.17.21",
"next": "^12.2.5",
"next-seo": "^4.28.1",
"node-html-parser": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-loading-skeleton": "^2.2.0",
"replace-special-characters": "^1.2.6"
},
"devDependencies": {
"#next/bundle-analyzer": "^11.1.4",
"#types/node": "^18.11.0",
"#types/react": "^18.0.21",
"autoprefixer": "^10.3.6",
"next-pwa": "^5.6.0",
"next-sitemap": "^3.1.29",
"next-unused": "^0.0.6",
"postcss": "^8.3.8",
"tailwindcss": "^2.2.16"
}
}
I want to use react-native-aes-crypto but it need react-native. I install it but it continue to say that it can't find it.
I have try to reinstall it, add his dependencies but nothing work.
My package.json:
{
"name": "neko_web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome": "^1.1.8",
"#fortawesome/react-fontawesome": "0.0.20",
"#trendmicro/react-sidenav": "^0.4.5",
"ajv": "^6.5.1",
"create-react-app": "^1.5.2",
"font-awesome": "^4.7.0",
"moment": "^2.22.2",
"react": "16.3.1",
"react-cookie": "^2.2.0",
"react-dom": "^16.4.0",
"react-icons-kit": "^1.1.5",
"react-moment": "^0.7.7",
"react-native": "^0.55.4",
"react-native-aes-crypto": "^1.2.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-sidenav": "^2.1.3"
},
"scripts": {
"start": "PORT=3005 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
The error is getting when I do import Aes from 'react-native-aes-crypto'
UPDATE 1:
I have tried to change version of react-native to 0.55.0, no more audit fix to do but it display the same error.
Install the package react-native-cli for fix that.
If you want an another package who doesn't require react-native, use simple-encryptor.
I did a build for a React app using npm run-script build and I need to run it. Using npm run webpack is returning an error. Excuse my being very new to React but I really need to know how to run this app. I hope you can help!
My package.json:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"downloadjs": "^1.4.7",
"fast-memoize": "^2.2.8",
"flow-bin": "^0.52.0",
"lodash": "^4.17.4",
"mapbox-gl": "^0.39.1",
"material-ui": "^0.18.7",
"moment": "^2.18.1",
"node-sass-chokidar": "^0.0.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-mapbox-gl": "^2.5.0",
"react-redux": "^5.0.5",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-router-redux": "next",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"react-emotion": "^7.2.2",
"react-scripts": "1.0.10",
"styled-components": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow"
}
Here are the folders and files of the built app
As I mentioned in comments.
npm run build uses react-scripts to create a build for you
To run in production:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow",
"start:prod": 'node dist/app.js'
}
By looking at "react-scripts": "1.0.10", it seems you created the app using create-react-app.
create-react-app is using yarn by default. So you can run yarn then yarn build (same as npm install and then npm run build)
If you need change webpack configuration. The app have eject first. You can do it by yarn eject. And then you can edit the webpack config file.
Does this help?
Are you using create-react-app? If yes then run "npm run build" in your root folder. This command will run your app
I am using the Airbnb lint settings for my react app
and the line
import React from 'react';
Gives the error
Missing file extension for "react" (import/extensions)
Any idea how to fix this?
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.17.1",
"firebase": "^4.6.2",
"jquery": "^3.2.1",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"sass": "sass --watch src/styles/scss:src/styles/css",
"sass:build": "sass src/styles/scss:src/styles/css"
},
"devDependencies": {
"eslint": "^4.12.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1"
}
}
In the rules object of your .eslintrc set "import/extensions" to never or 0 to avoid this.
You should check if you have eslint-plugin-import installed, Airbnb style guide configuration uses it to handle linting of imports and exports. If you don't have it, it results in the error Unable to resolve path to module '_module-name_' and/or Missing file extension for "_module-name_" (import/extensions).
Also since you have it installed in dev-dependencies, you can run something like ./node_modules/.bin/eslint . or setup eslint globally to just run eslint .
So I can get the data if I npm run build my app and run it via it's usual address. But with npm start it doesn't know/(can't reach) the specified location.
So how might I go about doing this so it can work both ends?
package.json
{
"name": "reactjs",
"version": "0.1.0",
"private": true,
"homepage": "/reactjs/build",
"devDependencies": {
"lite-server": "^2.2.2",
"react-scripts": "0.8.4"
},
"dependencies": {
"datatables.net": "^1.4.2",
"datatables.net-dt": "^1.4.2",
"griddle-react": "^0.7.1",
"jquery": "^3.1.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0"
},
"scripts": {
"start": "react-scripts start eslint-disable",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"dev": "lite-server -c config/bs-config.js"
}
}
Add proxy to it e.g.
"homepage": "/reactjs/build",
"proxy": "http://localhost/supermarkets