`preact build` fails with Module not found: Error

[variable-content]

Production builds are failing with the following error.

multi ./src/index.js
Module not found: Error: Can't resolve 'C:\dev-temp\preact-example\ts-test\src\index.js' in 'C:\dev-temp\preact-example\ts-test\src'
@ multi ./src/index.js

dev build's are working fine, however, using preact watch.

Reproduction steps:

1. Run preact create new-app
2. Run cd new-app
3. Run npm i preact-cli-plugin-typescript --save-dev
4. Rename all js files to tsx
5. Fix TS compilation errors (update style imports to use require, add missing types, etc.)
6. Run npm run build

Build fails, whereas npm start succeeds and the app runs.

[wub]

Thanks for this. Do you think it's anything to do with #2? I'll look into it ASAP.

[variable-content]

Doesn't appear to be. I get this error before at-loader has a chance to do its thing.

Thanks for looking into this!

[fend25]

@wub
I can confirm the issue.
Shorter way to reproduce:

1. preact create preact-test-ts preact_ts_test_dir
2. cd preact_ts_test_dir
3. npm i preact-cli-plugin-typescript --save-dev
4. mv src/index.js src/index.ts
5. modify preact.config.json and src/index.ts according to this:
   preact.config.js:

const preactCliTypeScript = require('preact-cli-plugin-typescript');
const {resolve} = require('path'); //this is new line

/**
 * Function that mutates original webpack config.
 * Supports asynchronous changes when promise is returned.
 *
 * @param {object} config original webpack config.
 * @param {object} env options passed to CLI.
 * @param {WebpackConfigHelpers} helpers object with useful helpers when working with config.
 **/
export default function (config, env, helpers) {
  preactCliTypeScript(config);

  config.resolve.alias['preact-cli-entrypoint'] = resolve(__dirname, 'src', 'index.ts'); //this is new line
}

src/index.ts:

import './style';
import App from './components/app.js';

export default App;

6. npm run start
   it works!
7. npm run build
   it fails with such message:

multi ./src/index.js
Module not found: Error: Can't resolve '/Users/user/preact_ts_test_dir/src/index.js' in '/Users/alex/Sync/code/lifestream/front/test/src'
 @ multi ./src/index.js
Build failed!

according to @variable-content it's like that preact-cli trying to reach default path (something like ./src or ./src/index I guess) and doesn't find index.ts file as well.

[fend25]

@variable-content
There is a bypass!
All you need is just do not rename index.js to index.ts (and importing ts files from js files will work). And do not change preact.config.js. That's all. It builds!

[variable-content]

Thanks for the suggestion @fend25. Unfortunately this workaround doesn't seem to work for me. Are you able to upload an example to a repo for me to compare with?

I get this error when using an index.js file that references a .tsx component:

./~/preact-cli/lib/lib/entry.js
Module not found: Error: Can't resolve 'preact-cli-entrypoint' in 'C:\Git\WebWidgets\Prototype-Preact\node_modules\preact-cli\lib\lib'
 @ ./~/preact-cli/lib/lib/entry.js 15:25-57 21:27-59
 @ multi ./~/preact-cli/lib/lib/entry
Build failed!

[fend25]

@variable-content you get this error because you are patching webpack config in preact.config.js.
Just remove the entrypoint patching line and you will be able to hack the lib further.

By the way, .tsx files don't import .css files properly. See #4.

[variable-content]

@fend25 still no luck with that adjustment, but it's likely I'm misunderstanding the workaround, if you have time to upload your working app to a repo somewhere for me to compare with that would be appreciated!

[fend25]

@variable-content
https://github.com/fend25/preact_ts_test

[variable-content]

Thanks for you help @fend25. Got there in the end with your tsconfig with a slight addition:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "jsx": "react",
    "jsxFactory": "h",
    "allowJs": true,
    "lib": [ "es6", "dom" ]
  }
}

@wub Would be great to add some documentation on how this should be set up, or create an example repo that uses this plugin and has been updated to use typescript for people to follow as an example/starting point for their app.

[wub]

Thanks for this, @variable-content / @fend25, this definitely needs some more work and documentation/examples. I'll merge that config in + get an example repo up.