New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

typescript with next & absolute imports breaks vs code integration #136

Closed
brandonmp opened this Issue Apr 8, 2018 · 4 comments

Comments

Projects
None yet
3 participants
@brandonmp

brandonmp commented Apr 8, 2018

This may be a Code / Typescript issue, but wanted to post here in case anyone's solved it.

Has anyone been able to make absolute import paths work with next-typescript without losing VS Code module resolution?

Currently using absolute imports via babel-plugin-module-resolver, but whenever I call import Whatever from 'absolute/whatever', Code reports that the 'Cannot find the module' (relative imports work fine).

Project builds fine, but editor integration would be clutch.

Have tried:

  • setting path and baseUrl props in tsconfig.json
  • setting aliases via config.resolve.alias in next.config.js
  • using module-aliases in lieu of the babel plugin

But nothing seems to make the editor resolve paths correctly.

relevant versions

@zeit/next-typescript 0.1.1
next 5.1.0
typescript 2.9.0 (@next)
babel-plugin-module-resolver 3.0.0
VS Code 1.21.1
@brandonmp

This comment has been minimized.

brandonmp commented Apr 8, 2018

I've created a repository and an SO question to accompany this issue

@brandonmp

This comment has been minimized.

brandonmp commented Apr 12, 2018

closing b/c i've somehow fixed this, though unclear on what did it.

for wayward googlers, here's my relevant .babelrc:

[
            "module-resolver",
            {
                "root": ["./"],
                "alias": {
                    "@components": "./components",
                    "@styles": "./styles",
                    "@utils": "./utils",
                    "@static": "./static",
                    "@higher-order-components": "./higher-order-components",
                    "@content": "./content",
                    "@src": "./src",
                    "@pages-code": "./pages-code",
                    "@pages": "./pages",
                    "@typings": "./typings",
                    "@server": "./server"
                }
            }
        ]

and in tsconfig.json:

  "baseUrl": ".",
        "paths": {
            "@components/*": ["./components/*"],
            "@utils/*": ["./utils/*"],
            "@styles/*": ["./styles/*"],
            "@static/*": ["./static/*"],
            "@higher-order-components/*": ["./higher-order-components/*"],
            "@content/*": ["./content/*"],
            "@src/*": ["./src/*"],
            "@pages-code/*": ["./pages-code/*"],
            "@pages/*": ["./pages/*"],
            "@server/*": ["./server/*"],
            "@typings/*": ["./typings/*"],
            "store/*": ["./src/store/*"]
        }

I am not sure why this wasn't working initially. I cleared any settings having to do with typescript & added tslint.json to the project, but afaik those shouldn't have affected IDE type checking. but, works like a charm now, so no complaints.

@brandonmp brandonmp closed this Apr 12, 2018

@olegsmetanin

This comment has been minimized.

olegsmetanin commented Nov 11, 2018

It seems baseUrl from tsconfig.json doesn't apply at all. Only module-resolver in .babelrc matters.

@valoricDe

This comment has been minimized.

valoricDe commented Dec 3, 2018

The baseUrl needs to be configured in next.config.js as well. Ideally @zeit/next-typescript would take care of that like I did below at config.resolve.modules.unshift(__dirname):

// next.config.js
//const withPreact = require('@zeit/next-preact')
const withTypescript = require('@zeit/next-typescript')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = /*withPreact*/(withTypescript({
  webpack(config, options) {
    // Do not run type checking twice:
    if (options.isServer) config.plugins.push(new ForkTsCheckerWebpackPlugin())

    config.resolve.modules.unshift(__dirname)

    return config
  },
}))

Should we reopen this issue to drive that forward?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment