sveltekilt project: production build failed while using my own library - build

I made an tiny math library (tinycas) which I published to npm as an esm module.
Here is the package.json :
{
"name": "tinycas",
"version": "0.8.9",
"description": "A Simple CAS",
"keywords": [
"cas",
"math"
],
"module": "./dist/tinycas.mjs",
"type": "module",
"author": "Zahara-Nour",
"repository": "github:Zahara-Nour/tinycas",
"scripts": {
"dist": "rollup -c",
"test": "jest --coverage --colors",
"testw": "jest --watch --colors",
"start": "node src/index.js",
},
"license": "ISC",
"devDependencies": {
......
},
"dependencies": {
"decimal.js": "^10.2.1"
}
}
I made the package with rollup :
// rollup.config.js
// import { nodeResolve } from '#rollup/plugin-node-resolve';
export default [
{
external: ['decimal.js'],
input: './src/index.js',
output:
{
file: './dist/tinycas.mjs',
format: 'es',
},
// plugins: [nodeResolve()]
},
]
Then I used this library in a sveltekit project. In dev mode, no problem, the library is imported and I can use it. But when I want to make a production build to test it before deploying it to Vercel, vite seems not to find my library :
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/david/Coding/js/ubumaths/node_modules/tinycas/' imported from /Users/david/Coding/js/ubumaths/.svelte-kit/output/server/entries/pages/index.svelte.js
at new NodeError (node:internal/errors:371:5)
at legacyMainResolve (node:internal/modules/esm/resolve:336:9)
at packageResolve (node:internal/modules/esm/resolve:919:14)
at moduleResolve (node:internal/modules/esm/resolve:978:18)
at defaultResolve (node:internal/modules/esm/resolve:1080:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
at link (node:internal/modules/esm/module_job:78:36)
> 500 /
at file:///Users/david/Coding/js/ubumaths/node_modules/#sveltejs/kit/dist/chunks/index2.js:1043:11
at save (file:///Users/david/Coding/js/ubumaths/node_modules/#sveltejs/kit/dist/chunks/index2.js:1262:4)
at visit (file:///Users/david/Coding/js/ubumaths/node_modules/#sveltejs/kit/dist/chunks/index2.js:1153:3)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
However, my library is installed. Is it because I didn't package my library in a good way ? Maybe I have to also provide a cjs version for the production build?

Related

Build script doesn't copy all files with babel

I want to create, for the first time, a npm package from a react component. I'm following this tutorial here
But when I try the build script, I have some error. Because I'm working on windows/vscode powershell terminal, I changed rm-rf to del/s/q/f and installed cross-env.
"build": "del/s/q/f dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files"
Now it partially worked but many files are missing in dist folder.
Here is the error msg
ReferenceError: [BABEL] src\lib\components\DatePicker.jsx: Unknown option: C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-preset-react-app\index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options. (While processing preset: "C:\\Users\\romai\\Workspace\\Openclassrooms\\Frontend\\HRNet\\hrnet_react_datepicker\\node_modules\\babel-preset-react-app\\index.js")
at Logger.error (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
at C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
at C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
at Array.map (<anonymous>)
at OptionManager.resolvePresets (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\index.js:212:65)
The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run build" terminated with exit code: 1.
Here is the src structure
Here is my current builded dist folder
.babelrc
{
"presets": [
["react-app", { "absoluteRuntime": false }]
]
}
Actual package.json
{
"name": "xxx",
"version": "1.0.0",
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"private": false,
"description": "datepicker component for personnal openclassrooms hrnet project",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx"
},
"scripts": {
"start": "react-scripts start",
"build": "del/s/q/f dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^10.0.1",
"cross-env": "^7.0.3",
"sass": "^1.49.9"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0"
}
}
Thanks in advance
I got the same error and decided to debug. This debugging lead me to create.js in node_modules/babel-preset-react-app, which contains "overrides". This is the key that is being rejected. Commenting that part out gives the following error:
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "blabla/frontend/shared/node_modules/babel-preset-react-app/index.js")
This lead me to brave-search "babel-cli 7", which gives https://babeljs.io/docs/en/babel-cli.
A note here states Note: Please install #babel/cli and #babel/core first before npx babel, otherwise npx will install out-of-dated babel 6.x. Other than npx, you can also drop it inside of an npm run script or you may instead execute with the relative path instead. ./node_modules/.bin/babel
Notice it states #babel/cli. Looking at package-lock.json, I see babel-cli. Removing that one and installing #babel/cli gave me version 7.
TLDR: uninstall babel-cli, install #babel/cli.

parcel build building in root folder instead of ./dist

I am very confused as to why my parcel build script is spewing everything into the root folder instead of into ./dist, I have tried specifying with and without output paths with no luck.
What confuses me more is how my start script "parcel index.html" outputs into the dist folder.
To clarify on the below, I am running: npm run build
Here's my package.json
Thank you for any help!
{
"name": "eclaires","version": "1.0.0",
"description": "",
"main": "index.html",
"browserslist": "last 10 versions",
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"start": "parcel index.html",
"devserver": "live-server",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"prefix:css": "postcss css/style.comp.css --use autoprefixer -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass prefix:css compress:css",
"build:html": "parcel build index.html --dist-dir ./dist",
"build": "npm-run-all build:css build:html"
},
"author": "LY",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"autoprefixer": "^10.2.4",
"core-js": "^3.8.3",
"node-sass": "^5.0.0",
"npm-run-all": "^4.1.5",
"parcel": "^2.0.0-beta.1",
"postcss": "^8.2.6",
"postcss-cli": "^8.3.1"
}
}
In general, use the --dist-dir <dir> option during build:
parcel build index.js --dist-dir ./dist
or specify the build directory for your project at package.json#main.
{
"main": "dist/index.js"
"scripts": {
"build": "parcel build"
}
}
Your main is set to the root index.html, which is why it is output there.
Also, the reason why running your npm start outputs to dist but your npm build outputs to root is because your start script is set to:
"start": "parcel index.html",
which is equivalent to Parcel's default serve command:
parcel serve index.html
Parcel's serve command may behave differently than build.
It looks like you're not setting up the output directory.
According to the documentation, you can do like I did below, this will create the dist folder and the files:
https://parceljs.org/cli.html
{
"name": "silicia",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
"parcel": "^1.12.3"
},
"devDependencies": {
"sass": "^1.32.8"
},
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html --out-dir ./dist"
},
"author": "Jesus Ramirez",
"license": "ISC"
}

Firebase Functions TypeScript unit testing devDependencies

Following the guideline here: https://firebase.google.com/docs/functions/unit-testing
I'm trying to write unit tests to my TS functions.
here's my package.json:
{
"name": "functions",
"scripts": {
"lint": "tslint --project tsconfig.json",
"build": "tsc",
"serve": "npm run build && firebase serve --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log",
"test": "mocha --reporter spec"
},
"main": "lib/index.js",
"dependencies": {
"#types/algoliasearch": "^3.27.0",
"#types/axios": "^0.14.0",
"#types/nodemailer": "^4.6.0",
"#types/stripe": "^5.0.11",
"algoliasearch": "^3.27.1",
"axios": "^0.18.0",
"firebase-admin": "~5.12.0",
"firebase-functions": "^1.0.3",
"nodemailer": "^4.6.4",
"stripe": "^5.8.0",
"webpack": "^4.7.0"
},
"devDependencies": {
"#types/node": "^9.6.6",
"firebase-functions-test": "^0.1.2",
"mocha": "^5.2.0",
"ts-loader": "^4.2.0",
"tslint": "^5.8.0",
"typescript": "^2.8.3",
"webpack-cli": "^2.1.2",
"webpack-node-externals": "^1.7.2"
},
"private": true
}
and I have 1 problem and 1 question.
problem:
I can't import the firebase-functions-test
in my index.test.ts file.
it is looking for it in dependencies only and not in devDependencies...
(adding it inside dependencies solve it).
question:
Can I move all the #types to devDependencies?
Thanks.
If I am right you probably get error something like
Module 'firebase-functions-test' is not listed as dependency in package.json
In fact this is because you have enabled tslint rule no-implicit-dependencies. You can disable it and then you will not get error when importing devDependencies in your unit test.
You can change set tslint to consider dev,
{
...
"rules": {
"no-implicit-dependencies": [true, "dev"],
...
}
see https://github.com/houndci/hound/issues/1522#issuecomment-415760094

Visual Studio 2017 .Net Core 2.0 Angular Publish Fails

I am running a Windows 7 Professional PC, using Visual Studio 2017 version 15.4.5. When I created a .Net Core 2.0 project and selected the type of Angular, it ran fine out of the box.
Then I added font awesome and primeng (https://www.primefaces.org/primeng/#/) in what I think is the standard way, i.e., adding references to the package.json file, then to the nonTreeShakableModules section of the webpack.config.vendor.js file, then adding modules to app.module.shared.ts. This was primeng version 5.0.2 and font-awesome version 4.7.0.
In development, all is good - everything is running fine. However, when I try to publish, I see the following lines in the Output window:
npm install
removed 3 packages in 3.389s
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod
What? Why would it remove 3 packages?
And then the publish attempt fails. After the failure, I see that 3 of my npm packages have been UNINSTALLED:
1) #types/jquery
2) font-awesome
3) primeng
And I see a bunch of "Module not found" errors - of course they are not found, because they were just removed!
I looked at the .csproj file, and I see the following:
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec Command="npm install" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
So, as far as I can tell, the "npm install" command, or something triggered by that command, is removing these modules. I have to re-install them after every Publish attempt.
So, my question: Why are these packages being removed, and what can I do about it?
My package.json file:
{
"name": "CaseManagementReporting",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"dependencies": {
"#angular/animations": "4.2.5",
"#angular/common": "4.2.5",
"#angular/compiler": "4.2.5",
"#angular/compiler-cli": "4.2.5",
"#angular/core": "4.2.5",
"#angular/forms": "4.2.5",
"#angular/http": "4.2.5",
"#angular/platform-browser": "4.2.5",
"#angular/platform-browser-dynamic": "4.2.5",
"#angular/platform-server": "4.2.5",
"#angular/router": "4.2.5",
"#ngtools/webpack": "1.5.0",
"#types/webpack-env": "1.13.0",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"font-awesome": "4.7.0",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"preboot": "4.5.2",
"primeng": "5.0.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#types/chai": "4.0.1",
"#types/jasmine": "2.5.53",
"#types/jquery": "3.2.1",
"chai": "4.0.2",
"jasmine-core": "2.6.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3"
}
}
My tsconfig.json file:
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
"strict": true,
"lib": [ "es6", "dom" ],
"types": [ "webpack-env", "jquery" ]
},
"exclude": [ "bin", "node_modules" ],
"atom": { "rewriteTsconfig": false }
}
My webpack.config.vendor.js file:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const treeShakableModules = [
'#angular/animations',
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/forms',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'zone.js'
];
const nonTreeShakableModules = [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'es6-promise',
'es6-shim',
'event-source-polyfill',
'jquery',
'font-awesome/css/font-awesome.css',
'primeng/resources/themes/bootstrap/theme.css',
'primeng/resources/primeng.min.css',
'primeng/primeng'
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);
module.exports = (env) => {
const extractCSS = new ExtractTextPlugin('vendor.css');
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
resolve: { extensions: [ '.js' ] },
module: {
rules: [
{ test: /\.(png|woff|woff2|eot|ttf|svg|jpg|jpeg|gif)(\?|$)/, use: 'url-loader?limit=100000' }
]
},
output: {
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]'
},
plugins: [
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.ContextReplacementPlugin(/\#angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)#angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898
new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
]
};
const clientBundleConfig = merge(sharedConfig, {
entry: {
// To keep development builds fast, include all vendor dependencies in the vendor bundle.
// But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle.
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
output: { path: path.join(__dirname, 'wwwroot', 'dist') },
module: {
rules: [
{ test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
]
},
plugins: [
extractCSS,
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin()
])
});
const serverBundleConfig = merge(sharedConfig, {
target: 'node',
resolve: { mainFields: ['main'] },
entry: { vendor: allModules.concat(['aspnet-prerendering']) },
output: {
path: path.join(__dirname, 'ClientApp', 'dist'),
libraryTarget: 'commonjs2',
},
module: {
rules: [
{ test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] }
]
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
]
});
return [clientBundleConfig, serverBundleConfig];
}
My webpack.config.js file:
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AotPlugin = require('#ngtools/webpack').AotPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
module.exports = (env) => {
// Configuration in common to both client-side and server-side bundles
const isDevBuild = !(env && env.prod);
const sharedConfig = {
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '#ngtools/webpack' },
{ test: /\.html$/, use: 'html-loader?minimize=false' },
{ test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
]
},
plugins: [new CheckerPlugin()]
};
// Configuration for client-side bundle suitable for running in browsers
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig, {
entry: { 'main-client': './ClientApp/boot.browser.ts' },
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
exclude: ['./**/*.server.ts']
})
])
});
// Configuration for server-side (prerendering) bundle suitable for running in Node
const serverBundleConfig = merge(sharedConfig, {
resolve: { mainFields: ['main'] },
entry: { 'main-server': './ClientApp/boot.server.ts' },
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./ClientApp/dist/vendor-manifest.json'),
sourceType: 'commonjs2',
name: './vendor'
})
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new AotPlugin({
tsConfigPath: './tsconfig.json',
entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
exclude: ['./**/*.browser.ts']
})
]),
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, './ClientApp/dist')
},
target: 'node',
devtool: 'inline-source-map'
});
return [clientBundleConfig, serverBundleConfig];
};
I found a solution for this problem (which sadly just led to another, but...).
I believe that this was/is a bug in the version of NPM which I was using. I had npm version 5.0.3 installed. After hours of searching, I came across this GitHub discussion: here in which many people complained about the npm install command actually removing modules. I downgraded my npm instance from 5.0.3 to 3.10.3 (which is what my home environment was using), and I found that the packages were no longer removed. (Why anybody would write something that would remove packages with a command like "npm install" is utterly beyond me, but read the linked article and you will see the frustration this has caused!)
As a .Net developer, of course, I did not even know how to downgrade my npm instance, so I had to look that up. For those who might be helped, the command is: npm install -g npm#3.10.3. I found that here
So, now my publish process runs without deleting packages, which is what I asked about in my question. That issue is resolved, so I am treating this as an answer.
But this is not to say that the downgrade solved all of my problems. When I attempted to publish, I got new errors, which I think are unrelated to the npm version:
Can't resolve './../$$_gendir/ClientApp/app/app.module.browser.ngfactory' in 'C:\Projects\ForthrightProjects\CaseManagementReporting\CaseManagementReporting\ClientApp' CaseManagementReporting Module not found 0
Can't resolve './../$$_gendir/ClientApp/app/app.module.server.ngfactory' in 'C:\Projects\ForthrightProjects\CaseManagementReporting\CaseManagementReporting\ClientApp' CaseManagementReporting Module not found 0
Yet more Googling found this article: here
which suggests commenting out this line in the webpack.config.js file:
// { test: /.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '#ngtools/webpack' },
Or, alternatively, changing it to this:
{ test: /.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
I tried both options, and both of them worked to get past the errors above. HOWEVER, I now am faced with yet another error in attempting to publish:
ERROR in Metadata version mismatch for module: C:/Projects/ForthrightProjects/CaseManagementReporting/CaseManagementReporting/node_modules/primeng/components/dom/domhandler.d.ts, found version 4, expected 3
So, after some additional searching and trials and errors, I came across this link: here
One of the suggestions there was to change the primeng entry in the project.json file to this: "primeng": "^4.2.4"
Amazingly enough, this actually worked. I am now able to publish. Hopefully successful deployment of the published files will not be so terribly painful.
To .Net developers: Remember back when you just added a package with NuGet, and everything just worked? Sigh...

Running "taco create" fails with "SyntaxError: Unexpected token ILLEGAL"

New to TACO and I'm following the Getting Started with TACO-CLI. Sadly I am getting an error when running this create command:
taco create hello
Here's the error I'm getting:
$ taco create hello
Downloading: taco-kits
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\kyle\AppData\Roaming\taco_home\node_modules\taco-kits\latest\package.json'
npm WARN latest No description
npm WARN latest No repository field.
npm WARN latest No README data
npm WARN latest No license field.
taco-kits downloaded and installed.
Error: Cannot find module 'C:\Users\kyle\AppData\Roaming\taco_home\node_modules\taco-kits\latest\node_modules\taco-kits'
SyntaxError: Unexpected token ILLEGAL
I have these versions of stuff:
npm 3.9.6
taco 1.2.1
node 6.2.1
Windows 10 (latest updates)
I've also tried with the latest stable version of node (4.4.5) and no joy.
Indeed, the contents of 'C:\Users\kyle\AppData\Roaming\taco_home\node_modules\taco-kits\latest\' does not contain a package.json file. Here's what I see there:
node_modules
timestamp.txt
The 'C:\Users\kyle\AppData\Roaming\taco_home\node_modules\taco-kits\latest\node_modules\taco-kits' contains this:
LICENSE
TacoKitMetadata.json
node_modules
package.json
resources
tacoErrorCodes.js
tacoErrorHelper.js
tacoKits.js
templates
test
The package.json file in that folder contains the following:
{
"name": "taco-kits",
"description": "Validated Kits metadata for taco CLI",
"version": "1.2.0",
"author": {
"name": "Microsoft Corporation",
"email": "vscordovatools-admin#microsoft.com"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Microsoft/TACO.git"
},
"bugs": {
"url": "https://github.com/Microsoft/TACO/issues",
"email": "vscordovatools-admin#microsoft.com"
},
"homepage": "http://taco.tools",
"main": "tacoKits.js",
"scripts": {
"test": "mocha",
"coverage": "istanbul cover --report json node_modules/mocha/bin/_mocha -- --reporter spec"
},
"dependencies": {
"q": "^1.1.2",
"taco-utils": "^1.3.3"
},
"devDependencies": {
"mocha": "2.0.1",
"istanbul": "^0.4.0",
"should": "4.3.0",
"taco-tests-utils": "^0.1.4"
},
"license": "MIT",
"_id": "taco-kits#1.2.0",
"_shasum": "7e9281a34e59cfb64234057e6ada10a99791a6ef",
"_resolved": "https://registry.npmjs.org/taco-kits/-/taco-kits-1.2.0.tgz",
"_from": "taco-kits#latest",
"_npmVersion": "2.14.9",
"_nodeVersion": "0.12.9",
"_npmUser": {
"name": "vsmobile",
"email": "vscordovatools-admin#microsoft.com"
},
"dist": {
"shasum": "7e9281a34e59cfb64234057e6ada10a99791a6ef",
"tarball": "https://registry.npmjs.org/taco-kits/-/taco-kits-1.2.0.tgz"
},
"maintainers": [
{
"name": "vsmobile",
"email": "vscordovatools-admin#microsoft.com"
}
],
"directories": {}
}
Any help would be appreciated.
Update (resolved)
I was able to resolve this issue by deleting the taco-kits folder and then running taco kit list which reinstalled the kits. The bash commands I used are as follows (using bash):
rm -Rf /c/users/kyle/AppData/Roaming/taco_home/node_modules/taco-kits/
taco kit list
I'd suggest just renaming that taco-kits folder first just to make sure it works for you.