Веб-упаковщик Rail не может разрешить пути Typescript

Question

Я пытаюсь заставить Rails, React и Typescript работать вместе, но я не могу понять, как использовать функцию пути Typescript.

Это мой tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@frontend/*": ["app/javascript/frontend/*"]
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "jsx": "react",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "exclude": ["**/*.spec.ts", "node_modules", "vendor", "public"],
  "compileOnSave": false
}

И это моя пользовательская конфигурация веб-пакета:

// ... webpack/config/tsPaths.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  resolve: {
    plugins: [
      new TsconfigPathsPlugin({
        configFile: './tsconfig.json',
      }),
    ],
  },
}

// .../webpack/environment.js

const { environment } = require('@rails/webpacker')
const typescript = require('./loaders/typescript')
const tsPathsConfig = require('./config/tsPaths')

environment.loaders.prepend('typescript', typescript)
environment.config.merge(tsPathsConfig)

module.exports = environment

Но я всегда получаю это как результат:

15:40:25 webpack.1 | ERROR in ./app/javascript/frontend/routes/Timetracking/Calendar/index.tsx
15:40:25 webpack.1 | Module not found: Error: Can't resolve '@frontend/components/InfiniteCalendar' in '/Users/my-user/Sites/Workspace/my-workspace/my-app-web/api/app/javascript/frontend/routes/Timetracking/Calendar'
15:40:25 webpack.1 | resolve '@frontend/components/InfiniteCalendar' in '/Users/my-user/Sites/Workspace/my-workspace/my-app-web/api/app/javascript/frontend/routes/Timetracking/Calendar'
15:40:25 webpack.1 |   Parsed request is a module
15:40:25 webpack.1 |   using description file: /Users/my-user/Sites/Workspace/my-workspace/my-app-web/api/package.json (relative path: ./app/javascript/frontend/routes/Timetracking/Calendar)
15:40:25 webpack.1 |     Field 'browser' doesn't contain a valid alias configuration
15:40:25 webpack.1 |     resolve as module
15:40:25 webpack.1 |       looking for modules in /Users/my-user/Sites/Workspace/my-workspace/my-app-web/api/app/javascript
15:40:25 webpack.1 |         using description file: /Users/my-user/Sites/Workspace/my-workspace/my-app-web/api/package.json (relative path: ./app/javascript)
15:40:25 webpack.1 |           Field 'browser' doesn't contain a valid alias configuration
15:40:25 webpack.1 |           using description file: /Users/my-user/Sites/Workspace/my-workspace/my-app-web/api/package.json (relative path: ./app/javascript/@frontend/components/InfiniteCalendar)
15:40:25 webpack.1 |             no extension
15:40:25 webpack.1 |               Field 'browser' doesn't contain a valid alias configuration
15:40:25 webpack.1 |               /Users/my-user/Sites/Workspace/my-workspace/my-app-web/api/app/javascript/@frontend/components/InfiniteCalendar doesn't exist
15:40:25 webpack.1 |             .tsx

Answer 1

Если вы хотите очень легко подключить React к Rails, я рекомендую response-rails gem, который поддерживает TypeScript. Просто убедитесь, что вы сделали все эти шаги.

$ bundle exec rails webpacker:install:typescript
$ yarn add @types/react @types/react-dom

Это позволит React-Rails поддерживать расширение .tsx.