Mqx•6mo ago

`declare module` doesn’t work

I was trying to declare a module like so:

declare module "*.scss";

declare module "*.scss";

But this simply doesn’t have any effect whatsoever. I also tried this:

declare module "*.scss" {
  const content: string;
  export default content;
}

declare module "*.scss" {
  const content: string;
  export default content;
}

None of this worked. I don’t know if .d.ts file are simply ignored by Deno or if this is a bug, or I have done something wrong. This is the GitHub Issue: https://github.com/denoland/deno/issues/23007 I appreciate any help 👍🏻 Thanks

GitHub

declare module inside .d.ts does not get picked up by Deno · Is...

Hey, I currently have a problem when importing non js/ts files inside a js/ts file. deno-ts shows an error with non-resolvable imports for non-js/ts files. For example i have this index.ts files, s...

27 Replies

Deno AI Helper•6mo ago

In Deno, type declaration files (.d.ts files) follow the same semantics as other files, which means that declaration files are assumed to be module declarations and not ambient/global declarations. The behavior of Deno with ambient/global declarations is unpredictable. This is likely the reason why your declare module "*.scss"; isn't working as expected. Additionally, if a type declaration imports something else, like another .d.ts file, its resolution follows the normal import rules of Deno. Many .d.ts files that are generated and available on the web may not be compatible with Deno because of this. To overcome the problem with module declarations, some solution providers, like Skypack CDN, will automatically bundle type declarations just like they provide bundles of JavaScript as ESM. This means that you might need to use a CDN that provides type declarations in a way that is compatible with Deno's import rules. If you are trying to import styles from a .scss file, you might need to look into a Deno-friendly solution that can handle SCSS files and provide the appropriate TypeScript type declarations that Deno can understand. This might involve using a build step that compiles the SCSS to CSS and generates a compatible .d.ts file, or finding a CDN that can serve the SCSS file with the correct type declarations for Deno. For more detailed information on how Deno handles type declarations and to explore possible solutions, you can refer to the documentation on type declaration semantics and Deno-friendly CDNs. 🦕

Helpful Links: Deno Docs Deno Docs Configuring JSX in Deno | Deno Docs Deno 1.4 Release Notes Use Deno as a type checker for a front-end project? - Deno Deno Docs Parsing and Stringifying CSS | Deno Docs

Mqx•6mo ago

I am currently trying to import my own scss files into web components defined in my own ts files. Deno does not recognize the scss file extension because it isn’t a valid ts module so it throws an error at the import and says that this file does not have a default export

Deno AI Helper•6mo ago

In Deno, importing non-JavaScript/TypeScript assets such as SCSS files directly into your TypeScript files isn't supported out of the box. Deno expects modules to be JavaScript or TypeScript files, and it doesn't have a built-in mechanism for handling other file types as modules. However, you can work around this limitation by using a plugin or a preprocessor to convert your SCSS files into CSS and then import them as strings into your TypeScript files. One approach is to use a build step that compiles SCSS to CSS and then utilizes a bundler or a tool to convert the CSS into a TypeScript module that exports a string. For example, you could use a tool to convert your .scss file into a .css.ts file that looks something like this:

// styles.css.ts
const css = `/* compiled CSS here */`;
export default css;

// styles.css.ts
const css = `/* compiled CSS here */`;
export default css;

Then, you can import this TypeScript file into your web component:

import styles from './styles.css.ts';

class MyComponent extends HTMLElement {
  // Use the styles in your component
}

import styles from './styles.css.ts';

class MyComponent extends HTMLElement {
  // Use the styles in your component
}

This approach requires a build step before you run your Deno application, but it allows you to integrate SCSS into your TypeScript files in a way that Deno can understand. Please note that this advice is not based on the Deno documentation, and you should double-check the accuracy of this approach and ensure it fits within your project's build process and requirements.

Helpful Links: Deno 1.4 Release Notes Deno Docs Configuring JSX in Deno | Deno Docs Importing & Exporting - Deno by Example Deno Docs You Don't Need a Build Step Deno Runtime Quick Start | Deno Docs Deno Docs Fresh 1.6: Tailwind CSS plugin, simplified typings and more

Mqx•6mo ago

This is what I currently do. I use ESbuild to transpile and bundle my scss. This works but the Deno linter throws errors at that line where I import the scss directly into the ts file.

Deno AI Helper•6mo ago

If you're using esbuild to transpile and bundle your SCSS and it's working correctly, but Deno's linter is throwing errors when you import the SCSS file, you can try to suppress the linter errors for that specific line using a comment to ignore the next line. Here's how you can do it:

// deno-lint-ignore-file no-default-export
import styles from './styles.css.ts';

// deno-lint-ignore-file no-default-export
import styles from './styles.css.ts';

This comment tells Deno's linter to ignore the no-default-export rule for the entire file. If you want to ignore the rule for just the specific line, you can use:

// deno-lint-ignore no-default-export
import styles from './styles.css.ts';

// deno-lint-ignore no-default-export
import styles from './styles.css.ts';

Please note that this is a workaround to suppress linter warnings and should be used judiciously. It's important to ensure that the rest of your codebase adheres to the linter's rules to maintain code quality. Remember, this advice is not directly from the Deno documentation, so you should verify that it works for your specific use case and fits within your project's guidelines.

Helpful Links: Deno 1.11 Release Notes Deno 1.4 Release Notes Deno 1.8 Release Notes Deno Docs Importing & Exporting - Deno by Example Deno Docs Deno Docs Subprocess - Deno

Mqx•6mo ago

Is there a way to tell the linter that the scss import does have a default export so that the linter can resolve that import instead of ignoring it using the comment?

Deno AI Helper•6mo ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the information you've provided, it seems that the Deno linter is not recognizing the default export of your SCSS file because it's not a TypeScript or JavaScript module. Deno's linter does not have a built-in understanding of non-JavaScript/TypeScript assets being imported as modules, which is why it's reporting an error. Since the SCSS file is being processed by esbuild and not directly by Deno, the linter does not know about the transformation that esbuild performs. One potential workaround, which is not based on the Deno documentation, is to create a declaration file (.d.ts) for your SCSS module. This file would declare the module and specify that it has a default export of type string. Here's an example of what this declaration file might look like:

// styles.scss.d.ts
declare module "*.scss" {
  const content: string;
  export default content;
}

// styles.scss.d.ts
declare module "*.scss" {
  const content: string;
  export default content;
}

You would place this file somewhere in your project where Deno can find it when resolving module types. This tells the TypeScript compiler (and potentially the Deno linter) that when it encounters an import for a .scss file, it should treat it as a module with a default export of type string. Please double-check the accuracy of this advice, as it is not based on the Deno documentation, and ensure that it aligns with your project's setup and requirements.

Helpful Links: Deno 1.37: Modern JavaScript in Jupyter Notebooks Deno 1.4 Release Notes deno lint, linter | Deno Docs Deno 1.42: Better dependency management with JSR Deno Docs Fresh 1.3 – Simplified Route Components and More Deno Docs deno doc, documentation generator | Deno Docs

Mqx•6mo ago

I tried that an Deno simply ignores the d.ts declaration file. Do I need to import it somewhere or specify it in the Deno configuration file or so? Because it looks like Deno isn’t able to pick up the file. Also what do you mean with „You would place this file somewhere in your project where Deno can find it when resolving module types“ I have placed the file in the root of my project, named „index.d.ts“ and have pasted the content for the type declaration, you described. But it still doesn’t work.

Deno AI Helper•6mo ago

According to the documentation, Deno does not have a special mechanism for resolving .d.ts files for non-TypeScript modules like SCSS files. Deno expects explicit module specifiers with extensions, and it will attempt to resolve types for a file in the order of .ts, .d.ts, and finally .js. However, the documentation does mention a couple of ways to include type definitions when type checking programs: 1. Using a triple-slash directive: This option couples the type definitions to the code itself. By adding a triple-slash types directive near the top of a module, type checking the file will include the type definition. For example:

/// <reference types="./index.d.ts" />

/// <reference types="./index.d.ts" />

The specifier provided is resolved just like any other specifier in Deno, which means it requires an extension and is relative to the module referencing it. 2. Using a configuration file: Another option is to use a configuration file that is configured to include the type definitions by supplying a "types" value to the "compilerOptions". For example:

{
  "compilerOptions": {
    "types": [
      "./index.d.ts"
    ]
  }
}

{
  "compilerOptions": {
    "types": [
      "./index.d.ts"
    ]
  }
}

You would then tell Deno to use this configuration file by specifying the --config=path/to/file flag when running your Deno command. If you have already created an index.d.ts file in the root of your project and Deno is not picking it up, you might need to reference it explicitly using one of the methods above. If you choose to use a configuration file, make sure to pass the --config flag with the path to your configuration file when running Deno. Please note that these methods are intended for including type definitions for JavaScript modules or for including arbitrary type definitions in your program. Since SCSS is not a

Deno AI Helper•6mo ago

JavaScript module, the behavior might not be as expected, and Deno's tooling may not support this use case directly. If the issue persists, it may be necessary to consider alternative approaches, such as converting SCSS to CSS during a build step and importing the resulting CSS as a string, or using a plugin system that can handle SCSS files in a way that is compatible with Deno's module resolution.

Helpful Links: Deno Docs Deno Docs Deno Docs Types and Type Declarations | Deno Docs Configuring TypeScript in Deno | Deno Docs

Mqx•6mo ago

None of these methods work… deno-ts still states that styles.scss does not have a default export

Deno AI Helper•6mo ago

I apologize for the inconvenience. It seems that the methods I mentioned are not resolving the issue with importing SCSS files in Deno. Since Deno is primarily designed to work with JavaScript and TypeScript modules, it does not have built-in support for importing SCSS files or other assets as modules. Given that the methods I provided are not based on the Deno documentation and are not working for your use case, I recommend looking into alternative approaches that fit within Deno's module system. One common approach is to use a build step to convert SCSS files into CSS and then import them as strings or to use a JavaScript module that contains the styles. Since Deno does not have a built-in system for handling SCSS files, you might need to rely on external tools or preprocessors that are compatible with Deno's import system. This could involve using a build script to compile SCSS to CSS and then importing the CSS as a string, or using a Deno plugin or third-party library designed to handle styles within Deno's constraints. I understand this may not be the answer you were hoping for, but it reflects the current capabilities and limitations of Deno regarding non-JavaScript/TypeScript assets. If you have further questions or need assistance with Deno's features or best practices, feel free to ask.

Helpful Links: Deno 1.4 Release Notes Using CSP | Fresh docs You Don't Need a Build Step Using Web Platform APIs | Deno Docs Configuring JSX in Deno | Deno Docs Deno Docs Deno 1.37: Modern JavaScript in Jupyter Notebooks Deno Docs Deno Docs

Deno AI Helper•6mo ago

🦕 Oops! Can you pinpoint where I went wrong to help me improve? 📈

Mqx•6mo ago

I hope someone from the community can help me with this… But I don’t know if I am allowed to ping someone who knows more about this

_Pear•6mo ago

Hi, i had similar confusion with the d.ts file and opened an issue but I didnt get much response. My issue was with namespaces. In the docs somewhere (ill try to find and link) it says that .d.ts files are treated somewhat differently than in envs we are used to. Idk why this is the case. Did you try adding a TypeScript config with the types field pointing to the d.ts file? might help but idk! my understanding is: modules from .ts files should work, but not from d.ts files again, not sure if that is 100% accurate but it has worked for me.