Guide on transforming absolute imports into relative imports using Rollup.js?

Question

Guide on transforming absolute imports into relative imports using Rollup.js?

Currently in the process of reorganizing my code and rewriting some TypeScript modules that are anticipated to be utilized by multiple microservices as packages.

Encountering an issue with absolute imports enabled by baseUrl in relation to this package conversion. Previously, I would

import { Thing } from "Place/That/I/Know";

where "Place/That/I/Know/" actually referenced

"src/Place/That/I/Know/"

. This change now triggers a Module not found error.

Considering utilizing Rollup.js to convert absolute imports, "Place/That/I/Know/", to relative imports "./Place/That/I/Know/". Came across a potential solution in this thread, but still seeking further guidance. Any recommendations?

typescript npm rollupjs

Answer 1

Answer №1

When it comes to transforming existing "absolute" imports such as

import "/some/absolute/path.js"

You can utilize the eslint rule path/no-absolute-imports

#!/usr/bin/env bash

NPM=npm
#NPM=pnpm
#NPM=yarn

$NPM init

$NPM install eslint https://github.com/qdanik/eslint-plugin-path

cat >.eslintrc.cjs <<'EOF'
module.exports =
{
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": "latest",
  },
  "plugins": ["path"],
  "rules": {
    "path/no-absolute-imports": "error"
  },
}
EOF

cat >jsconfig.json <<'EOF'
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
EOF

cat >test.js <<'EOF'
import "/some/absolute/path.js"
EOF

npx eslint --fix .

cat test.js

This will yield the following output:

import "./some/absolute/path.js"

One common use case for this technique is in adjusting absolute import paths of a web application, ensuring compatibility with platforms like GitHub Pages that require relative import paths

Please note, however, that this method does not address paths related to service workers

navigator.serviceWorker.register("/workers/service.js", {
  type: "module",
  scope: "/app",
});

Answer 2

When it comes to transforming existing "absolute" imports such as

import "/some/absolute/path.js"

You can utilize the eslint rule path/no-absolute-imports

#!/usr/bin/env bash

NPM=npm
#NPM=pnpm
#NPM=yarn

$NPM init

$NPM install eslint https://github.com/qdanik/eslint-plugin-path

cat >.eslintrc.cjs <<'EOF'
module.exports =
{
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": "latest",
  },
  "plugins": ["path"],
  "rules": {
    "path/no-absolute-imports": "error"
  },
}
EOF

cat >jsconfig.json <<'EOF'
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
EOF

cat >test.js <<'EOF'
import "/some/absolute/path.js"
EOF

npx eslint --fix .

cat test.js

This will yield the following output:

import "./some/absolute/path.js"

One common use case for this technique is in adjusting absolute import paths of a web application, ensuring compatibility with platforms like GitHub Pages that require relative import paths

Please note, however, that this method does not address paths related to service workers

navigator.serviceWorker.register("/workers/service.js", {
  type: "module",
  scope: "/app",
});

Guide on transforming absolute imports into relative imports using Rollup.js?

Answer №1

Similar questions

Utilizing getServerSideProps in the new app router (app/blah/page.tsx) for maximum functionality

Obtain data from a single module and incorporate it into a different one

Concealing a column within an Angular Material table

Access network path through browser using Angular

Steps to release a react application as an npm package

Is it possible for an Interface's property to be a type that contains an array?

Guide on setting up and configuring the seeder in MikroORM

Having trouble getting Typescript code to function properly when using commonjs style require statements

Is it recommended for the main, module, and browser properties in package.json to reference the minified version or the source

Leveraging command line arguments within an npm run script

What is the best way to transfer a Blob image from Angular2 to NodeJs?

Gulp seems to have lost track of its local whereabouts

The system does not acknowledge 'CI' as a command that can be used internally or externally, functioning program, or batch file

Troubleshooting the error of an undefined RouterModule

Angular index.html file can include a conditional script

Is there a way to simulate Pinia and vue-i18n simultaneously?

What is the process for assigning a serial number to each row in the MUI DataGrid?

adding new data rows to an existing data list using Angular

Display the initial x list items without utilizing ngFor in Angular 2

Utilize SWR in NextJS to efficiently manage API redirection duplication