ENOENT: no such file or directory when importing

[sigmasoldi3r]

Disclaimer:
I've been googling around a while I can't find a similar issue, forgive me if it's already discussed.

---

Browserify or tsify is resolving tyepscripts imports in a bad way: Concatenates the working directory to the full path of the module, for example, if we have:

import {Home} from './pages/Home';

(Assuming that we're on /home/user/project/src/) It will attempt to resolve to: /home/user/project/src/home/user/project/src/pages/Home instead of /home/user/project/src/pages/Home, I've followed simple cases shown on readmes but I cannot make it work.

My setup:

gulpfile.js

const gulp = require('gulp'),
  browserify = require('browserify'),
  tsify = require('tsify');

gulp.task('typescript', () => {
  browserify()
    .add('src/App.tsx')
    .plugin('tsify', {})
    .bundle()
    .pipe(process.stdout);
});

My tsconfig.json:

{
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "jsx": "react",
    "allowJs": false,
    "alwaysStrict": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "lib": ["dom", "es2017", "es2016", "es2015"],
    "outDir": "build",
    "declaration": true,
    "declarationDir": "dist",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "commonjs",
    "removeComments": true,
    "pretty": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "downlevelIteration": true,
    "noFallthroughCasesInSwitch": true,
    "target": "es3"
  }
}

Sources used:
App.tsx:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Home} from './pages/home/Home';

ReactDOM.render(
  <Home/>,
  document.getElementById('app')
);

And pages/home/Home.tsx:

import * as React from 'react';

export const Home = () => {
  return (
    <div className="directive">
      Hello world!
    </div>
  );
};

Again sorry if it's been discussed before, but I can't make it work with simple cases. Maybe I'm missing something about the tsconfig.json or gulpfile.js, and thank you for your time.

---

PD: The error stack trace:

yarn run v1.5.1
$ gulp typescript
[10:37:54] Using gulpfile ~/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/gulpfile.js
[10:37:54] Starting 'typescript'...
[10:37:55] Finished 'typescript' after 184 ms
/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/node_modules/typescript/lib/typescript.js:76407
                throw e;
                ^

Error: ENOENT: no such file or directory, lstat '/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/dist/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/src/pages/home'
    at Object.fs.lstatSync (fs.js:948:11)
    at Host._follow (/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/node_modules/tsify/lib/Host.js:278:19)
    at Host.writeFile (/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/node_modules/tsify/lib/Host.js:127:29)
    at Object.writeFile (/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/node_modules/typescript/lib/typescript.js:76266:132)
    at Object.writeFile (/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/node_modules/typescript/lib/typescript.js:10975:14)
    at Object.writeDeclarationFile (/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/node_modules/typescript/lib/typescript.js:72349:16)
    at emitSourceFileOrBundle (/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/node_modules/typescript/lib/typescript.js:72498:34)
    at forEachEmittedFile (/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/node_modules/typescript/lib/typescript.js:72407:30)
    at Object.emitFiles (/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/node_modules/typescript/lib/typescript.js:72476:9)
    at emitWorker (/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/node_modules/typescript/lib/typescript.js:76340:33)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c gulp typescript
Directory: /home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/home/sigmasoldier/Documents/argochamber/external/dogs-in-blue/dogs-in-blue-home/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[cartant]

As tsify is a plugin, issues like this always involve several moving parts - some version of Browserify, Gulp, etc. On top of that, I've not used tsify lately.

I'd suggest you start with a setup that was known to be working and try that. In particular, I'd suggest you start with this repo's JSX example:

https://github.com/TypeStrong/tsify/tree/master/examples/jsx

The build.js file contains basically what sits within the Gulp task. The typings have changed - with @types, etc. - so you can remove the .d.ts file. Anyway, If you are able to reproduce the problem with something as simple as the example, I can probably help.

[sigmasoldi3r]

I've tracked down what creates the error, if you specify the field declarationDir in tsconfig.json it will create this error, so removing

  "declarationDir": "dist",

from tsconfig.json fixed the problem. It is supposed to happen this way?

[cartant]

It's not an option that I've ever used. When using tsc, I've always generated the .d.ts files beside the .js files. And I've never specified with when using tsify.

However, I doubt that anything like what you've seen should ever happen. It's a bug.