Hi folks,
I'm using TypeScript 3.0.3 with cypress and trying to load the react-relay-network-modern
module in my component. However, it always tells me that the module does not exist, although it is in my node_modules folder and defined in my package.json. I have no errors with relay-runtime
and I got relay to work just fine.
When I do a regular import like this:
import * as RelayNetworkModern from 'react-relay-network-modern';
I get the following error that the module was not found.
/src/relayEnvironment.ts
[tsl] ERROR in /src/relayEnvironment.ts(8,37)
TS2307: Cannot find module 'react-relay-network-modern'.
Even when I set aliases in both my tsconfig.json and my webpack preprocessor or import the sub folders react-relay-network-modern/(es|lib|...)
I get the same errors.
I figure it would be best to add my config files:
/cypress/plugins/webpack.config.js
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"
]
}
Okay, after a lot of tinkering and testing multiple tsconfig options I figured it out.
Turned out that I just needed to set the following 2 options in my tsconfig:
"allowJs": true,
"moduleResolution": "node"
So my new tsconfig.json looks something like this:
{
"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"
]
}