I have used electron builder to create a windows installer. When I install the app, it does not work as one of the JS files is not being found. The file exists in the build/ folder, and the build folder is included in the electron build. It does not find it as it is looking for the file on the C:\ drive, instead of in the installed directory. See screenshot. It looks like the path is not being set for JS files that exist in the root of the build folder.
I have these settings in my package.json file:
"homepage": "./",
"build": {
"appId": "nonExistentID",
"files": [
"build/**/*",
"node_modules/**/*",
"./src/Main.js"
],
"directories": {
"buildResources": "assets"
},
"extends": null
},
Screenshot from Chrome
Related
I inherited a react project that was working on my last computer. But now it can't build on my new computer. Specifically, I forgot how to get the npm start command to know where the project directory is.
For example, let's say I have the following two files:
// src/template/Page.js
import LoginComponent from 'component/Login.js'
// src/component/Login.js
export default function Gallery() { return <div></div>;}
Then when I run npm start, I get the error:
Module not found: Can't resolve 'component/Login.js' in 'src/template/Page.js'
I vaguely remember that on my last computer, I used some hidden file, or possibly the .env file to tell npm to look for all react components under the src/ directory, such that the term src/ can be omitted from all the import statements in the code.
Does anyone know how to tell react or npm to always import components without always spelling out the src/ prefix?
NOTE:
I also see a .vscode directory with these files:
// .vscode/settings.json
{
"editor.snippetSuggestions": "top",
"files.associations": {
"*.js": "javascriptreact"
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": false
},
"compilerOptions": {
"baseUrl": "src"
}
}
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src"
}
]
}
I think these files might be related to my solution last time I got this working
In my package.json, I see these lines:
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
...
Also, my package.json says I'm using "react": "^16.6.1" and my npm -v shows 5.5.1. I don't remember what npm version I was using on my last computer. So not sure if that would matter.
You need a jsconfig.json to configure absolute imports (if you were using TypeScript, you would instead use tsconfig.json). This file is vital to your project working correctly, so you should commit this to source control so you don't have to remake it on each machine:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
I did not know Create React App supported this, I learned something today from your question. Thanks!
Finally got it work. I added this line to my .env file:
NODE_PATH=src
And then everything worked. Taken from documentation here: https://nodejs.org/api/modules.html
If the NODE_PATH environment variable is set to a colon-delimited list
of absolute paths, then Node.js will search those paths for modules if
they are not found elsewhere.
On Windows, NODE_PATH is delimited by semicolons (;) instead of
colons.
NODE_PATH was originally created to support loading modules from
varying paths before the current module resolution algorithm was
defined.
NODE_PATH is still supported, but is less necessary now that the
Node.js ecosystem has settled on a convention for locating dependent
modules. Sometimes deployments that rely on NODE_PATH show surprising
behavior when people are unaware that NODE_PATH must be set. Sometimes
a module's dependencies change, causing a different version (or even a
different module) to be loaded as the NODE_PATH is searched.
Additionally, Node.js will search in the following list of
GLOBAL_FOLDERS:
1: $HOME/.node_modules
2: $HOME/.node_libraries
3: $PREFIX/lib/node
Where $HOME is the user's home directory, and $PREFIX is the Node.js
configured node_prefix.
These are mostly for historic reasons.
It is strongly encouraged to place dependencies in the local
node_modules folder. These will be loaded faster, and more reliably.
So I created a react app using create-react-app toolchain.
Wrote some components and ran
firebase init
npm run build
firebase deploy --only hosting
Now when i inspected my live app in source tab of chrome dev-tools it showed all the source files of react app including comments as it is.
Isn't firebase supposed to deploy only the chunks inside build directory which are optimised and minified for production ?
I ran Network test to see what kind of files are being fetched and amazingly it fetches only the chunks inside build directory. Then how all the files of my src directory also present there in raw form ?
Now chances are maybe browser construct them from chunks. Then it seems a react build problem that doesn't remove comments and uglify in production build.
But i also analyzed the js chunks in my build directory and they don't have comments embedded.
Here is my firebase config :
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
So I found the solution.
And it's not related to firebase hosting.
It's react's build that needs to be configured to solve this problem.
Basically, We have to stop react build generating source map.
It looks like these source map inside build directory contains our raw js files that get deployed to firebase.
Change your react build command in package.json to
"build": "GENERATE_SOURCEMAP=false react-scripts build",
We have a react app in Visual Studio 2017 that shows the following warning messages for every .js file in the project "(ESLint) Cannot find module 'eslint-config-react-app'...". We have the react-scripts package installed that pulled in the eslint-config-react-app package as well. We have tried to install it ourselves in the local projects package.json as well as a global package.
No matter what we do these errors will not go away.
UPDATED:
The project folder structure is:
Project
ClientApp
public
src
packages.json
Controllers
Pages
I have tried putting the following in the packages.json file:
"eslintConfig": {
"extends": "react-app"
}
I have tried creating a .eslintrc file in the ClientApp folder as well as moving to the project root folder so it sits at the same level as the ClientApp folder. In the file I had the following:
{
"extends": "react-app"
}
I also tried the following in the .eslintrc file:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
}
When I did this my error changes to "
(ESLint) ESLint encountered a parsing error.
I found the solution. I removed all .eslintrc files and also removed the ESLint config section of the packages.json file. Then I went into Tools...Options in Visual Studio and searched for ESLint. I then clicked on the button "Reset global .eslintrc". Finally I closed and re-opened the solution and everything is now working as expected.
This happened to me, but it was:
Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'
I didn't have a .eslintrc in the website root!!! So I added one (there are lots of examples of what it must contain)
I have built an application using the create-react-app version 2.0 locally. It runs, builds and works as expected. I am trying to deploy it to Zeit, using now. It works fine when I run the now command from withing the generated ./build folder (npm run build's destination).
My goal is to integrate it with GitHub so it updates the deployment on git push. Unfortunately, running now at the project's root folder doesn't work. I have a now.json file with the following contents:
{
"version": 2,
"name": "somename",
"builds": [
{
"src": "package.json",
"use": "#now/static-build"
}
],
"routes": [
{
"src": "^/static/(.*)",
"dest": "/static/$1"
},
{
"src": ".*",
"dest": "/index.html"
}
]
}
and my package.json contains the "now-build": "serve --single ./build" script.
The error
Every build attempt from the root folder results to this error:
Tries
I have tried changing the now-build to now-start and it didn't work, as it specifically needs now-build, I have tried removing the now.json altogether and it didn't work and every YouTube video I found on the issue doesn't do anything different but it works for them.
Any ideas?!
It turns out that the build command is wrong. The correct one is:
"now-build": "npm run build && mv build dist" in the package.json.
More info: https://github.com/zeit/now-examples/tree/master/create-react-app
I'm using lite server for developing my Angular projects. It depends on and uses BrowserSync to do most of the work (serving the site to localhost, live reload etc).
Currently, I have a config file bs-config.json in my root for this module:
{
"injectChanges": true,
"files": ["./**/*.{html,css,js,png,jpg,svg,gif}"],
"watchOptions": {
"ignored": [
"node_modules",
"src/**/*.*",
"app/**/*.js"
]
}
}
Then in my package.json I have a script to execute it, referring to the config file:
{
"version": "1.0.0",
"scripts": {
"dev": "lite-server -c bs-config.json"
},
"devDependencies": {
"lite-server": "~2.2.0"
}
}
Works great. But ideally I don't want a config file in the root of my project that isn't used in production. Is it possibly to extend the script in my package.json to execute the config inline with the command?
Unfortunately, its not possible to extend the dev script in your package.json to execute the config inline when using lite-server.
If you don't want a config file in the root of your project, you would simply place it elsewhere in your project (i.e., in a folder called configs) and provide a custom path to your config file via -c or --config run time options. So your dev script will be "lite-server -c configs/bs-config.json".
Check out this GitHub issue: Command line arguments no longer supported?