Ts-node: Imports wrong (CSS/LESS) file

[omichelsen]

I have mocha unit tests of my React components that looks like this:

Component (select.tsx):

import { h } from 'preact'
import * as styles from './select.less'

export const Select = (props: any) => {
...

Unit test (select.test.tsx):

import { h } from 'preact'
import { expect } from '../../../../test/expect'
import { Select } from './select'

describe('component', () => {
    describe('Select', () => {
...

However when I run them, my "Select" component returns undefined because ts-node is picking up the "select.less" file instead of my "select.tsx" file. If I delete the .less file and comment out the import, everything runs fine.

I have tried renaming the .less file to .css just for fun, but that still doesn't work. All files are in the same folder btw.

I don't understand why ts-node resolves the path to my .less file at all. The code is normally served through webpack, and here there are no problems?

Previously I could force the import with import { Select} from './select.tsx, but as of ts-node v6 I don't think that is allowed anymore.

Is there a way I can make ts-node ignore/skip the .less file and pick the correct .tsx file?

[blakeembrey]

It's because you wrote import from './select.less'. Please see https://github.com/TypeStrong/ts-node#how-it-works and if you don't understand how node.js resolves modules, see https://nodejs.org/api/modules.html#modules_all_together (notice it loads the exact file name first before trying suffixes).

[omichelsen]

For future reference I found the problem. I was registering the "ignore stylesheet extensions" script _before_ I loaded ts-node in my mocha setup.

Before:

--require test/setup.js
--require ts-node/register

After:

--require test/setup.js
--require ts-node/register

My test/setup.js looks like this:

const noop = () => undefined
require.extensions['.less'] = noop

Thanks.