Rail的webpacker无法解析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配置：

// ... 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应用程序连接，我推荐react-rails gem，它支持TypeScript。只要确保您已完成所有这些步骤即可。

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

这样做将使React-Rails支持.tsx扩展名。