ESLint requiring '.ts' when importing in CRA 2.1 Typescript

up vote
0
down vote

favorite

I just adopted TypeScript in the latest Create-react-app version, and seems that eslint requires me to include .ts when importing ts files:

import spacing from "../css/spacing"; // eslint complains can't resolved path

import spacing from "../css/spacing.ts"; // fine

Any way that I can make the .ts optional in imports?

edited Nov 9 at 7:52

asked Nov 9 at 7:35

kyw

536923

add a comment |

up vote
0
down vote

favorite

I just adopted TypeScript in the latest Create-react-app version, and seems that eslint requires me to include .ts when importing ts files:

import spacing from "../css/spacing"; // eslint complains can't resolved path

import spacing from "../css/spacing.ts"; // fine

Any way that I can make the .ts optional in imports?

edited Nov 9 at 7:52

asked Nov 9 at 7:35

kyw

536923

add a comment |

up vote
0
down vote

favorite

I just adopted TypeScript in the latest Create-react-app version, and seems that eslint requires me to include .ts when importing ts files:

import spacing from "../css/spacing"; // eslint complains can't resolved path

import spacing from "../css/spacing.ts"; // fine

Any way that I can make the .ts optional in imports?

edited Nov 9 at 7:52

asked Nov 9 at 7:35

kyw

536923

I just adopted TypeScript in the latest Create-react-app version, and seems that eslint requires me to include .ts when importing ts files:

import spacing from "../css/spacing"; // eslint complains can't resolved path

import spacing from "../css/spacing.ts"; // fine

Any way that I can make the .ts optional in imports?

reactjs typescript create-react-app

edited Nov 9 at 7:52

asked Nov 9 at 7:35

kyw

536923

edited Nov 9 at 7:52

asked Nov 9 at 7:35

kyw

536923

edited Nov 9 at 7:52

asked Nov 9 at 7:35

kyw

536923

asked Nov 9 at 7:35

kyw

536923

asked Nov 9 at 7:35

kyw

536923

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

If you use .js it should work at compile time, ESLint scan time, and when running.

The reason ESLint picks up on this is that some browsers require the file extension for their module loaders.

import spacing from "../css/spacing.js";

If you are using RequireJS or similar, it is optional - but given it works with the extension across module loaders it is probably a safe bet to use the .js.

edited Nov 12 at 8:59

answered Nov 9 at 10:44

Fenton

148k42279306

Thanks. Importing js files without .js has always been fine. Issue is with ts files imports that eslint complains I should end with .ts. But I think Im gonna have to ditch eslint for tslint unless they can work together somehow. Still finding that out..
– kyw
Nov 9 at 12:25

You might be able to supress the rule if it's a problem for you.
– Fenton
Nov 9 at 13:20

ECMAScript module specification does not say that file extension is necessary. Module resolution process is an implementation-defined abstract operation, the spec says nothing about file extensions there.
– artem
Nov 9 at 15:32

@artem - quite right. It's the browser implementation, not the spec. Thanks for the comment.
– Fenton
Nov 12 at 8:59

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53221516%2feslint-requiring-ts-when-importing-in-cra-2-1-typescript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

If you use .js it should work at compile time, ESLint scan time, and when running.

The reason ESLint picks up on this is that some browsers require the file extension for their module loaders.

import spacing from "../css/spacing.js";

If you are using RequireJS or similar, it is optional - but given it works with the extension across module loaders it is probably a safe bet to use the .js.

edited Nov 12 at 8:59

answered Nov 9 at 10:44

Fenton

148k42279306

Thanks. Importing js files without .js has always been fine. Issue is with ts files imports that eslint complains I should end with .ts. But I think Im gonna have to ditch eslint for tslint unless they can work together somehow. Still finding that out..
– kyw
Nov 9 at 12:25

You might be able to supress the rule if it's a problem for you.
– Fenton
Nov 9 at 13:20

ECMAScript module specification does not say that file extension is necessary. Module resolution process is an implementation-defined abstract operation, the spec says nothing about file extensions there.
– artem
Nov 9 at 15:32

@artem - quite right. It's the browser implementation, not the spec. Thanks for the comment.
– Fenton
Nov 12 at 8:59

add a comment |

up vote
1
down vote

If you use .js it should work at compile time, ESLint scan time, and when running.

The reason ESLint picks up on this is that some browsers require the file extension for their module loaders.

import spacing from "../css/spacing.js";

If you are using RequireJS or similar, it is optional - but given it works with the extension across module loaders it is probably a safe bet to use the .js.

edited Nov 12 at 8:59

answered Nov 9 at 10:44

Fenton

148k42279306

Thanks. Importing js files without .js has always been fine. Issue is with ts files imports that eslint complains I should end with .ts. But I think Im gonna have to ditch eslint for tslint unless they can work together somehow. Still finding that out..
– kyw
Nov 9 at 12:25

You might be able to supress the rule if it's a problem for you.
– Fenton
Nov 9 at 13:20

ECMAScript module specification does not say that file extension is necessary. Module resolution process is an implementation-defined abstract operation, the spec says nothing about file extensions there.
– artem
Nov 9 at 15:32

@artem - quite right. It's the browser implementation, not the spec. Thanks for the comment.
– Fenton
Nov 12 at 8:59

add a comment |

up vote
1
down vote

If you use .js it should work at compile time, ESLint scan time, and when running.

The reason ESLint picks up on this is that some browsers require the file extension for their module loaders.

import spacing from "../css/spacing.js";

If you are using RequireJS or similar, it is optional - but given it works with the extension across module loaders it is probably a safe bet to use the .js.

edited Nov 12 at 8:59

answered Nov 9 at 10:44

Fenton

148k42279306

If you use .js it should work at compile time, ESLint scan time, and when running.

The reason ESLint picks up on this is that some browsers require the file extension for their module loaders.

import spacing from "../css/spacing.js";

If you are using RequireJS or similar, it is optional - but given it works with the extension across module loaders it is probably a safe bet to use the .js.

edited Nov 12 at 8:59

answered Nov 9 at 10:44

Fenton

148k42279306

edited Nov 12 at 8:59

answered Nov 9 at 10:44

Fenton

148k42279306

answered Nov 9 at 10:44

Fenton

148k42279306

answered Nov 9 at 10:44

Fenton

148k42279306

Thanks. Importing js files without .js has always been fine. Issue is with ts files imports that eslint complains I should end with .ts. But I think Im gonna have to ditch eslint for tslint unless they can work together somehow. Still finding that out..
– kyw
Nov 9 at 12:25

You might be able to supress the rule if it's a problem for you.
– Fenton
Nov 9 at 13:20

ECMAScript module specification does not say that file extension is necessary. Module resolution process is an implementation-defined abstract operation, the spec says nothing about file extensions there.
– artem
Nov 9 at 15:32

@artem - quite right. It's the browser implementation, not the spec. Thanks for the comment.
– Fenton
Nov 12 at 8:59

add a comment |

Thanks. Importing js files without .js has always been fine. Issue is with ts files imports that eslint complains I should end with .ts. But I think Im gonna have to ditch eslint for tslint unless they can work together somehow. Still finding that out..
– kyw
Nov 9 at 12:25

You might be able to supress the rule if it's a problem for you.
– Fenton
Nov 9 at 13:20

ECMAScript module specification does not say that file extension is necessary. Module resolution process is an implementation-defined abstract operation, the spec says nothing about file extensions there.
– artem
Nov 9 at 15:32

@artem - quite right. It's the browser implementation, not the spec. Thanks for the comment.
– Fenton
Nov 12 at 8:59

Thanks. Importing js files without .js has always been fine. Issue is with ts files imports that eslint complains I should end with .ts. But I think Im gonna have to ditch eslint for tslint unless they can work together somehow. Still finding that out..
– kyw
Nov 9 at 12:25

You might be able to supress the rule if it's a problem for you.
– Fenton
Nov 9 at 13:20

ECMAScript module specification does not say that file extension is necessary. Module resolution process is an implementation-defined abstract operation, the spec says nothing about file extensions there.
– artem
Nov 9 at 15:32

@artem - quite right. It's the browser implementation, not the spec. Thanks for the comment.
– Fenton
Nov 12 at 8:59

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl