Include CSS from lerna module in preact

Do you want to request a feature or report a bug?

Bug, likely a user configuration error thought.

What is the current behaviour?

Error is thrown during compilation when running preact watch

ERROR in /workspaces/preact-apps/packages/common/lib/components/Select.tsx(3,19): TS2307: Cannot find module ‘./select.css’ or its corresponding type declarations.

If the current behaviour is a bug, please provide the steps to reproduce.

The typescript app has been set up using the preact-cli create command. The app uses some shared code that is referenced through lerna in node_modules. I’ve already been using the shared code in another preact project that is using a custom configuration (webpack).

Folder structure:

├── packages
│   ├── common
│   │   └── components
│   │   │   ├── select.css
│   │   │   └── Select.tsx
│   ├── preact-cli-app
│   └── preact-webpack-app
└── lerna.json

preact-webpack-app uses the Select component. It runs and builds without issues.

Gists:

• webpack config.js for preact-webpack-app,
• preact.config.js for preact-cli-app,
• typings.d.ts,
• Select.tsx and select.css

The css-loader options for preact-cli-app are:

{
  modules: { localIdentName: '[local]__[hash:base64:5]' },
  importLoaders: 1,
  sourceMap: true
}

I’m including the common module in the css rules

    config.module.rules[4].include =  [
      path.resolve(__dirname, 'src', 'routes'),
      path.resolve(__dirname, 'src', 'components'),
      path.resolve(__dirname, 'node_modules', 'common')
    ];
    config.module.rules[5].exclude = [
      path.resolve(__dirname, 'src', 'routes'),
      path.resolve(__dirname, 'src', 'components'),
      path.resolve(__dirname, 'node_modules', 'common')
    ];

What is the expected behaviour?

Typescript to build components in the common module without errors.

If this is a feature request, what is motivation or use case for changing the behaviour?

N/A

Please mention other relevant information.

I’ve taken a look at similar issues in this repository (#1368, #1475, #1218, #522) and on stackoverflow. Unfortunately, none have helped thus far.

Please paste the results of preact info here.

Environment Info:
  System:
    OS: macOS 11.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    npm: 6.14.8 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 83.0
    Safari: 14.0.1
  npmPackages:
    preact: 10.5.5 => 10.5.5
    preact-cli: ^3.0.0 => 3.0.3
    preact-render-to-string: ^5.1.4 => 5.1.12
    preact-router: ^3.2.1 => 3.2.1
  npmGlobalPackages:
    preact-cli: 3.0.3

[rschristian]

@bhr Sorry, got busy right after work and could only look now.

Your issue is that your declaration file (typings.d.ts) isn’t actually included in your tsconfig.json. Simply add it to the include array and you should be good to go.

After making that small edit the project could then build. TS just didn’t know about the existence of that file is all.

[rschristian]

Whoops, sorry, didn’t realize .d.ts files were limited like that. I’ll take a look later. Repo helps a lot.