I am new to gatsby. I went through the process of adding gatsby-source-filesystem to gatsby-config.js and I gave it the proper path to where my first test .md file is:
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `$(__dirname)/src/posts`
}
}
However, I keep getting the following error:
The path passed to gatsby-source-filesystem does not exist on your file system: `${__dirname}/src/`
Please pick a path to an existing directory
Can somebody help me understand why this isn't working?
Related
I have configured eslint for my typescript node project. There is also a file app.d.ts in the repo. On running the lint, I get the following error
error Parsing error: "parserOptions.project" has been set for #typescript-eslint/parser.
The file does not match your project config: src/app.d.ts.
The file must be included in at least one of the projects provided
I have already tried creating tsconfig.eslint.json and its contents are as follows
{
"extends": "./tsconfig.json",
"include": [ "src/**/*.d.ts", "src/**/*.ts", "src/**/*.unit.test.ts", "jest.config.js", "__tests__/**/*.int.test.ts"],
}
And in the .eslintrc.js, I added the parser option
parserOptions: {
sourceType: 'module',
project: './tsconfig.eslint.json',
tsconfigRootDir: './',
},
But Im still getting this error. What am I missing. Any help would be appreciated.
Does the name of your declaration file shadow a typescript file of the same name?
If so you will get this error. Declaration files are for providing types for javascript files so there isn't the need to provide one for a file written in typescript.
My Visual Studio Code extension uses the node module highlight.js which comes with a folder full of CSS files. These provide colour schemes for syntax colouring. It has become necessary to bundle some of the CSS files.
It's about bundling an asset
The objective is to bundle a CSS file and at run-time access the file content as a string. If that can be achieved without an import statement that would be perfect. Normally, how exactly one accesses the content of the bundled file would be a separate question, but I have a feeling that content retrieval and how one should go about bundling the asset are closely entwined.
I freely admit to having a weak understanding of WebPack.
The story so far
The bundler is specified in package.json as "webpack": "^5.4.0" but I don't know how to ascertain what is actually present. It is conceivable that there is something wrong with my setup: when I try to run webpack --version on a command prompt in the project folder, it responds
CLI for webpack must be installed.
webpack-cli (https://github.com/webpack/webpack-cli)
We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no):
The first time this happened I responded yes. After a flurry of installation and another try the same thing happened. However, vsce package has no trouble using webpack for a production build and pressing F5 to debug successfully puts together a development build in a dist folder with an unminified file I can examine (which is how I know the file mentioned below is being bundled).
Moving on from there I've modified webpack.config.js like so
//#ts-check
'use strict';
const path = require('path');
/**#type {import('webpack').Configuration}*/
const config = {
target: 'node', // vscode extensions run in a Node.js-context -> https://webpack.js.org/configuration/node/
entry: './src/extension.ts', // the entry point of this extension, -> https://webpack.js.org/configuration/entry-context/
output: {
// the bundle is stored in the 'dist' folder (check package.json), -> https://webpack.js.org/configuration/output/
path: path.resolve(__dirname, 'dist'),
filename: 'extension.js',
libraryTarget: 'commonjs2',
devtoolModuleFilenameTemplate: '../[resource-path]'
},
devtool: 'source-map',
externals: {
vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, -> https://webpack.js.org/configuration/externals/
},
resolve: {
// support reading TypeScript and JavaScript files, -> https://github.com/TypeStrong/ts-loader
extensions: ['.ts', '.js', '.css']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
}
]
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
module.exports = config;
As you can see there are rules and loaders for CSS.
When I add this import
import "../node_modules/highlight.js/styles/atelier-dune-light.css";
webpack happily builds the bundle and when I inspect it I can find the bundled CSS.
However, when I try to load the extension in the extension debug host, it fails to load, with this message.
Activating extension 'pdconsec.vscode-print' failed: document is not defined.
Enabling break on caught exceptions reveals this rather surprising exception.
Exception has occurred: Error: Cannot find module 'supports-color'
Require stack:
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\node_modules\debug\src\node.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\node_modules\debug\src\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\get-uri\dist\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\vscode-proxy-agent\out\agent.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\node_modules.asar\vscode-proxy-agent\out\index.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
OK, so activation failed because the loader barfed. But WTF does importing CSS have to do with support-color?
Remove the import and it runs just fine. I really don't know how to respond to this; it's not clear to me why a demand for a stylesheet should cause that error. At this point I look to others for guidance and advice.
Remove style-loader from webpack.config.js to fix the error.
Pull the CSS as a string like this. Note the abbreviated path.
const cssPath: string = "highlight.js/styles/atelier-dune-light.css";
const theCss: string = require(cssPath).default.toString();
You do not need the import statement, the use of require will cause Webpack to bundle the files, but you still have to remove style-loader to avoid the loader error.
Let's make clear once again: I don't need process.cwd in this question, I need
to access to absolute path of source project. E.g:
Source code: C:\Users\user1\projects\lib1\src\library.ts (becomes to Node Module in the future)
Project that uses Library: C:\Users\user1\projects\someProject\src\someProject.ts
So, I need to get the C:\Users\user1\projects\lib1\src inside library.ts.
I tried:
webpack.config.js
module.exports = {
// ...
target: 'node',
externals: [nodeExternals()],
plugins: [
new Webpack.DefinePlugin({
__PROJECT_ROUTE_ABSOLUTE_PATH__: __dirname
})
]
};
project-types.d.ts
declare var __PROJECT_ROUTE_ABSOLUTE_PATH__: string;
If to try console.log(__PROJECT_ROUTE_ABSOLUTE_PATH__) in library.ts, below invalid JavaScript
will be produced:
console.log(C:\Users\user1\projects\lib1);
The path is correct, but quotations are missing. I don't know how to explain it.
But anyway, how we can get right path?
There is also a strange phenomena: if to invoke __dirname, just / will be returned, so path.resolve(__dirname, 'fileName') givesC:\fileName `
You can directly use the node.js path module which is in built.
The path module provides utilities for working with file and directory paths. It can be accessed using:
const path = require('path');
__filename is the file name of the current module. This is the resolved absolute path of the current module file. (ex:/home/user/some/dir/file.js)
__dirname is the directory name of the current module. (ex:/home/user/some/dir)
fs.readFile(path.resolve(__dirname + 'fileName'))
This will resolve to the path of the file.
I followed the angular universal guide (https://angular.io/guide/universal)
When I execute:
npm run build:universal
I got this error:
ERROR in ./server.ts Module not found: Error: Can't resolve './dist/server/main.bundle' in ... # ./server.ts 16:9-45
npm run build:client-and-server-bundles
works fine but
npm run webpack:server
fails
Question: Is it normal, that no dist folder is created when I execute the command?
For anyone who comes across this. In Angular 6, 'bundle' no longer appears in the filename. Check your server.ts file against this version: https://angular.io/guide/universal
For example, this line used to include "main.bundle":
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
Need to change path inside file tsconfig.server.json
From
"files": [
"src/main.server.ts",
"server.ts"
],
TO
"files": [
"main.server.ts",
"../server.ts"
],
Other configuration should match with
https://github.com/angular/angular-cli/wiki/stories-universal-rendering
One way you can have a relative path like this ../dist/server/main.bundle
Second way to give absolute path use require(join(process.cwd(), 'dist/server/main.bundle'))
I used github.com/angular/angular-cli/wiki/stories-universal-rendering now it works
I am trying out webpack with react. I am trying to use babel-loader to transpile jsx files. I receive module not found error while using any webpack loaders/plugins. I have the required plugins installed in node_modules.
The issue seems to be with the path resolution. Somehow it prepends my current directory to the absolute path while resolving dependent plugins.
Here is my a snippet of my webpack.config.js
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
}
}]
}
It gives following error when I run webpack (globally as well as through npm)
ERROR in ../~/react/lib/ReactDOMNullInputValuePropDevtool.js
Module not found: Error: Cannot resolve module '\\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js' in H:\codebase\react-demo\node_modules\react\lib
resolve module \\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js in H:\codebase\react-demo\node_modules\react\lib
looking for modules in H:\codebase\react-demo\node_modules
resolve 'file' or 'directory' \users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js in H:\codebase\react-demo\node_modules
resolve file
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js doesn't exist
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.webpack.js doesn't exist
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.web.js doesn't exist
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.js doesn't exist
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.json doesn't exist
resolve directory
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js\package.json doesn't exist (directory description file)
H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js doesn't exist (directory default file)
[H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js]
[H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.webpack.js]
[H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.web.js]
[H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.js]
[H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules\process\browser.js.json]
# ../~/react/lib/ReactDOMNullInputValuePropDevtool.js 1:0-102
Here H:\codebase\react-demo\ is my project root directory. I.e node_modules resides in H:\codebase\react-demo\. It is trying to look up for dependency in H:\codebase\react-demo\node_modules\users\home\smeghani\private\codebase\react-demo\node_modules
Any idea what am I missing?
I could work-around the issue. Initially, my project directories were on a mapped network drive. Moving the project directory to local drive (C:/) resolved the issue. Still not sure why it was causing the issue though.