`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.

[kono-paku]

Thank you for letting know the solution. I was trying to run in production level for testing. I could not work out because of twice building for SSR. SSR comping should be off for running in production level or the below code would work. I hope this would be helpful to someone for who is struggling.

const preactCliTypeScript = require('preact-cli-plugin-typescript');
const {resolve} = require('path');

// Set a path for entrypoint
const ENTRY_POINT_FILE_PATH = resolve(__dirname, 'src', 'app.js');

/**
 * 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);
  /**
   * Add a entry js file based on the URL below
   * https://github.com/wub/preact-cli-plugin-typescript/issues/3
   */
  config.resolve.alias['preact-cli-entrypoint'] = ENTRY_POINT_FILE_PATH;
  config.entry['ssr-bundle'] = ENTRY_POINT_FILE_PATH;
}