I have been browsing the web to find an answer to my problem. I made a fresh react app, and if I make changes to app.js file - nothing happens. I have to run the 'npm start' command to see any changes in App.js and index.js files ( index.html updates changes after refresh ).
Anyways, I tried a few things such as adding a start script to package.json
FAST_REFRESH=fast npm start
as well as making a .env file with
FAST_REFRESH=fast
and even installing custom npm/webpack react refresh packages, or making a new project in a different directory. But it refuses to comply!
I'm on Windows.
I'm looking for any other ideas on how to fix this problem.
EDIT:
Package.json
{
"name": "practice-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "FAST_REFRESH=false vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.1.0",
"typescript": "^4.6.4",
"vite": "^3.1.0"
}
}
Package-lock.json
"name": "practice-project",
"version": "0.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "practice-project",
"version": "0.0.0",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.1.0",
"typescript": "^4.6.4",
"vite": "^3.1.0"
}
},
EDIT2:
Ok, I got it to work on my WSL/Ubuntu. No idea why it didn't want to work on windows though.
Related
So I'm using Vite with React, and working fine until this morning. When I run npm run dev local server starts normally, and there is no error/warning in the console. However in the browser console, I see this warning,
Something has shimmed the React DevTools global hook (__REACT_DEVTOOLS_GLOBAL_HOOK__). Fast Refresh is not compatible with this shim and will be disabled.
and hot reload is not working. Whenever I change something I have to manually refresh the browser window to see the changes. Any help?
my package.json file:
{
"name": "test",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#capacitor/android": "^4.6.3",
"#capacitor/browser": "^4.1.1",
"#capacitor/core": "^4.6.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1"
},
"devDependencies": {
"#capacitor/cli": "^4.6.3",
"#types/react": "^18.0.27",
"#types/react-dom": "^18.0.10",
"#vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.6",
"vite": "^4.1.0"
}
}
I'm trying to setup a component testing strategy for a new react repo that we are working on here.
Based on Cypress documentation there are no useful details about how to configure component testing using a custom dev server like this.
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer(cypressConfig) {
// return dev server instance or a promise that resolves to
// a dev server instance here
},
},
})
My package.json looks like this one:
"source": "src/index.ts",
"exports": {
"require": "./dist/index.cjs",
"default": "./dist/index.modern.js"
},
"main": "./dist/index.cjs",
"module": "./dist/index.module.js",
"unpkg": "./dist/index.umd.js",
"typings": "dist/index",
"scripts": {
"build": "microbundle",
"dev": "microbundle watch",
"pretty": "prettier --config .prettierrc 'src/**/*.(ts|tsx)' --write",
"test": "jest",
"ci:start-example": "cd example; npm start",
"cy:open": "npx cypress open"
},
"dependencies": {
"react-style-object-to-css": "^1.1.2"
},
"peerDependencies": {
"react": "16 - 18",
"react-dom": "16 - 18"
},
"devDependencies": {
"#testing-library/cypress": "^8.0.3",
"#types/jest": "^28.1.6",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.31.0",
"#typescript-eslint/parser": "^5.31.0",
"cypress": "^10.3.1",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"jest": "^28.1.3",
"microbundle": "^0.15.0",
"prettier": "^2.7.1",
"ts-jest": "^28.0.7",
"typescript": "^4.7.4"
},
"files": [
"dist"
]
}
Is there someone facing the same issue with custom dev servers?
I'm not too familiar with microbundle and setting this up comparing with webpack or vite. Would appreciate any help please!
I've been learning Webpack to transition from Bower. I've built a basic Angular(1.6.6) app on NodeJS(8.9.1) using Webpack(3.8.1) and Yarn(1.3.2); however, I get "Internal Server Error" when run on Heroku. Deploys fine, though, and works perfectly in localhost.
In my research, I've learned that Webpack needs to be in dependencies instead of devDependencies. Fixing this may have prevented other errors, but I have the same problem.
Heroku logs blame ejs, but I doubt that is the real problem:
Error: Could not find include include file.
at includeSource (/app/node_modules/ejs/lib/ejs.js:276:17)
at getIncludePath (/app/node_modules/ejs/lib/ejs.js:152:13)
at /app/node_modules/ejs/lib/ejs.js:629:26
at Array.forEach ()
at Template.generateSource (/app/node_modules/ejs/lib/ejs.js:605:15)
at Template.compile (/app/node_modules/ejs/lib/ejs.js:509:12)
at Object.compile (/app/node_modules/ejs/lib/ejs.js:358:16)
at handleCache (/app/node_modules/ejs/lib/ejs.js:201:18)
at tryHandleCache (/app/node_modules/ejs/lib/ejs.js:223:14)
at View.exports.renderFile [as engine]
(/app/node_modules/ejs/lib/ejs.js:437:10)
My package.json:
{ "name": "Simple Project",
"version": "0.1.0",
"description": "Simple Project",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "node server.js",
"postinstall": "webpack -p",
"heroku-prebuild": "webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Simple/Project.git"
},
"keywords": [],
"author": "Name",
"license": "MIT",
"bugs": {
"url": "https://github.com/Simple/Project/issues"
},
"homepage": "https://github.com/Simple/Project#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"ng-annotate-loader": "^0.6.1",
"node-sass": "^4.6.1",
"normalize.css": "^7.0.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2"
},
"dependencies": {
"angular": "^1.6.6",
"angular-animate": "^1.6.6",
"angular-resource": "^1.6.6",
"angular-route": "^1.6.6",
"angular-ui-bootstrap": "^2.5.6",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.2.1",
"webpack": "^3.8.1"
},
"engines": {
"node": "^8.9.1",
"yarn": "^1.3.2"
}}
I've set Webpack to put all .js, vendor files, and styles into /dist which is .gitignore(d) in my git, but NOT in my push to Heroku. You can check out my git here:
https://github.com/SalamanderMike/portfolio
I've been researching this for a couple days and the answer hasn't revealed itself. I'm hoping someone can help me figure it out. I'm sure it's a simple thing I am overlooking. Thanks for your help!
I'm trying to build a very simple react-native app to test react-navigation. It works fine until I install react-navigation and load the following code.
import { StackNavigator } from 'react-navigation';
Upon running, it gives me the message "unable to resolve module
'react/lib/ReactComponentWithPureRenderMixin' from 'Users/me/Desktop/Code/flexbox/node_modules/react-navigation/src/views/Header.js'..." despite the file actually existing at that location when I navigate to it manually. I've tried the clearing watchman, deleting / reinstalling the modules, and resetting the packager cache many times. Any thoughts? My package.json below.
{
"name": "flexbox",
"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.6",
"react-native": "0.43.3",
"react-navigation": "^1.0.0-beta.7"
},
"devDependencies": {
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "19.0.2",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}
You need to change your dependency to this
{
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"
}
As discussed in this ticket: https://github.com/react-community/react-navigation/issues/923
These are my dependencies
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"native-base": "^0.5.4",
"react": "15.3.1",
"react-native": "0.32.0",
"react-native-drawer": "^2.2.6",
"react-native-easy-grid": "^0.1.6",
"react-native-maps": "^0.8.0",
"react-timer-mixin": "^0.13.3",
"rn-viewpager": "^1.1.3",
"color":"0.11.3",
"underscore":"1.8.3",
"fbemitter":"2.0.2",
"react-native-button":"1.6.0"
}
It was working fine before the installation of "react-native-maps": "^0.8.0"
Any ideas...react-native-maps": "^0.8.0
I have react-native-maps:^0.8.0 installed and Hot Reloading working fine. Make sure you have JS Dev Mode is enabled in Dev Settings.