Fixing “Cannot find module” loading JSX or Typescript modules in Node

If you start mixing Javascript and JSX or Typescript into a Node application, you can start to get module loading failures, even though you might be able to build all the files individually with Webpack:

> image-annotation@1.0.0 start D:\projects\image-annotation
> node index

module.js:440
    throw err;
    ^

Error: Cannot find module 'LectureSearchConfig'
    at Function.Module._resolveFilename (module.js:438:15)
    at Function.Module._load (module.js:386:25)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object. (D:\projects\image-annotation\src\lecture_search\LectureSearchApp.jsx:14:14)
    at Module._compile (module.js:541:32)
    at Object.require.extensions.(anonymous function) [as .jsx] (D:\projects\image-annotation\node_modules\node-jsx\index.js:29:12)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)

The basic problem is that even though you’ve told Webpack about these file types, Node doesn’t know about them. You need to decide if this is something you want – for development, it makes sense to allow Node to compile things while it runs, because you can automatically reload the page this way, but in a production environment you may prefer the built files.

To make node aware, you need to add these. If you’re only using one, you obviously only need that item. It’s funny to see how these are completely different naming schemes, which is a downside of the decentralized nature of Javascript development.

require("node-jsx").install({extension: ".jsx"});
require("ts-node").register();

Obviously you also need to install these:

npm install node-jsx --save
npm install ts-node --save