Typescript support - Githubissues

zlwu commented 5 years ago

Thanks for this great tool. My project is base on typescript, the react-native-bundle-visualizer command prompts lacking .js file and stopped. Any idea on how to support typescript?

IjzerenHein commented 5 years ago

So what file does it have, index.ts in the root?

zlwu commented 5 years ago

index.js in the root, which will import App.tsx

I did create a very simple app by 'react-native init MyAwesomeProject --template typescript' (which I removed the App.js and only App.tsx remains, which is imported by index.js directly). The output of react-native-bundle-visualizer is as follows.

 yarn run v1.9.4
$ /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/.bin/react-native-bundle-visualizer

 INFO  loaded babel-loader configuration: /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/.babelrc

 INFO  Assets Destination: /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject

 INFO  Bundle output: index.ios.bundle

 INFO  Bundle output (resolved): /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/index.ios.bundle
Webpack: Starting ...

 INFO  Haul is now bundling your React Native app in production mode.

Starting from:

/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/haul/src/vendor/polyfills/console.js
/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/haul/src/vendor/polyfills/error-guard.js
/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/haul/src/vendor/polyfills/Number.es6.js
/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/haul/src/vendor/polyfills/String.prototype.es6.js
/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js
/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/haul/src/vendor/polyfills/Array.es6.js
/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/haul/src/vendor/polyfills/Object.es7.js
/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/haul/src/vendor/polyfills/babelHelpers.js
/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/react-native/Libraries/Core/InitializeCore.js
/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/haul/src/utils/polyfillEnvironment.js
Webpack: Starting ...

  ✔ Compile modules
  ✔ Build modules
  ✔ Optimize modules
  ✔ Emit files

Webpack: Finished after 5.001 seconds.

 ERROR  Failed to compile.

./index.js
Module not found: Error: Can't resolve './App' in '/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject'
resolve './App' in '/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject'
 using description file: /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/package.json (relative path: .)
   Field 'browser' doesn't contain a valid alias configuration
   using description file: /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/package.json (relative path: ./App)
     no extension
       Field 'browser' doesn't contain a valid alias configuration
       /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/App doesn't exist
     .ios.js
       Field 'browser' doesn't contain a valid alias configuration
       /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/App.ios.js doesn't exist
     .native.js
       Field 'browser' doesn't contain a valid alias configuration
       /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/App.native.js doesn't exist
     .js
       Field 'browser' doesn't contain a valid alias configuration
       /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/App.js doesn't exist
     as directory
       /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/App doesn't exist
[/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/App]
[/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/App.ios.js]
[/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/App.native.js]
[/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/App.js]
@ ./index.js 1:156-172
@ multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js
✨  Done in 7.91s.

IjzerenHein commented 5 years ago

Hi, in this case you will need to define a custom haul.config.js in the root of your project in order for haul to work properly. Please follow the TypeScript instruction and let me know whether that works: https://github.com/callstack/haul/blob/next/docs/Recipes.md#typescript

zlwu commented 5 years ago

Thank you for your great help. I followed the instructions and try again, but still not work even use the pure haul command (without visualize plugin)

 ERROR  Failed to compile.

./App.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for /Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/App.tsx.
   at makeSourceMapAndFinish (/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/ts-loader/dist/index.js:78:15)
   at successLoader (/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/ts-loader/dist/index.js:68:9)
   at Object.loader (/Users/zwu/Work/Samples/hybridapp/reactnative/MyAwesomeProject/node_modules/ts-loader/dist/index.js:22:12)
@ ./index.js 1:156-172
@ multi ./node_modules/haul/src/vendor/polyfills/Object.es6.js ./node_modules/haul/src/vendor/polyfills/console.js ./node_modules/haul/src/vendor/polyfills/error-guard.js ./node_modules/haul/src/vendor/polyfills/Number.es6.js ./node_modules/haul/src/vendor/polyfills/String.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.prototype.es6.js ./node_modules/haul/src/vendor/polyfills/Array.es6.js ./node_modules/haul/src/vendor/polyfills/Object.es7.js ./node_modules/haul/src/vendor/polyfills/babelHelpers.js ./node_modules/react-native/Libraries/Core/InitializeCore.js ./node_modules/haul/src/utils/polyfillEnvironment.js ./index.js

And the haul config is as follows

// import Visualizer from 'webpack-visualizer-plugin';
import { createWebpackConfig } from "haul";

export default {
  webpack: env => {
    const config = createWebpackConfig({
      entry: "./index.js",
    })(env);

    config.module.rules = [
      {
        test: /\.tsx?$/,
        exclude: '/node_modules/',
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'ts-loader',
          }
        ]
      },
      ...config.module.rules,
    ];

    config.resolve.extensions = [
      '.ts',
      '.tsx',
      `.${env.platform}.ts`,
      '.native.ts',
      `.${env.platform}.tsx`,
      '.native.tsx',
      ...config.resolve.extensions,
    ]

    // config.plugins.push(new Visualizer());

    return config;
  }
};

And I find that I can use the react-native bundle command to generate the sourcemap and use source-map-explorer tool to visualize the bundle size (the generated html is not as fancy as this tool).

IjzerenHein commented 4 years ago

Hi. A new V2 version has been released which uses the Metro bundler. If you have configured your project to work with TypeScript then it should work with the V2 version as well. I'm closing this, but feel free to reopen in case TypeScript still doesn't work

IjzerenHein / react-native-bundle-visualizer

Typescript support #13