Mqx•10mo 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•10mo 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

MqxOP•10mo 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•10mo 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

MqxOP•10mo 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•10mo 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

MqxOP•10mo 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•10mo 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

MqxOP•10mo 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•10mo 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•10mo 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

MqxOP•10mo ago

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

Deno AI Helper•10mo 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•10mo ago

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

MqxOP•10mo 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•10mo 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.

MqxOP•10mo ago

Thanks for your suggestion. I tried that with a tsconfig.json, it did not work 😦 The AI Helper was saying that the tsconfig gets ignored, but the documentation says it gets picked up… strange What do you mean by that? Also there is no “type” or “types” key in the deno.json config Only the tsconfig.json supports that

MqxOP•10mo ago

https://docs.deno.com/runtime/manual/advanced/typescript/types https://docs.deno.com/runtime/manual/advanced/typescript/configuration#using-the-types-property

Types and Type Declarations | Deno Docs

One of the design principles of Deno is no non-standard module resolution. When

Configuring TypeScript in Deno | Deno Docs

TypeScript comes with a lot of different options that can be configured, but

MqxOP•10mo ago

Ohh this actually works… using:

// @deno-types="./index.d.ts"

// @deno-types="./index.d.ts"

The only thing missing now is to be able to specify this globally so that I don’t need to configure this for every import… The config says that you can use the “types” key in the “compilerOptions” but this does not work @Deno AI Helper is it possible to define this in the global deno config?

Deno AI Helper•10mo ago

I wasn't able to find the answer to your question in the official Deno documentation. Deno does not currently support a global configuration file that applies to all projects. Configuration in Deno is typically done on a per-project basis using a deno.json or deno.jsonc file. If you're referring to a project-specific configuration file where you can specify compiler options, including type definitions, you can indeed create a deno.json or deno.jsonc file in your project root with the following content:

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

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

This file tells Deno's TypeScript compiler to include the specified type definitions when type checking your program. You would then run Deno commands with the --config flag pointing to your configuration file:

deno run --config ./deno.json your_script.ts

deno run --config ./deno.json your_script.ts

However, this advice is not based on the Deno documentation, and you should double-check the accuracy of this advice. Since Deno is designed to be secure and explicit, it may not support certain configurations that are common in other JavaScript environments. If you continue to experience issues, it may be worth considering alternative approaches or seeking assistance from the Deno community for more project-specific advice.

Helpful Links: Using Visual Studio Code | Deno Docs Node API Compatibility List | Deno Docs Deno 1.30: Built-in Node modules Deno Docs Deno 1.18 Release Notes Permissions | Deno Docs deno.json configuration file | Deno Docs Deno 1.16 Release Notes Configuring TypeScript in Deno | Deno Docs

MqxOP•10mo ago

This does not work with the types inside of the compilerOptions

Deno AI Helper•10mo ago

I apologize for the confusion. If specifying types inside the compilerOptions of a deno.json or deno.jsonc configuration file is not resolving the issue with importing SCSS files, it's possible that Deno's TypeScript compiler does not support this pattern for non-TypeScript assets. Since this advice is not based on the Deno documentation and it's not working for your use case, it's important to consider that Deno may not have a built-in feature to support importing SCSS files directly. Deno's module system is designed to work with JavaScript and TypeScript files, and it expects explicit module specifiers with extensions. As of my knowledge cutoff date in early 2023, Deno does not have a mechanism to globally configure type definitions for non-standard file types like SCSS. You may need to continue using your current build process with esbuild and handle SCSS files outside of Deno's native tooling. If you're looking for further assistance or if there have been updates to Deno that might address this issue, I recommend reaching out to the Deno community or checking the latest Deno documentation and release notes for any new features or workarounds that might have been introduced after my knowledge cutoff date.

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

MqxOP•10mo ago

https://docs.deno.com/runtime/manual/advanced/typescript/configuration#using-the-types-property The documentation says that I can specify a “types” key inside “compilerOptions” but this doesn’t work

Configuring TypeScript in Deno | Deno Docs

TypeScript comes with a lot of different options that can be configured, but

Deno AI Helper•10mo ago

The documentation does indeed mention that you can specify arbitrary type definitions to include when type checking a program by using the "types" property inside the "compilerOptions" in a Deno configuration file. However, this is generally used to include global type definitions that do not correspond to a module, rather than to inform the type checker about the default exports of modules. If specifying the "types" property in your deno.json or deno.jsonc configuration file is not having the desired effect, it's possible that there is a limitation or specific requirement that is not being met in your case. The documentation suggests that the "types" property can be used to include type definitions, but it does not elaborate on using it to associate type definitions with specific file extensions like .scss. Here's an example of how the "types" property might be used in a deno.json configuration file, according to the documentation:

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

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

If this is not working for your SCSS files, it could be due to the fact that Deno does not natively understand SCSS as a module format. The type definitions for SCSS files might not be recognized because Deno does not have a loader or a preprocessor for SCSS built into its runtime or type checker. Given this, you might need to continue using your current workaround with esbuild and possibly suppress the linter warnings if there is no other solution. If you believe this should work and it's not, it might be worth raising an issue in the Deno repository or seeking further assistance from the Deno community on platforms like the Deno Discord channel or the Deno issue tracker on GitHub. 🦕

Helpful Links: Deno Docs Deno Docs Deno Docs Is there a way to write a Deno.AtomicCheck that succeeds for any non-null versionstamp? - Deno Drop permissions - Deno

_Pear•10mo ago

I think this is the relevant documentation? https://docs.deno.com/runtime/manual/advanced/typescript/types#using-ambient-or-global-types

Using ambient or global types Overall it is better to use module/UMD type definitions with Deno, where a module expressly imports the types it depends upon. Modular type definitions can express augmentation of the global scope via the declare global in the type definition. For example:

declare global {
  var AGlobalString: string;
}

declare global {
  var AGlobalString: string;
}

This would make AGlobalString available in the global namespace when importing the type definition.

In some cases though, when leveraging other existing type libraries, it may not be possible to leverage modular type definitions. Therefore there are ways to include arbitrary type definitions when type checking programmes.

Types and Type Declarations | Deno Docs

One of the design principles of Deno is no non-standard module resolution. When

_Pear•10mo ago

idk why types doesn't work, may be worth opening an issue

MqxOP•10mo ago

Already opened an issue. Not directly for the type inside compilerOptions but that it doesn’t work as expected

MqxOP•10mo ago

A have opened a separate issue for the types. https://github.com/denoland/deno/issues/23319

GitHub

compileOptions in deno.json donesnt support types`, however t...

Version: deno 1.42.1 (release, x86_64-pc-windows-msvc) I tried to specify a .d.ts file in the compilerOptions in types in deno.json, but the file was not recognized/loaded. It looks like Deno would...

`declare module` doesn’t work

Did you find this page helpful?