Giter VIP home page Giter VIP logo

Comments (11)

NickGerleman avatar NickGerleman commented on April 27, 2024 1

Oh wait, this is happening during bundling, and not type checking.

@huntie @robhogan was CLI Metro resolution tsconfig aware at some point?

The existing guidance is to customize resolver at Babel level for this, which seems off. https://reactnative.dev/docs/typescript#using-custom-path-aliases-with-typescript

from react-native.

robhogan avatar robhogan commented on April 27, 2024 1

I do have package.json-files inside the custom path folders like such.

This sounds like the answer then - Metro will resolve these if resolver.enableGlobalPackages: true, regardless of tsconfig.json.

Global (aka "Haste") packages are a deprecated feature because they're not an industry standard and only likely to lead to surprises and confusion, which is why they're now off by default, as of Metro 0.79. I'd recommend keeping your package.json files and using workspaces instead, which are standard and also TypeScript compatible (without using paths).

To get the previous behaviour (not recommended):

// metro.config.js
const config = {
    resolver: {
        enableGlobalPackages: true,
        // ...
    },
    // ...
};

See also: facebook/metro#1166

from react-native.

cortinico avatar cortinico commented on April 27, 2024

upgrading from 0.72.9 to 0.73.5 gives error from tsconfig paths.

What was the tsconfig you were using on 0.72.9?

from react-native.

Crare avatar Crare commented on April 27, 2024

upgrading from 0.72.9 to 0.73.5 gives error from tsconfig paths.

What was the tsconfig you were using on 0.72.9?

It was "@tsconfig/react-native/tsconfig.json"

from react-native.

cortinico avatar cortinico commented on April 27, 2024

cc @NickGerleman do you have an idea of what might be happening here?

from react-native.

NickGerleman avatar NickGerleman commented on April 27, 2024

Don’t have any real ideas, but I noticed the casing of the import is incorrect, which can cause issues on some file systems.

from react-native.

Rc85 avatar Rc85 commented on April 27, 2024

Also experiencing this after upgrading to 0.73.5 from 0.72.6.

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "lib": ["es2017"] /* Specify library files to be included in the compilation. */,
    "allowJs": true /* Allow javascript files to be compiled. */,
    // "checkJs": true,                       /* Report errors in .js files. */
    "jsx": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "removeComments": true,                /* Do not emit comments to output. */
    "noEmit": true /* Do not emit outputs. */,
    // "incremental": true,                   /* Enable incremental compilation */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,

    /* Strict Type-Checking Options */
    "strict": true /* Enable all strict type-checking options. */,
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
    "paths": {
      "project-shared/*": ["../../../_shared/*"],
      "client-shared/*": ["../../_shared/*"],
      "mobile-shared/*": ["../_shared/*"]
    } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "resolveJsonModule": true /* Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. */

    /* Source Map Options */
    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

Didn't change anything after upgrade. VS Code is not showing error with import either (shows correct path when mouseover alias import), so it's a RN issue?

from react-native.

Crare avatar Crare commented on April 27, 2024

Oh wait, this is happening during bundling, and not type checking.

@huntie @robhogan was CLI Metro resolution tsconfig aware at some point?

The existing guidance is to customize resolver at Babel level for this, which seems off. https://reactnative.dev/docs/typescript#using-custom-path-aliases-with-typescript

Yeah I tried that too. Didn't work.

from react-native.

robhogan avatar robhogan commented on April 27, 2024

@huntie @robhogan was CLI Metro resolution tsconfig aware at some point?

There's never been any support for this in Metro itself - Expo has some via a custom resolver IIRC, don't think there's ever been any in RNCLI.

The nearest change I can think of is that we flipped the default for enableGlobalPackages, which could achieve a similar result but only if you have a package.json inside components.

@Crare / @Rc85 , could you share your babel.config.js (if any), and your metro.config.js?

from react-native.

Crare avatar Crare commented on April 27, 2024

@huntie @robhogan was CLI Metro resolution tsconfig aware at some point?

There's never been any support for this in Metro itself - Expo has some via a custom resolver IIRC, don't think there's ever been any in RNCLI.

The nearest change I can think of is that we flipped the default for enableGlobalPackages, which could achieve a similar result but only if you have a package.json inside components.

@Crare / @Rc85 , could you share your babel.config.js (if any), and your metro.config.js?

I do have package.json-files inside the custom path folders like such:

{
    "name": "components"
}

repro files are here: https://github.com/Crare/rn0.73.x_tsxonfig_paths_issue/blob/main/ReproducerApp/babel.config.js
and here: https://github.com/Crare/rn0.73.x_tsxonfig_paths_issue/blob/main/ReproducerApp/metro.config.js

but in actual project they are set like this:

babel.config.js:

/* eslint-disable no-undef */

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['jsx-control-statements', 'react-native-reanimated/plugin']
};

metro.config.js:

/* eslint-disable @typescript-eslint/no-var-requires */
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
    transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer')
    },
    resolver: {
        assetExts: assetExts.filter(ext => ext !== 'svg'),
        sourceExts: [...sourceExts, 'svg']
    }
};

module.exports = mergeConfig(defaultConfig, config);

from react-native.

Crare avatar Crare commented on April 27, 2024

Using those workspaces seems to fix the problem. Thanks!

from react-native.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.