question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Parcel does not resolve .tx, .tsx files

See original GitHub issue

❔ Question

I would like Parcel to resolve different file extensions without necessity to type .js, .jsx or .ts in import.

🔦 Context

Trying to import file without extension and parcel should be able to find best match, e.g. when I have App.jsx, it should try to find App.js -> fail, App.ts -> fail, App.jsx -> should be used.

💻 Code Sample

// index.tsx
import React from 'react'
import {render} from 'react-dom'
import App from './App';

render(<App/>,
    document.getElementById('root')
);

🌍 Your Environment

Software Version(s)
Parcel 1.12.2
Node v8.16.0
npm/Yarn 6.10.2
Operating System Linux Mint

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
bologercommented, Aug 11, 2019

@mischnic I assume then that it is a bug because .cache was causing parcel to search for incorrect file extension.

0reactions
Wilfredcommented, Jul 19, 2020

As a workaround, temporarily writing:

import App from "./App.jsx";

seems to be sufficient to make parcel start tracking the file in its new path. You can then change the line back to just "./App".

Read more comments on GitHub >

github_iconTop Results From Across the Web

Parcel fails to resolve 'solid-js/jsx-runtime' for TSX files
In my minimal example project, I get the error: @parcel/core: Failed to resolve 'solid-js/jsx-runtime' from './foo/src/index.tsx' .
Read more >
Module Resolution - Parcel
Aliases are supported through the alias field in package.json . This example aliases react to preact and some local custom module that is...
Read more >
@parcel/transformer-babel - npm
This Parcel transformer plugin is responsible for transforming assets with Babel. It uses @babel/core to resolve babel config the same way Babel ...
Read more >
Zero Configure your React-Typescript App With Parcel - Webtips
Setting up a new project can take a lot of time. Learn how you can skip configuring your react-typescript app with parcel.
Read more >
Create SPA: React + Typescript + Parcel
Read this before: Parcel is not as mature as Webpack; Quick start ... First we create the React application in src/index.tsx file.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found