Building files in nested folder in parcel js - parceljs

I am using parcel js to bundle a simple web application. My project structure looks like this:
package.json
index.html
contact-us.html
/css
main.css
/projects
project-evergreen.html
package.json looks like this:
{
"scripts": {
"dev": "parcel index.html contact-us.html projects/project-evergreen.html",
"build": "parcel build index.html contact-us.html projects/project-evergreen.html",
},
"name": "demo-website",
"version": "1.0.0",
"license": "MIT",
"devDependencies": {
"parcel-bundler": "^1.12.5",
"sass": "^1.22.7",
"parcel-plugin-static-files-copy": "^2.6.0"
},
"dependencies": {
"express": "^4.17.1",
"jquery": "^3.6.0"
},
"staticFiles": {
"staticPath": [
{
"staticPath": "img",
"staticOutDir": "img"
}
]
}
}
I am loading resource files in html files as:
index.html
<link rel="stylesheet" href="/css/main.css" />
/projects/project-evergreen.html
<link rel="stylesheet" href="/css/main.css" />
I am running yarn build to build this project.
In this setup while index.html file is getting build fine but while building "projects/project-evergreen.html" I am getting this error:
/Users/manish/Projects/demo-website/projects/css/main.css:undefined:undefined: ENOENT: no such file or directory, open '/Users/manish/Projects/demo-website/projects/css/main.css'
I am not sure how to configure parcel for this use case. I have already seen all the documentation but unable to find how to tell parcel to search for css file from project root not from the path where html file is present.

Related

NWJS - "No files matching" error when trying to package app

I'm trying to package an NWJS app following various tutorials on YouTube and the web. But I'm getting "No files matching" error and it exits. Assuming it was because the dist/ and src/ directories hadn't been created, I created them myself, but I still get the error. All other paths listed in package.json exist.
After searching the web for a similar issue, the only thing I found was this:
https://github.com/nwutils/nw-builder/issues/190
However, this is regarding doing the build using command line args, rather than from package.json.
npm and nodejs were updated to latest version and nwjs was updated to 0.64.0-sdk.
I am attempting the build on MacOS 10.13.6, nodejs version 16.15.0, npm version 8.5.5 .
Any ideas anyone?
Thanks!
Kevin
CLI:
15:40:55 : ~/ReolinkNWJS
npm run prod
> ReolinkNWJS#0.0.1 prod
> nwbuild --platforms osx64 --buildDir dist/ src/
No files matching
15:41:00 : ~/ReolinkNWJS
ls
dist icons javascript package-lock.json package.json.TEMPLATE src
html images node_modules package.json resources styles
package.json:
{
"name": "ReolinkNWJS",
"description": "Reolink Client App In NWJS Framework",
"version": "0.0.1",
"icon": "icons/app.icns",
"main": "html/main.html",
"chromium-args": "--enable-logging=stderr --enable-spell-checking",
"window": {
"toolbar": false,
"width": 800,
"height": 500,
"position": "center"
},
"nodejs": true,
"node-remote": "*://*",
"scripts": {
"prod": "nwbuild --platforms osx64 --buildDir dist/ src/"
},
"devDependencies": {
"nw": "^0.64.0-sdk",
"nw-builder": "^3.7.0"
}
}
I think you either need to remove your src/ or move it to the front
"prod": "nwbuild --platforms osx64 --buildDir dist/"
"prod": "nwbuild src/ --platforms osx64 --buildDir dist/"
Also, either remove or change your node-remote. It is currently set up so that any webpage on the internet has complete control to run Node, meaning they can easily read the contents of all files on the computer, download virus.exe, delete all files, whatever, literally anything. Don't do that.
node-remote is almost exclusively used to point to http://localhost:8080, or some other port, for a local webserver your app runs on. Your main is pointing to a local file, not a webserver, so you likely do not need node-remote at all.
You probably want to move the "icon" at the root into the "window" sub object.
https://nwjs.readthedocs.io/en/latest/References/Manifest%20Format/#window-subfields

How To Use Babel Polyfill for Promises?

Hello I am new to using Babel to transpile and polyfill my code to work for older browsers like Edge and IE. I am currently having an issue with polyfilling my code for Promises. I check in Edge and the error I am receiving is:
Error in created hook: "TypeError: Object doesn't support property or
method 'finally'
So the issue is with the finally method in my Vue app. In my app I am using Axios to get data from an API.
So I was going through the steps here: https://babeljs.io/setup.html#installation under the CLI instructions. My package.json file currently looks like so:
{
"name": "job-filtering",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/plugin-transform-regenerator": "^7.0.0",
"#babel/preset-env": "^7.2.3"
},
"dependencies": {
"#babel/polyfill": "^7.2.5"
}
}
and my .babelrc file looks like:
{
"presets": ["#babel/preset-env"],
"plugins": ["#babel/plugin-transform-regenerator"]
}
and so when I use npm run build in my command line it does transpile my code for what it can, but it does not polyfill things like the finally method in my promise.
I've been trying to search to find an answer, but I can't seem to find anything that is what I'm looking for.
I tried adding:
import 'babel/polyfill';
to the top of my JS file, but that then spit out an error. I know it's probably something small that I'm missing to allow babel to polyfill my JS, but I can't seem to find a solution.

TS lint plugin for VS code doesn't track closed files

I'm using VSCode 1.17.2, and using tslint plugin with it to track lint errors. As of now it is working fine with opened files and showing errors on files with red marker and giving error in problems tab. But it is not tracking closed files. Am I missing any configuration? Currently I am using default configuration.
See the documentation for the extension:
The extension lints an individual file only. If you want to lint your
entire workspace or project and want to see the warnings in the
Problems panel, then you can:
use gulp that or define a script inside the package.json that runs
tslint across your project.
define a VS Code task with a problem matcher
that extracts VS Code warnings from the tslint output.
For example, here is an excerpt from a package.json file that defines
a script to run tslint:
{
"name": "tslint-script-demo",
"version": "1.0.0",
"scripts": {
"lint": "tslint tests/*.ts -t verbose"
},
"devDependencies": {
"typescript": "^2.2.2",
"tslint": "^5.0.0" }
}
Next, define a Task which runs the npm script with a problem matcher
that extracts the tslint errors into warnings.
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "lint",
"problemMatcher": {
"base": "$tslint5",
"fileLocation": "relative"
}
}
]
}
Finally, when you then run the tslint task you will see the warnings produced by the npm script in the Problems panel and you can
navigate to the errors from there.
Here is the complete setup example setup.

How do I use .babelrc to get babel-plugin-import working for antd?

I'm new to react, babel, and antd.
I installed react and started a project using create-react-app.
I installed antd (ant.design). It suggests using babel-plugin-import, so I installed that too.
If I interpret it right, the usage documentation for babel-plugin-import says to put this in a .babelrc file:
{
"plugins": [
["import", {
"libraryName": "antd",
"style": true
}]
]
}
I'm having trouble getting it to work. My web console still has the warning:
You are using a whole package of antd, please use
https://www.npmjs.com/package/babel-plugin-import to reduce app bundle
size.
I didn't have a .babelrc file in my project's directory, so I created one with the above contents and restarted my server (npm start). That didn't work, so I created one in myProject/node_modules/babel_plugin_import but that doesn't work either.
Where is that code snippet supposed to go?
At the bottom of https://github.com/ant-design/babel-plugin-import it says
babel-plugin-import will be not working if you add the library in
webpack config vender.
But I don't know what that means.
I asked another question here: How to get antd working with app created via create-react-app?
Maybe this problem has something to do with my project created via create-react-app??
[Update 2018-02-06: The answer is still correct, but there is a better alternative now, which is to use react-app-rewired. This is also documented in the link.]
You need to follow the instructions in https://ant.design/docs/react/use-with-create-react-app#Import-on-demand to a T.
You should not create ant .babelrc files or similar. When using CRA all babel config is handled inside the webpack config files.
First clean up the config files you created, and make sure you have babel-plugin-import installed.
Then eject your app: npm run eject
This will give you a config folder with 2 webpack config files for dev/prod environments.
Open those files and locate the place where you need to insert the plugins property as documented on the instructions page.
Just add what babel-plugin-import documentation says, but remember if you're using CRA, you cannot change babel configuration directly without ejecting the project.
If you don't want to eject, you can use #craco/craco, and put the babel configuration inside of it like this:
/* craco.config.js */
module.exports = {
babel: {
presets: [],
plugins: [
[
"import",
{
libraryName: "antd",
style: true, // or 'css'
},
],
],
loaderOptions: {
/* Any babel-loader configuration options: https://github.com/babel/babel-loader. */
},
},
};
Dont forget to change your scripts (more details in craco docs):
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "craco start",
- "build": "react-scripts build",
+ "build": "craco build"
- "test": "react-scripts test",
+ "test": "craco test"
}

How do I tell Visual Studio Code about the relative path

I am creating a react-app using the create-react-app tool so it uses webpack for module bundling. Having the following directory structure
-my-app
--node_modules
--src
---components
----somecomponent
-----SomeComponent.jsx
----someothercomponent
-----SomeOtherComponent.jsx
----main.js
----public
To avoid many ../../ (dot dot slashes for the relative path) I have set a NODE_PATH=./src as shown below in my package.json
"scripts": {
"start": "NODE_PATH=./src react-scripts start",
"build": "NODE_PATH=./src react-scripts build",
}
So I can now import my modules in my like this
import SomeComponent from "/components/somecomponent/SomeComponent"
So even changing the directory structure will not break my code as often. But with this my VSCode doensn't recognise paths and thus doesn't show the intellisense, how do I fix it?
I work on JS and TS support for VSCode. For this use case, I think you have a few options:
Create a jsconfig.json in the root of your project and use baseUrl:
{
"compilerOptions": {
"baseUrl": "./src"
}
}
This should allow for imports such as:
import SomeComponent from "components/somecomponent/SomeComponent"
Alternately, use the paths property:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
}
}
}
this would allow imports of the form:
import SomeComponent from "~/components/somecomponent/SomeComponent"
You can find more details about these configuration options here