I followed the instructions of this tutorial (https://youtu.be/KFyRLxiRKAc) and rewatched it several times but somehow it won't work for me. After I reopen the folder in the devcontainer and run npm start, the app is loading for several minutes until the browser opens localhost:3000 and presents the app. Now if I'm editing Code of the app, like changing the text of the create-react-app it won't reload at all. To detect changes I would have to restart the container but even that would take several minutes.
How can I solve the issue?
EDIT: I already tried setting CHOKIDAR_USEPOLLING=true and FAST_REFRESH=false but neither of them makes a difference
.devcontainer/.env
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
.devcontainer/devcontainer.json
{
"name": "Node.js",
"build": {
"dockerfile": "Dockerfile",
"args": {
"VARIANT": "16-bullseye"
}
},
"settings": {},
"extensions": [
"dbaeumer.vscode-eslint"
],
"forwardPorts": [
3000
],
"postCreateCommand": "npm install && npm start",
"runArgs": [
"--env-file",
".devcontainer/.env"
]
}
.devcontainer/Dockerfile
ARG VARIANT="16-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
You should do little bit of search in this forum. I'm quoting the answer:
Adding a .env file in the base path of the project and inside add
FAST_REFRESH=false.
This disables fast refresh and returns to hot reload.
Related
We have a Laravel 8 application with Laravel Mix 6.0.49 and a React frontend. The application runs inside a docker container in production and development. Up until now, the frontend was compiled outside the docker container for some reason, but since we are moving to a fully dockerized environment, we are required to call the frontend scripts from inside the container. This all works fine, except for an environment variable we are setting in package.json, which allows us to pass the version of the app as a mix variable. Here is the current setup:
// package.json
"version": "0.1.1",
"scripts": {
...
"watch": "cross-env APP_VERSION=$(node -pe 'require(\"./package.json\").version') mix watch",
...
// .env
...
MIX_APP_VERSION="${APP_VERSION}"
...
// MyComponent.jsx
...
<div>version {process.env.MIX_APP_VERSION}</div>
...
The environment variable worked fine when the watch script was called outside the docker container.
Has anyone any idea of why it suddenly does not work anymore? I'm open to other ways of approaching this too.
I fixed this issue in the end by removing the variable related stuff from package.json including the cross-env dependency and setting the environment variable through the webpack config instead (webpack.mix.js)
...
.webpackConfig({
plugins: [
new webpack.DefinePlugin({
'process.env.APP_VERSION': JSON.stringify(
process.env.npm_package_version,
),
}),
],
})
I did not change my package.json nor my next.config
"scripts": {
"dev": "NODE_OPTIONS='--inspect' next dev",
...
}
But I now get react_devtools_backend.js:4049 in my console on Chrome instead of the file and line of my console.log.
On NextJS DOC it says
Source Maps are enabled by default during development.
I am currently on nextJS v11.0.0
Any idea what changes was made which broke the source map ?
It works fine on Firefox though.
Answer given from #oleics
disabling react-dev-tools "fixes" this for me
The code in question is very simple. I have an "app" folder with a server directory inside. I open a terminal. I cd into app. I then type npx create-next-app client. next installs. I change directory to app/client. I run npm run dev.
I get this in console...
Error: Your custom PostCSS configuration must export a plugins key.
I tried with earlier version of create-next-app. Same. Tried with other installation on my machine. Same.
Is there any way to find out what postcss next thinks is being used?
Can i add a config to fix it?
Okay, I found the answer! I added a practically empty postcss.config.json.
{
"plugins": [
]
}
First, I tried using the exact example, "default", from the nextjs docs...
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
That didn't work. Then I erased the json data leaving just an empty plugins array. Worked.
But why...
I understood that Ionic cannot handle 'yarn workspace' which build the project with react-app-rewired https://github.com/ionic-team/ionic-cli/issues/4430
As suggested in this post, I configure my monorepo with the multi-app option( https://ionicframework.com/docs/cli/configuration#multi-app-projects)
To valide the project structure, I firstly tried to share a simple constants.
import * as ROLES from '../../../../lib/constants'
but when I launch ionic serve --project=app
Have got this error :
Module not found: You attempted to import ../../../../lib/constants
which falls outside of the project src/ directory. Relative imports
outside of src/ are not supported.
Project structure :
ionic.config.json
{
"defaultProject": "myProject",
"projects": {
"app": {
"name": "My First Ionic App",
"type": "react",
"root": "packages/app",
"integrations": {
"capacitor": {}
},
}
}
}
How to manage to share files and components ?
Thank you
Ok, after several day. I have an answer to build monorepo with Ionic & Capacitor !
1 - Build your monorepo with Yarn workspace
this tutorial is simple and clear : https://jibin.tech/monorepo-with-create-react-app/
Then you will use react-app-rewired and not 'react-scripts` anymore
2 - Then do not use ionic serve that use react-scripts
react-app-rewired start
3 - and Capacitor !
The command ionic cap run also use react-scripts then you have to find an alternative
The answer is here https://capacitorjs.com/docs/guides/live-reload : Do not use the Ionic CLI
Capacitor supports CLIs with live reload capability.
Within capacitor.config.json, create a server entry then configure the url field
using the local web server’s IP address and port:
"server": { "url": "http://192.168.1.68:8100", "cleartext": true
},
Bonus : I created a script to automatically update capacitor.config.json
https://gist.github.com/damienromito/e6b3930ffde4c7240f109d1de69febb5
I have added angular-chart.js to my ionic solution, everything works well on emulator as well as device as long as i run with the "-live reload" option enabled, ionic run ios -l -s -c, but as soon as I try to run with it ionic run ios, it just shows a white screen in device and doesn't load at all.
Any clues what could be causing this? I am thinking perhaps its path related? I just cant think of what to do about it.
thanks for the help
I was able to fix this problem by adding the "chartjs":"~1.0.1" line in the bower.json file located at the root of my app.
{
"name": "com.companyname.appname",
"private": "true",
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.0.0-beta.14",
"platform": "~1.3.0",
"chartjs": "~1.0.1"
},
"dependencies": {
"angular-chart.js": "~0.3.14"
}
}