awesome-typescript-loader icon indicating copy to clipboard operation
awesome-typescript-loader copied to clipboard

yarn workspace import not getting compiled but does compile from relative path

Open dagda1 opened this issue 6 years ago • 1 comments

I have a yarn workspaces monorepo and I have a dependency like this:

import * as React from 'react';
import { Input } from '@my/util'; 

export const Login: React.SFC = () => (
  <div>
    <Input />
  </div>
);

I have logged the filenames here and the dependency does not appear.

But if I change the import to a relative path:

import * as React from 'react';
import { Input } from '../../../../../common/frontend-util/src/Input/Input';

export const Login: React.SFC = () => (
  <div>
    <Input />
  </div>
);

Then the file does appear and it compiles.

My config looks like this:

    output: {
      path: path.resolve('dist'),
      publicPath: '/'
    },
    resolve: {
      modules: [path.join(process.cwd(), modulesDirectory), path.join(process.cwd(), 'src')],
      extensions: ['.ts', '.tsx', '.scss', '.js'],
      alias: isDevelopment
        ? {
            'webpack/hot/poll': require.resolve('webpack/hot/poll')
          }
        : {}
    },
    module: {
      strictExportPresence: true,
      rules: filter([
        {
          exclude: [
            /\.html$/,
            /\.jsx?$/,
            /\.jsx?$/,
            /\.tsx?$/,
            /\.css$/,
            /\.json$/,
            /\.bmp$/,
            /\.gif$/,
            /\.jpe?g$/,
            /\.png$/,
            /\.scss$/,
            /\.woff2?$/,
            /\.eot$/,
            /\.ttf$/,
            /\.svg$/,
            /\.csv$/,
            /\.md$/
          ],
          loader: 'file-loader',
          options: { name: staticAssetName }
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2|jpg|png)$/,
          loader: 'url-loader',
          options: { name: staticAssetName, limit: 10000 }
        },
        {
          test: /\.tsx?$/,
          loader: 'awesome-typescript-loader',
          options: merge({ useBabel: false, useCache: false, forceIsolatedModules: true }, typescriptOptions)
        },

I'm not sure why this happening.

How can I debug this better or why would it not be selected for transformation?

dagda1 avatar Jun 21 '18 15:06 dagda1

I have a similar setup except forceIsolatedModules and it works. Do you have e.g.

  "paths": {
    "@my/util": ["./common/frontend-util/src"]
  },

in your tsconfig.json?

jacobrask avatar Aug 17 '18 10:08 jacobrask