I'm having an issue that I believe must be related to the difference in how Webpack and Typescript resolve moduals.
When I use this plugin I get a number of conflicting type definitions.
I'm posting here because I've scoured the internet and haven't found a solution to this.
ERROR in project/node_modules/@types/node/index.d.ts
(103,13): Cannot redeclare block-scoped variable 'console'.
ERROR in project/node_modules/@types/node/index.d.ts
(148,13): Duplicate identifier 'require'.
ERROR in project/node_modules/@types/node/index.d.ts
(2381,15): Duplicate identifier 'URL'.
ERROR in project/node_modules/@types/node/index.d.ts
(2399,15): Duplicate identifier 'URLSearchParams'.
ERROR in project/node_modules/@types/node/index.d.ts
(2417,14): Cannot export 'URL'. Only local declarations can be exported from a module.
ERROR in project/node_modules/@types/node/index.d.ts
(2417,19): Cannot export 'URLSearchParams'. Only local declarations can be exported from a module.
ERROR in project/node_modules/@types/react-native/index.d.ts
(8723,14): Duplicate identifier 'require'.
ERROR in project/node_modules/@types/react-native/index.d.ts
(8741,11): Cannot redeclare block-scoped variable 'console'.
ERROR in project/node_modules/@types/react-native/index.d.ts
(8749,18): Subsequent property declarations must have the same type. Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.
ERROR in project/node_modules/@types/react-native/index.d.ts
(8752,11): Cannot redeclare block-scoped variable 'navigator'.
ERROR in project/node_modules/@types/webpack-env/index.d.ts
(203,13): Duplicate identifier 'require'.
ERROR in project/node_modules/rxjs/scheduler/VirtualTimeScheduler.d.ts
(24,15): Property 'work' in type 'VirtualAction<T>' is not assignable to the same property in base type 'AsyncAction<T>'.
Type '(this: VirtualAction<T>, state?: T | undefined) => void' is not assignable to type '(this: AsyncAction<T>, state?: T | undefined) => void'.
The 'this' types of each signature are incompatible.
Type 'AsyncAction<T>' is not assignable to type 'VirtualAction<T>'.
Property 'index' is missing in type 'AsyncAction<T>'.
ERROR in project/node_modules/typescript/lib/lib.dom.d.ts
(13389,11): Duplicate identifier 'URL'.
ERROR in project/node_modules/typescript/lib/lib.dom.d.ts
(13405,13): Duplicate identifier 'URL'.
ERROR in project/node_modules/typescript/lib/lib.dom.d.ts
(13412,11): Duplicate identifier 'URLSearchParams'.
ERROR in project/node_modules/typescript/lib/lib.dom.d.ts
(13439,13): Duplicate identifier 'URLSearchParams'.
ERROR in project/node_modules/typescript/lib/lib.dom.d.ts
(15720,13): Duplicate identifier 'URL'.
ERROR in project/node_modules/typescript/lib/lib.dom.d.ts
(15721,13): Duplicate identifier 'URLSearchParams'.
ERROR in project/node_modules/typescript/lib/lib.dom.d.ts
(15747,13): Cannot redeclare block-scoped variable 'navigator'.
ERROR in project/node_modules/typescript/lib/lib.dom.d.ts
(15920,13): Cannot redeclare block-scoped variable 'console'.
Here's the diff of my webpack config:
───────────────────────────
modified: config/webpack.config.dev.js
───────────────────────────
@ webpack.config.dev.js:8 @ const webpack = require('webpack');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
@ webpack.config.dev.js:129 @ module.exports = {
include: paths.appSrc,
loaders: [
require.resolve('babel-loader'),
- require.resolve('ts-loader'),
+ {
+ loader: 'ts-loader',
+ options: {
+ transpileOnly: true,
+ },
+ },
],
},
// Process JS with Babel.
@ webpack.config.dev.js:264 @ module.exports = {
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+ new ForkTsCheckerWebpackPlugin({
+ tsconfig: paths.appTsConfig,
+ }),
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
I'm having an issue that I believe must be related to the difference in how Webpack and Typescript resolve moduals.
When I use this plugin I get a number of conflicting type definitions.
I'm posting here because I've scoured the internet and haven't found a solution to this.
Here's the diff of my webpack config: