代码之家  ›  专栏  ›  技术社区  ›  lumio

在cypress中引入react中继网络失败

  •  0
  • lumio  · 技术社区  · 6 年前

    大家好,

    我在用 TypeScript 3.0.3版 具有 试着加载 react-relay-network-modern 文件夹并在我的 包.json relay-runtime 我让继电器正常工作。

    import * as RelayNetworkModern from 'react-relay-network-modern';
    

    我得到以下错误,模块没有找到。

    /src/relayEnvironment.ts
    [tsl] ERROR in /src/relayEnvironment.ts(8,37)
          TS2307: Cannot find module 'react-relay-network-modern'.
    

    即使我在tsconfig.json和webpack预处理器中设置别名或导入子文件夹 react-relay-network-modern/(es|lib|...) 我也会犯同样的错误。


    我想最好添加我的配置文件:

    const webpack = require( '@cypress/webpack-preprocessor' );
    const path = require('path');
    
    const options = {
      watchOptions: {},
      webpackOptions: {
        resolve: {
          extensions: [ '.web.js', '.js', '.json', '.web.jsx', '.jsx', '.tsx', '.ts', '.mjs' ],
          modules: [
            path.resolve( __dirname, '../../node_modules' ),
            path.resolve( __dirname, '../../src' ),
          ],
          alias: {
            'react-relay-network-modern': path.resolve( __dirname, '../../node_modules/react-relay-network-modern/es' ),
            src: path.resolve( __dirname, '../../src' ),
          }
        },
        module: {
          rules: [
            {
              type: 'javascript/auto',
              test: /\.mjs$/,
              include: /node_modules/,
              use: [],
            },
            {
              test: /\.ts(x)?$/,
              exclude: [ /node_modules/ ],
              use: [
                {
                  loader: 'babel-loader',
                  options: {
                    presets: [ '@babel/preset-react' ],
                    plugins: [ 'relay' ],
                  },
                },
                {
                  loader: 'ts-loader',
                },
              ],
            },
          ],
        },
      },
    };
    
    module.exports = webpack( options );
    

    /tsconfig.json文件

    {
      "compilerOptions": {
        "baseUrl": ".",
        "target": "es6",
        "jsx": "react",
        "skipLibCheck": true,
        "noImplicitAny": false,
        "strict": true,
        "lib": ["dom", "es6", "es2016", "es2017.object"],
        "types": [ "cypress", "react" ],
        "typeRoots": [ "node_modules/@types", "types" ],
        "paths" : {
          "react": ["node_modules/@types/react"],
          "react-relay-network-modern": ["node_modules/react-relay-network-modern/es"],
          "src/*": ["src/*"],
          "components/*": ["src/*"]
        }
      },
      "include": [
        "node_modules/cypress",
        "src/*/*.ts"
      ]
    }
    
    1 回复  |  直到 6 年前
        1
  •  0
  •   lumio    6 年前

    好吧,经过大量的修补和测试多个tsconfig选项后,我找到了答案。

    结果我只需要在tsconfig中设置以下两个选项:

        "allowJs": true,
        "moduleResolution": "node"
    

    所以我的新朋友 tsconfig.json文件 看起来像这样:

    {
      "compilerOptions": {
        "baseUrl": ".",
        "target": "es6",
        "jsx": "React",
        "skipLibCheck": true,
        "noImplicitAny": false,
        "strict": true,
        "allowJs": true,
        "moduleResolution": "node",
        "lib": ["dom", "es6", "es2016", "es2017.object"],
        "types": [ "cypress", "react" ],
        "typeRoots": [ "node_modules/@types", "types" ],
        "paths" : {
          "react": ["node_modules/@types/react"],
          "src/*": ["src/*"],
          "components/*": ["src/*"]
        }
      },
      "include": [
        "node_modules/cypress",
        "src/*/*.ts"
      ]
    }