angular-cli is bundling osenv node_modules since the service ts file is being referenced inside app.component.ts which makes sense. Is there a way I can exclude those node_modules which are file system electronjs specific? Below is the stacktrace
ERROR in ./node_modules/osenv/osenv.js
Module not found: Error: Can't resolve 'child_process' in
'C:\POC\Electron\fileexplorer\node_modules\osenv'
resolve 'child_process' in 'C:\POC\Electron\fileexplorer\node_modules\osenv'
Parsed request is a module
using description file:
C:\POC\Electron\fileexplorer\node_modules\osenv\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
I was able to find fix for this issue however I had to use webpack configuration instead of angular-cli below are the steps
1) run ng eject
2) edit webpack.config.js and add "child_process":
'empty' to
"node": {
"fs": "empty",
"global": true,
"crypto": "empty",
"tls": "empty",
"net": "empty",
"process": true,
"module": false,
"clearImmediate": false,
"setImmediate": false,
"child_process": 'empty'
},
3) npm run build
Related
My top package.json:
{
"name": "foo",
"version": "0.0.0",
"private": true,
"workspaces": [
"apps/*",
"packages/*"
],
"devDependencies": {
"#foo/eslint-config": "*"
},
"engines": {
"npm": ">=7.0.0",
"node": ">=14.0.0"
},
"dependencies": {},
"packageManager": "npm#8.18.0"
}
and I have a package in packages/#foo/eslint-config.
However, when I do npm install, I get an error saying that #foo/eslint-config is not in the registry.
I am assuming that I have either wrong directory structure.
Figured it out.
The package should have gone directly to packages/eslint-config directory.
The package name still needs to have the scope, i.e. #foo/eslint-config.
It appears that workspaces do not use the same convention of nesting scoped packages under a sub-directory as node_modules do.
It also appears that the folder name has no significance, as long as it is directly in the directory defined in workspaces configuration and has the correct package name.
Alternatively, you can also just update your workspaces configuration to read from packages/#foo/*.
I want to use rollup to make two builds of my library, an UMD version as well as a never ESM version
Earlier my configuration when using the non official plugin rollup-plugin-typescript2 looked like this:
import typescript from 'rollup-plugin-typescript2'
import pkg from '../package.json'
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'umd',
name: pkg.name,
sourcemap: true
},
{
file: pkg.module,
format: 'esm',
sourcemap: true
},
],
plugins: [
typescript({
tsconfig: "src/tsconfig.json",
useTsconfigDeclarationDir: true
}),
],
}
And in my package json I have:
(...)
"scripts": {
"build": "rollup -c ./scripts/dist.js",
},
"main": "dist/index.js",
"module": "dist/index.esm.js",
"files": [
"dist"
],
(...)
And in my tsconfig.json I have:
(...)
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"declaration": true,
"declarationDir": "./dist/#types/chrisweb-utilities",
(...)
The resulat was "created dist/index.js, dist/index.esm.js in 2.6s" ... all good
The files that got created where the following:
/dist
|-#types
|-index.d.ts
|-index.js
|-index.esm.js
|-index.esm.js.map
|-index.js.map
Today I tried to use the official plugin #rollup/plugin-typescript instead (because I use that one in other projects where I only do a single ESM build and it works without a problem and I wanted to use the same plugins through out all of my projects)
I had a first error because of the configuration propery only rollup-plugin-typescript2 understands:
"(!) Plugin typescript: #rollup/plugin-typescript TS5023: Unknown compiler option 'useTsconfigDeclarationDir'."
So I removed it, which fixed that problem ...
But I got another error: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'dir' must be used when 'outDir' is specified."
So I added dir to my configuration, which then looked like this:
import typescript from '#rollup/plugin-typescript';
import pkg from '../package.json'
export default {
input: 'src/index.ts',
output: [
{
file: pkg.main,
format: 'umd',
name: pkg.name,
sourcemap: true,
dir: "dist",
},
{
file: pkg.module,
format: 'esm',
sourcemap: true,
dir: "dist",
},
],
plugins: [
typescript({
tsconfig: "tsconfig.json",
}),
],
}
Nope, next error shows up: "[!] Error: You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks."
Actually I don't even want to generate chunks, I'm fine with a single file, but I remove dir I'm back to the previous error. So next thing I tried was to keep "dir" and instead remove "file"
This worked, or at least I got a success message: "created dist, dist in 2.6s" but the problem now is that instead of having two builds I just have a single one "dist/index.js", the first build for UMD gets owerwritten by the second one for ESM.
I thought ok one last try, lets output the UMD version in a subfolder of /dist and the ESM version in another one, so I changed my config to this:
(...)
output: [
{
format: 'umd',
name: pkg.name,
sourcemap: true,
dir: "dist/umd",
},
{
format: 'esm',
sourcemap: true,
dir: "dist/esm",
},
],
(...)
This failed too :( this time with this error: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'outDir' must be located inside 'dir'." So my outDir is "./dist" which yes is not in dir: "dist/umd" anymore, I only have one outDir in tsconfig, so it can't be in each rollup output.dir, or do I miss something here?
Oh and I actually also tried something else, remember that earlier error where rollup told me that "'dir' must be used when 'outDir' is specified", so I removed outDir from tsconfig.json and hey another rollup error (at this point I think I got all possible rollup errors ;) ) which was the following: "[!] (plugin typescript) Error: #rollup/plugin-typescript: 'dir' must be used when 'declarationDir' is specified."
So I also commented out "declarationDir" in the tsconfig ... no more error, but this is not really the solution as now I don't have typescript type definition files getting generated.
I went back and forth and tried all combinations for hours, but no luck so far...
So I'm stuck and was wondering if someone can help me out? Maybe you had this or a similar problem? Either I'm missing something or this a bug in which case I will open a ticket in a few days.
When run locally, it seems to work fine but crashes when its on pipeline
EDIT: After removing npx, it produces a different error:
I have followed the advice of installing the plugin:
npm install eslint-plugin-react#latest --save-dev
But seeps to repeat itself.
Here's my retracted bitbucket-pipelines.yml config:
- step:
name: CI
caches:
- node
script:
- npm install
- npm run lint
- npm run test
eqautes to package.json
"lint": "eslint --ext .js,.ts,.tsx src --ignore-pattern node_modules/",
"test": "jest --verbose --colors --coverage",
Here's my eslint config file:
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"airbnb"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".ts", ".tsx"],
"paths": ["src"]
}
}
},
"rules": {
...
}
}
}
An update to Visual Studio Code fixed this for me.
I was unwittingly on a 2 year old version.
Fixed it by removing NODE_ENV in pipelines's .env due to this:
npm install (in package directory, no arguments):
Install the dependencies in the local node_modules folder.
In global mode (ie, with -g or --global appended to the command), it
installs the current package context (ie, the current working
directory) as a global package.
By default, npm install will install all modules listed as
dependencies in package.json.
With the --production flag (or when the NODE_ENV environment variable
is set to production), npm will not install modules listed in
devDependencies.
NOTE: The --production flag has no particular meaning when adding a
dependency to a project.
it happened to to.
tried hard to find the answer.
Apparently, eslint searchs for a roots in the working directory, or something like that, to find the modules to import.
It happens that i've had two apps in my project folder, and only one had the eslintrc.josn.
I fixed to use eslint on the entire project oppening the vs settings.json and add the following:
"eslint.workingDirectories": ["./app1","./app2"...]
if u have more than one app on ur project folder, u should try it
I am getting a red squiggly intellisense error in TypeScript 2.1.4, Visual Studio 2015 Update 3 saying Cannot find name 'Promise', for example the following code shows the error on both uses of Promise:
/// <reference path="../typings/index.d.ts" />
import 'fetch';
import {HttpClient, json} from 'aurelia-fetch-client';
import {inject} from 'aurelia-framework';
import {BearerToken} from './common/bearer-token';
export class ApiToken
{
....
public getTokenSimplified(): Promise<BearerToken>
{
let tokenResult: BearerToken;
let p = new Promise<BearerToken>(function (resolve, reject)
{
// my code ommited
});
return p;
}
....
}
The TypeScript does compile without an error so I can get by with this, but I'd like to find a solution. Does anyone know how to solve this? Having researched StackOverflow and Github I have tried the following:
npm install es6-promise --save, and import {Promise} from 'es6-promise' added to the top of the source file
This does cause the red squiggly to disappear but leads to the build error "Type Promise is not assignable to type Promise. Two different types with this name exist but they are unrelated."
Installing and referencing npm's ts-promise incurs the same "Two different types with this name exist" error.
typings install dt~es6-shim --save --global
This causes duplicate definitions, e.g. Duplicate identifier 'PropertyKey' in lib.es2015.core.d.ts
typings install dt~es6-promise --save --global
This causes error Duplicate identifier 'Promise' in lib.es2015.iterable.d.ts
typings install bluebird --source npm --save
This fails with the compile time error "Type Promise is not assignable to type 'Bluebird'" because HttpClient returns Javascript Promises, not Bluebird promises.
npm install es6-shim --save and npm install #types/es6-shim --save-dev
This causes duplicate definitions, e.g. Duplicate identifier 'PropertyKey' in lib.es2015.core.d.ts
npm install es6-promise --save and npm install #types/es6-promise --save-dev
causes error Duplicate identifier 'Promise' in lib.es2015.iterable.d.ts
in tsconfig.json, modifying "lib": ["es2015", "dom"] to "lib": ["es2015", "es2015.promise", "dom"] did not fix the problem.
tscconfig.json as follows :
{
"compileOnSave": false,
"compilerOptions": {
"rootDir": "src",
"outDir": "dist",
"sourceMap": true,
"target": "es5",
"module": "amd",
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"lib": ["es2015", "dom"],
"baseUrl": "./",
"paths": {
"src/*": ["src/*"]
}
},
"filesGlob": [
"./src/**/*.ts",
"./test/**/*.ts",
"./typings/index.d.ts",
"./custom_typings/**/*.d.ts",
"./jspm_packages/**/*.d.ts"
],
"exclude": [
"node_modules",
"jspm_packages",
"dist",
"build",
"test"
],
"atom": {
"rewriteTsconfig": false
}
}
Perhaps I am not referencing the required library correctly so if someone can point out the error I'd appreciate it.
Try this config for libs
"lib": ["es2015", "dom", "es6"]
If other types are missing (Request, Response, BufferSource URLSearchParams,...) please send your typings.json file.
I'm getting the following error upon running react-native init testNative
ReferenceError: [BABEL] /Users/m/git/testNative/node_modules/react-native/local-cli/bundle/bundle.js: Unknown option: base.optional
at Logger.error (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:289:18)
at OptionManager.init (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:486:10)
at File.initOptions (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/index.js:211:75)
at new File (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/index.js:129:22)
at Pipeline.transform (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/pipeline.js:48:16)
at Object.transformFileSync (/Users/m/git/testNative/node_modules/babel-core/lib/api/node.js:118:10)
at compile (/Users/m/git/testNative/node_modules/babel-register/lib/node.js:100:20)
at loader (/Users/m/git/testNative/node_modules/babel-register/lib/node.js:128:14)
at Object.require.extensions.(anonymous function) [as .js] (/Users/m/git/testNative/node_modules/babel-register/lib/node.js:138:7)
I've tried the advice in the following posts (https://github.com/facebook/react-native/issues/5, https://github.com/babel/babel-loader/issues/132, https://github.com/babel/babelify/issues/129, React 0.14 error: Module build failed: ReferenceError: [BABEL] .../node_modules/eslint-loader/index.js!/.../main.jsx: Unknown option: base.stage), but with no avail.
My current hypothesis is that because I don't have a .babelrc file anywhere on my system, it's falling back to "base.optional." At least adding a .babelrc file to my project folder is the only thing that yielded a different outcome (downgrading node, babel, or react-native did nothing). So, if this is the solution, does anyone know what my .babelrc file should include for a react-native project?
Thanks
Here is one of the .babelrc files that you can use with your RN project.
Note that RN works fine with no .babelrc file in your project (it falls back to node_modules/react-native/.babelrc file.
{
"retainLines": true,
"compact": true,
"comments": false,
"plugins": [],
"presets": ["stage-0", "react", "react-native"],
"sourceMaps": false,
}
You also need to add these line to your package.json file and install the dev-dependencies : npm i --save-dev <package-name>
"devDependencies": {
"babel-preset-react": "^6.3.13",
"babel-preset-react-native": "^1.4.0",
"babel-preset-stage-0": "^6.3.13"
}