Directory tree:
.
├── package.json
├── src
│ ├── entrypoint.tsx
│ ├── index.html
│ └── ui
│ ├── App.tsx
│ └── shared
│ └── Reset.ts
├── start.sh
└── tsconfig.json
TypeScript's tsconfig.json sets paths to
Parcel's ~ module resolution convention
and baseUrl to src directory.
Parcel is given src/index.html as its input,
which references src/entrypoint.tsx.
All TypeScript files in src
may use the ~ non-relative import paths.
| import * as React from 'react' | |
| // routing, etc. | |
| import { Reset } from '~/ui/shared/Reset' | |
| export class App extends React.Component { | |
| public render() { | |
| return ( | |
| <div> | |
| <title>Dashboard</title> | |
| <Reset /> | |
| </div> | |
| ) | |
| } | |
| } |
| import * as React from 'react' | |
| import { render } from 'react-dom' | |
| // App wrapped with redux Provider, store, etc. | |
| import { App } from '~/ui/App' | |
| render( | |
| <App />, | |
| document.getElementById('root') | |
| ) |
| <!doctype html> | |
| <html> | |
| <body> | |
| <div id='root'></div> | |
| <script src='./entrypoint.tsx'></script> | |
| </body> | |
| </html> |
| { | |
| "dependencies": { | |
| "react": "^16.6.3", | |
| "react-dom": "^16.4.2", | |
| }, | |
| "devDependencies": { | |
| "@types/node": "^10.7.0", | |
| "@types/react": "^16.7.17", | |
| "@types/react-dom": "^16.0.7", | |
| "parcel-bundler": "1.10.0", | |
| "typescript": "^3.0.1" | |
| }, | |
| "scripts": { | |
| "build": "$(npm bin)/parcel build ./src/index.html", | |
| "start": "./start.sh" | |
| } | |
| } |
| #!/bin/bash | |
| set -e | |
| "$(npm bin)/tsc" --noEmit --watch & | |
| "$(npm bin)/parcel" ./src/index.html |
| { | |
| "compilerOptions": { | |
| "baseUrl": "./src", | |
| "paths": { | |
| "~/*": ["./*"] | |
| }, | |
| "typeRoots": ["node_modules/@types"] | |
| }, | |
| "include": ["src/**/*"] | |
| } |
I have the same problem as @schematis. Typescript resolves the modules correctly, IDE is showing code completion like it's supposed to, but parcel crashes on first occurrence of '~' module resolution notation.
{
"compilerOptions": {
"baseUrl": "./src",
"jsx": "react",
"esModuleInterop": true,
"paths": {
"~*": ["./*"]
}
},
"include": ["src/**/*"]
}
I'm not working on any TypeScript + Parcel projects at the moment but if someone has an updated working version, I can try to replicate locally and then update the original Gist for future folks.
Can someone help me please? I'm trying to do that but it's not working well.
Can someone help me please? I'm trying to do that but it's not working well.
I think your baseUrl needs to be as follows.
"baseUrl": "./src",
{ "compilerOptions": { "target": "ES2019", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react", "baseUrl": "./src", "paths": { "~/*": ["./*"] }, }, "include": [ "src/**/*", "@types" ] }That's how I've got my tsconfig set up. The baseUrl and paths are set up correctly.