We Keep Coding

Typescript: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`

I've an npm command line application that i've built not so long ago and it worked fine. Now that i've updated it, and due to changes in the versions of typescript over the period, i'm getting an error when i want to run this package which says:
Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
Here is the package.json file:
{
"name": "initialiseur",
"version": "4.0.4",
"main": "src index.ts",
"author": "#crispengari",
"license": "MIT",
"bin": "src/index.ts",
"description": "THIS IS A BOILER PLATE THAT INITIALIZE A NODE EXPRESS BACKEND FOR TYPESCRIPT AND JAVASCRIPT",
"scripts": {
"watch": "tsc -w",
"start": "ts-node src/index.ts",
"dev": "nodemon dist/index.ts",
"start:fast": "tsnd --respawn src/index.ts"
},
"dependencies": {
"#types/inquirer": "^7.3.3",
"#types/node": "^17.0.42",
"#types/npm": "^7.19.0",
"chalk": "^4.1.2",
"cors": "^2.8.5",
"cross-fetch": "^3.1.5",
"dotenv": "^10.0.0",
"inquirer": "^8.1.2",
"node-fetch": "^3.2.6",
"octokit": "^1.7.2",
"ts-node": "^10.8.1",
"typescript": "^4.6.5"
},
"devDependencies": {
"#types/node-fetch": "^2.6.1",
"nodemon": "^2.0.12",
"ts-node-dev": "^2.0.0"
},
"bugs": {
"url": "https://github.com/CrispenGari/initialiseur/issues"
},
"homepage": "https://github.com/CrispenGari/initialiseur#readme",
"keywords": [
"node.ts",
"node.js",
"typescript",
"ts",
"nodejs-backend",
"javascript",
"js",
"express",
"backend"
]
}
When i'm testing it locally by running:
npm start
# or
yarn start
Everything is working fine, but after publishing it to npm to start it i run the following command:
npx initialiseur
Then I'm getting the error from a command line. The whole error is as follows:
C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:42536
ts.Debug.assert(typeof typeReferenceDirectiveName === "string", "Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.");
^
Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
at Object.resolveTypeReferenceDirective (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:42536:18)
at C:\Users\crisp\AppData\Roaming\npm\node_modules\ts-node\src\resolver-functions.ts:131:51
at Array.map (<anonymous>)
at Object.resolveTypeReferenceDirectives (C:\Users\crisp\AppData\Roaming\npm\node_modules\ts-node\src\resolver-functions.ts:130:31)
at actualResolveTypeReferenceDirectiveNamesWorker (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:116673:163)
at resolveTypeReferenceDirectiveNamesWorker (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:116973:26)
at processTypeReferenceDirectives (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118455:31)
at findSourceFileWorker (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118340:21)
at findSourceFile (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118195:26)
at processImportedModules (C:\Users\crisp\AppData\Roaming\npm\node_modules\initialiseur\node_modules\typescript\lib\typescript.js:118601:25)
From the above error i can tell that the problem maybe comming from typescript, I'v tried changing version of typescript but still it's not working. In my src/index.ts it looks as follows:
#!/usr/bin/env ts-node
import path from "path";
import inquirer from "inquirer";
import { writeFile, readFile } from "fs/promises";
....

Running npm install -g ts-node#latest fixed it for me. I needed to update my globally installed ts-node version.

To reiterate previous answers for yarn users:
yarn add -D ts-node#latest solved it for me. These are my versions now:
"ts-node": "^10.9.1",
"typescript": "^4.7.4"
The top answer probably shouldn't recommend a downgrade.
Edit
If you continue to face issues, try deleting your node_modules folder and reinstalling by running yarn.
If it still doesn't work, you may need to add these versions to your resolutions field in package.json, and then run yarn install --force.
{
"resolutions": {
"ts-node": "^10.9.1",
"typescript": "^4.7.4"
}
}
However, I consider this a bit of a temporary measure, and I wouldn't recommend leaving the resolutions in forever.

Getting the same as of a couple of days.
Reverting ts-node to v10.6.0 fixes it for me.

It is hapening in typescript 4.7.
I lowered my typescript to 4.6.4, and the error disappeared

Update the Typescript as #alex-totolici has suggested: npm i typescript#latest
And update the ts-node: npm i ts-node#latest

Remeber to distinguish between global ts-node and package ts-node;
You have to use npx to run local ts-node
> npx ts-node ...
Anyway, this is what I finally found after 30 mins of repeatedly rm -rf node_nodules and yarn add ts-node#latest.

These changes in the package.json worked for me.
"ts-node": "~10.7.0"
"typescript": "~4.6.4"

Try updating all you packages including typescript
To update typescript: npm i typescript#latest
Here is a package to check for updates: https://www.npmjs.com/package/npm-check-updates

I had the same issue, and already ran the latest versions of typescript and ts-node.
Updating nodemon npm install -g nodemon#latest solved it for me!

I just figure out that the problem was coming from inquirer import when i commented the import it just worked:
// import inquirer from "inquirer";
I suspect that the inquirer types and my current typescript version are not lining up. So you must as well try to debug by commenting imports if the above answers did not work for you.

I don't know exactly why but the problem comes from a #type package, you can find a line similar to this /// <reference types='node' /> if you delete it won't have this problem anymore

Using ts-node-dev version 2.0.0 fixes this problem.
Note you'll have to manually specify the version as by default this version may not get installed.

Running this solved the issue:
npm install --save-dev ts-node#latest

Try newer version of typescript and ts-node .

i have the same problem but it works fine now with below version:
"ts-node": "~10.7.0",
"typescript": "~4.6.4",

ERROR in Debug Failure. False expression: Non-string value passed to ts.resolveTypeReferenceDirective, likely by a wrapping package working
with an outdated resolveTypeReferenceDirectives signature. This is probably not a problem in TS itself.
I still see the issue even after updating the version of Typescript & ts-node with latest versions.

generated-stories-entry.js error for rule 'import/no-unresolved'

I have added storybook to my Vue project with vue add storybook.
This has added several dependencies to my project, e.g. in my package.json I find this among others:
"vue": "~2.6.14",
"#storybook/vue": "6.4.19",
"vue-cli-plugin-storybook": "~2.1.0",
"eslint": "~6.8.0",
Now I am trying to run the storybook server with npm run storybook:serve but I get an error:
I have been trying different things, like configuring the 'import/no-unresolved' rule to be off, emitError: false on the eslist-loader inside .eslintrc, skipping the linter plugin in the webpack configuration, etc. Nothing worked and each attempt just produced new errors.
Currently I have no explicit es-linter nor webpack configuration at all. But if I comment a line inside node_modules/eslint-loader/index.js like this:
// emitter(new ESLintError(messages));
then it all works.
I don't want to be commenting out lines inside a library, I would like to have a proper solution and understand what is happening.

I found the answer myself. I had to add the eslint-plugin-import package:
npm install eslint-plugin-import
And add the plugin to the eslint configuration:
"plugins": [
"import"
]

For me the suggested answer didn’t work, what fix it in the end was to ignore those files in eslint configuration:
"ignorePatterns": [
"generated-stories-entry.js",
"storybook-init-framework-entry.js"
],

Vue JS Module not found (datepicker)

I am pretty new to vue.js - I only started using it today and naturally I have run into an error I cannot seem to resolve.
I am using the v-md-date-range-picker module:
(https://ly525.github.io/material-vue-daterange-picker/#quick-start.
The instructions tell me to do the following:
1
npm install --save v-md-date-range-picker
2
<template>
<v-md-date-range-picker></v-md-date-range-picker>
</template>
3
<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";
Vue.use(VMdDateRangePicker);
</script>
So, I ran the command in terminal in my project folder, added the 2 bit of code to my HelloWorld.vue page and then added the code from step 3 into the main.js.
When I have a look in my package.json file, I see:
"dependencies": {
"core-js": "^2.6.5",
"v-md-date-range-picker": "^2.6.0",
"vue": "^2.6.10"
},
However, I get the error:
Module not found: Error: Can't resolve 'v-md-date-range-picker/dist/v-md-date-range-picker.css' in '/Users/James/Documents/projects/vue-test/src'
am I missing something blatantly obvious here?
Edit:
I tried the response in the comments below which did not work.
On the main page of the module, I followed the instructions. However, going through the pages I found the same instructions with some extra text:
I assume that you have a working bundler setup e.g. generated by the vue-cli thats capable of loading SASS stylesheets and Vue.js SFC (Single File Components).
I am going to go out on a limb here and say I do not have a working bundler. I went into the node_modules folder, found that module and looked inside. There was no dist folder. Just .scss files etc..
So, I assume that I somehow need to build this project first.
How do I do that?
I thought running it in the browser would have done this on the fly but it clearly has not.
Edit 2:
After some googling around I found the command:
$ npm run build.
Which gives me this error:
This dependency is not found, To install it, you can run: npm install --save v-md-date-range-picker/dist/v-md-date-range-picker.css
So, I run that command and then I get the error:
Could not install from "v-md-date-range-picker/dist/v-md-date-range-picker.css" as it does not contain a package.json file.

Check if you can find this in the webpack.base.conf.js inside the build folder. If not add it.
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'], // Note that the order is very important
},
Run npm install style-loader css-loader --save before adding it to the file if it isn't there.
To Address your question
Run the command: npm install sass-loader --save
Then add an import for every SCSS file in the module.
This is not the most optimal solution, but that package looks broken to me and this is merely a workaround.
I will take time to try out the library myself and try to provide a fix for it.

Create v-md-date-range-picker.css in v-md-date-range-picker/dist/ and copy css from
md-date-range-picker.min.css
and refresh your page. For some reason css file is not being created when we install md-date-range-picker.min

Calling VueLoaderPlugin() causes 'findIndex' undefined error

I'm trying to integrate a Vue CLI app in another web project we are working with. The Vue app itself works when running the dev server bundled with Vue CLI.
The Vue application contains .vue files, so a loader for webpack is needed. I used the setup from the vue-loader documentation. When I ran webpack (via Grunt) I now get the following error:
Warning: Cannot read property 'findIndex' of undefined Use --force to continue.
After a lot of tinkering I figured out that the new VueLoaderPlugin(); line from the documentation mentioned above was the cause of this. However I do need this plugin to get my .vue-files to work.
I am using the following set of loaders, imported using npm via package.json:
{
// ...
"dependencies": {
//...
"webpack": "~3.9.1"
},
"devDependencies": {
// ...
"vue": "^2.5.17",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17"
}
}
I have tried googling for the error but came up empty handed. All help and suggestions are welcome. Cheers!

When fiddling around trying to get the vue-loader to work, at some point I got an error leading me to update webpack to a later version. This version seemed to have deprecated the use of module.loaders in favour of module.rules.
Changing this in the webpack config seems to have made everything work smoothly. Hope someone finds this useful!

How can I export a React Component as an NPM package to use in separate projects?

I have created a React component inside a project that I'd like to use in multiple projects. At the moment, I only care about doing this locally and for development. The React Component is rendered into the root div, the project uses webpack and babel to transpile JSX, ES6 and some ES7 features into a bundle.
I thought it would be simple to export this component such that I can simply run npm install MyComponent and begin using it in a fresh project. However, I find it isn't so straight forward. In particular, I've been reading for hours and hours and only seem to be getting more confused.
If my end goal is to keep developing 'MyComponent' in its containing project, while using 'MyComponent' in any number of other local projects, what are my options? The first thing I did was change the main key of my package.json to /src/components/MyComponent and run npm pack. This produces a tgz file I can install via its absolute filepath in other projects. However, I found that the es6 and jsx was not being transpiled and so my client projects would be unable to parse MyComponent. I then used webpack to transpile into lib/MyComponent, but when I have import MyComponent from './path/to/MyComponent-1.0.0.tgz I'd only see {} (an empty object) in the console.
Searching for solutions to my problem turn up many different approaches pulling together NPM, Grunt, Gulp, Babel, Webpack, etc.. And I am worried it will be many many more hours (days?) before I can grind that down to something understandable.
Given my requirements, what is the simplest solution I can implement to 1) compile down my React Component to the simplest to import module 2) import it into any local projects 3) continue to develop the package in the original host project and have changes easily propagate to client projects.

In general, if you're going to begin creating React components as separated packages (which is a great pattern, for all the reasons you've already mentioned) - you're going to need to get at least a bit familiar with webpack and babel. There's a ton to learn here, but let me try to point you in the right direction:
// webpack.config.js
/* eslint-disable */
const path = require('path')
const webpack = require('webpack')
const ENVIRONMENT = process.env.NODE_ENV
const PRODUCTION = ENVIRONMENT === 'production'
const SOURCEMAP = !PRODUCTION || process.env.SOURCEMAP
const library = 'your-lib-name' // << RENAME THIS <<
const filename = PRODUCTION ? `${library}.min.js` : `${library}.js`
const plugins = []
if (PRODUCTION) {
plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(ENVIRONMENT),
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
output: { comments: false, semicolons: false },
sourceMap: SOURCEMAP,
})
)
}
module.exports = {
devtool: SOURCEMAP ? 'source-map' : 'none',
entry: `${__dirname}/path/to/your/component.js`, // << RENAME THIS <<
externals: {
'react': 'react',
'react-dom': 'react-dom',
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
}],
},
output: {
filename,
library,
path: `${__dirname}/lib`,
libraryTarget: 'umd',
umdNamedDefine: true,
},
plugins,
}
I know that looks like a bunch - but it handles the majority of what you're going to want. In specific:
If you specify NODE_ENV=production when building, this will uglify/minify your package, and do some other trimming which you may want later.
Building with this script will output a sourcemap, which you can use with dev tools to inspect your minified code in the debugger window, among other things.
This marks react and react-dom as externals - which means they won't get bundled up and packaged inside your bundle. This is great - because it means you won't get 2+ copies of react's filesize just because you've imported your own component!
To use it, though, you now need some package.json love.
package.json
{
"name": "Your Name",
"version": "0.0.1",
"description": "This is my awesome react package!",
"main": "path/to/your/component.js",
"author": "Your Name",
"license": "MIT",
"repository": { /* Your Repo Info Here */ },
"dependencies": {
"any-packages-you-need-included-in-builds": "^1.0.0"
},
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"prop-types": "^15.5.10",
"react-dom": "^15.6.1",
"webpack": "^3.0.0"
},
"scripts": {
"build": "yarn prebuild && NODE_ENV=production webpack",
"prebuild": "mkdir -p ./lib && rm -rf ./lib/*"
}
}
Obviously, you can have a lot more here if you need it - such as other babel-plugin-* plugins that you use in your transpilation, other packages, etc.But this set will let your webpack build run. Note that the scripts here assume you're using yarn - so that you can run yarn build, and that you're on a posix system, for mkdir to work. If you're on windows or not using yarn, just update the scripts accordingly.
The rest is just learning to publish your package to npm or another package repository. Primarily, that's just setting the version number in package.json to something new (npm version) and then publishing (npm publish). You will have to have an npm account for this, of course - and be logged in (npm login).
Once you've published to npm you can just yarn add your-package-name.
Remember, though - we marked react and react-dom as external - so in the consuming package, you'll need to make sure they're available as window.React and window.ReactDOM - or you'll need to include the component directly from node_modules/your-package-name/path/to/your/component.js

You don't need to npm pack a package to use it. If you make your component into a git repo and put it on Github, you can use NPM to install it directly from Github by using npm install alex/mycomponent where alex is your github username and mycomponent is the repo name. Re-running that command will re-install from Github, in case you make changes to the repo.
Once you're happy with the component, you can upload it to the NPM registry to install like any other package (npm install name). Using Github at first makes it a bit easier to develop.
Webpack might not compile things from node_modules by default. Usually, packages are pre-compiled before being published anyway, but you should be able to configure webpack to build your 'packaged' component, along with the rest of your app. Maybe this will help: https://stackoverflow.com/a/38008149/7486612

In order to push react libraries into NPM, you may need some boilerplate which will install and convert many things for you (and you can still use your current react module as the main source, just follow the guides at the end of my answer, then you will surely get all the ideas)
Or you can also refer to my previous answer to a similar question:
Issue with publishing to npm
=====
I've also pushed several react libraries successfully into NPM:
https://www.npmjs.com/~thinhvo0108
=====
Your github repositories' folder structure should also look like mine:
https://github.com/thinhvo0108/react-paypal-express-checkout
=====
Useful tutorial below here:
(boilerplate source) https://github.com/juliancwirko/react-npm-boilerplate
(author's article) http://julian.io/creating-react-npm-packages-with-es2015/

Start by looking at existing component library, eg Material UI.
Specifically check out npm scripts they have (see package.json):
"build:es2015": "cross-env NODE_ENV=production babel ./src --ignore *.spec.js --out-dir ./build",
"build:es2015modules": "cross-env NODE_ENV=production BABEL_ENV=modules babel ./src/index.js --out-file ./build/index.es.js",
"build:copy-files": "babel-node ./scripts/copy-files.js",
"build:umd:dev": "webpack --config scripts/umd.webpack.config.js",
"build:umd:prod": "cross-env NODE_ENV=production webpack --config scripts/umd.webpack.config.js",
"build": "npm run build:es2015 && npm run build:es2015modules && npm run build:copy-files && npm run build:umd:dev && npm run build:umd:prod",
That's example of very involved and high quality component library, that makes sure that regardless of your build pipeline you'll be able to use it.
Setting up build process with webpack might be cumbersome, but don't concentrate on that too much from the begining, and cover cases that are most straight forward to you.
Also check out https://storybook.js.org/ while working on your components.