Repository navigation
ENOENT: no such file or directory when importing #239
Description
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.
Activity
cartant commentedon May 8, 2018
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.jsfile contains basically what sits within the Gulp task. The typings have changed - with@types, etc. - so you can remove the.d.tsfile. Anyway, If you are able to reproduce the problem with something as simple as the example, I can probably help.sigmasoldi3r commentedon May 9, 2018
I've tracked down what creates the error, if you specify the field
declarationDirintsconfig.jsonit will create this error, so removingfrom
tsconfig.jsonfixed the problem. It is supposed to happen this way?cartant commentedon May 9, 2018
It's not an option that I've ever used. When using
tsc, I've always generated the.d.tsfiles beside the.jsfiles. 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.