I cannot figure out how to create aliases with Zen & Typescript about larix HOT 21 CLOSED

@alienfacepalm I'm working on better error messages for this situation and on the feature that you will be able to omit stack in the builders and stack will be autodetected in this case. Improvements will make into @larix/[email protected] soon

from larix.

@alienfacepalm I have added stack-autodetect feature into @larix/[email protected] as well as more user-friendly errors for this case, that should help you recover from situations like this much faster, You can now remove stack property everywhere in .zenrc.js and it will autodetect proper stack for you.

from larix.

@alienfacepalm I think to support TS paths something like this plugin should be used:
https://github.com/dividab/tsconfig-paths-webpack-plugin

from larix.

Sick thanks man!

from larix.

@alienfacepalm Well, I am going to add this behavior soon, it will scan package.json for this dep and add it to generated webpack config. But for now, you can add this plugin in your .zenrc.js -> config -> options -> webpackConfig -> resolve -> plugins

from larix.

So stumped again, not sure where to put the custom webpack config since Zen is generating everything else. Do I put a .zenrc.js at the root of the monorepo or within each package? Sorry if I'm being dense.

const { TsConfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ]
}

Should it be something like this?

const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

const config = {
  builders: {
    core: {
      stack: ['web'],
      entry: 'src/index.tsx',
      webpackConfig: {
        plugins: [new TsConfigPathsPlugin()]
      }
    }
  }
}

module.exports = config

If so the main issue is the vendor of undefined error I can't seem to squash. Thanks a lot.

from larix.

Yeah I figured, still getting zen error TypeError: Cannot read property 'vendor' of undefined

with config

const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

const config = {
  builders: {
    core: {
      stack: ['web', 'react'],
      entry: './src/index.ts',
      webpackConfig: {
        plugins: [new TsConfigPathsPlugin()]
      }
    }
  }
}

module.exports = config

I'll keep hacking to try to workaround.

from larix.

@alienfacepalm If your entry is inside src/index.tsx. use entry: './src/index.tsx', exactly like this, because if your entry do not strat with a dot, webpack will search it inside node_modules

from larix.

Yeah I tried all that, vendor error each time. I went into the executor and tried to figure out why, but didn't get very far. I'll keep trying.

from larix.

@alienfacepalm I will be able to help you quickly if you set up repo on GitHub which reproduces the problem

from larix.

Ok, I did a new create-apollo-app, changed spin to zen and added .zenrc.js to web package. It does the same thing here. yarn start from monorepo root. https://github.com/alienfacepalm/vendorbug

from larix.

@alienfacepalm Thanks, looking....

from larix.

@alienfacepalm The quick solution is to drop builders key from your .zenrc.js. Do you really need to do per-builder config, if not, just drop builders and let zen populate them itself

from larix.

@alienfacepalm If you have builders section, right now zen expects that stack property correctly filled in. So the other way to fix it, is to fill in stack in your builders -> web, e.g.:

      stack: ['web',
           'es6',
           'js',
           'ts',
           'apollo',
           'react',
           'css',
           'sass',
           'less',
           'webpack'],

from larix.

@alienfacepalm What I can do to make this simpler - is to ignore stack in zen completely and let zen fill it in, in any case...

from larix.

My main reason to use the .zenrc.js is to do some custom webpackConfig like aliases. OK I'll try all this. I use storybook too, but could only get it working with its own webpack.config.js file, which is fine, but I noticed zen supports it, but I couldn't get it to work by adding to the stack. Thanks man.

from larix.

@alienfacepalm There is a storybook integration example in the docs:
https://github.com/sysgears/larix/blob/master/packages/zen/docs/programmatic.md

from larix.

@alienfacepalm You are having 404 because you have instructed zen, that your app is rendered on server ssr: true, set ssr: false, because your server code is not doing server side rendering now.

from larix.

@alienfacepalm I had also have to upgrade apollo-server-express, because one of its dependencies requires old version of core-js, which looks like as a bug to me, e.g. from the root dir execute:
yarn workspace tofail-server add apollo-server-express

from larix.

Yeah I figured that out, thanks. It's all running as long as I use the long list in stack. Thank you very much.

from larix.

Wow sweet. I had our devops switch us over to Zen, super impressive ease of use.

from larix.