What is the reason for VS Code recognizing an import as valid while WebPack does not approve it?

Question

What is the reason for VS Code recognizing an import as valid while WebPack does not approve it?

I believe the root of the problem lies in the version of WebPack I am using (

"webpack-cli": "3.3.11"

). Before embarking on another round of debugging to upgrade WebPack (attempted version 5 but faced issues due to lack of a config file), I want to confirm my assumption. I seem to be pushing against the boundaries of the instructions, skimming over the manual as I go along.

Within tsconfig.base.js, the following configuration is present:

"baseUrl": ".",
"paths": {
  "@/*": ["src/*"]
}

(The rationale behind using a separate tsconfig.base.json is explained in the linked question below.)

Additionally, this import can be found:

import { RegistrationStepManager } from "@/helpers";

within the file

./src/some/path/RegistrationStepper.tsx

.

Upon running npm start with CRA and react-scripts v4.0.3, an error is displayed without causing a crash:

Failed to compile.

./src/some/path/RegistrationStepper.tsx
Module not found: Can't resolve '@/helpers' in '/my-path/my-project/src/some/other/path'.

Despite VS Code tooltips and autocompletion indicating correct importation, there are only minor warnings, no red underlines.

The suspicion is that the alias for "@/*" isn't functioning properly, although VS Code seems to handle it flawlessly, suggesting a potential bug.

How does TypeScript interact with WebPack in light of such failures? Is upgrading to WebPack 5 necessary?

An additional query within the same timeframe and codebase has been raised by me: How can I import an enum through an intermediate TS file?.

Thank you.

Update 1

I stumbled upon this post, prompting me to transition from CRA to standalone WebPack since my project holds more significance than mere experimentation. Could you possibly recommend a migration guide from CRA to WebPack? The initial issue in this inquiry may stem from a deficient WebPack setup. I possess an outdated WebPack configuration file that could be contributing to the problem.

typescript webpack visual-studio-code create-react-app webpack-3

Answer 1

Answer №1

While working on my project, I realized that the WebPack config file I had set up was not being utilized because I was actually using CRA. To address this issue, I decided to incorporate react-app-rewired and WebPack v4 as a temporary solution before transitioning to a "pure" WebPack setup. In the config-overrides.js, I made the following changes:

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: function(config, env) {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        plugins: [
          ...config.resolve.plugins,
          new TsconfigPathsPlugin({
            extensions: [".js", ".jsx", ".ts", ".tsx"],
          }),
        ],
      },
    };
  },
};

After switching to react-app-rewired and implementing these modifications, I successfully resolved the Failed to compile. error. This adjustment also addressed an issue discussed in How can I import an enum through an intermediate TS file?.

Answer 2

While working on my project, I realized that the WebPack config file I had set up was not being utilized because I was actually using CRA. To address this issue, I decided to incorporate react-app-rewired and WebPack v4 as a temporary solution before transitioning to a "pure" WebPack setup. In the config-overrides.js, I made the following changes:

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: function(config, env) {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        plugins: [
          ...config.resolve.plugins,
          new TsconfigPathsPlugin({
            extensions: [".js", ".jsx", ".ts", ".tsx"],
          }),
        ],
      },
    };
  },
};

After switching to react-app-rewired and implementing these modifications, I successfully resolved the Failed to compile. error. This adjustment also addressed an issue discussed in How can I import an enum through an intermediate TS file?.

What is the reason for VS Code recognizing an import as valid while WebPack does not approve it?

Update 1

Answer №1

Similar questions

Having trouble generating a mock constructor for the user model

The 'catch' property is not found within the type 'PromiseLike<void>'

Performing actions simultaneously with Angular 2 directives

Exporting constants using abstract classes in TypeScript files

Timeout with Promise

Experimenting with a VSCode extension that requires the act of launching a folder/workspace

Is it possible to ensure that the Python debugger pauses before exiting every time?

Is it possible to verify .0 with regular expressions?

Using a snapshot test with MenuItem from material-ui is not compatible with Jest

Creating a dynamic dropdown menu triggered by a button click using Angular

Unselect all options in Angular's multiple selection feature

Is there a way to assign values of object properties to the corresponding object in TypeScript?

Issue encountered: UnresolvedSchemeError while building module on Next.js version 13 with sentry

Guide to retrieving the previous URL in Angular 2 using Observables

Converting non www to www in React.js

Organize JSON data in Angular 6 from an observable based on a specific key

What is the process of transforming an object type into a two-dimensional array using lodash?

The CoreUI Sidebar gracefully hovers over the main page content

Transform Typescript into compiled css files without using any additional tools

The shape-matching subset functionality in Typescript is experiencing issues