Как заставить tsconfig работать с плагином webpack? - PullRequest
Новая
       56

Как заставить tsconfig работать с плагином webpack?

0 голосов
/ 14 марта 2020

У меня есть простой компонент, который использует styled-components и мой utils.tsx файл, который содержит цвета темы. Я загружаю его с помощью WebpackProvidePlugin, потому что я не хочу включать модули React и styled-components в каждый файл компонента. Он работает, рендерится, прекрасно компилируется, но у меня есть некоторые ошибки TS в консоли и редакторе, потому что компилятор / анализатор машинописного текста не распознает псевдонимы веб-пакетов

TS2686: «React» относится к глобальному UMD, но текущий файл является модулем. Попробуйте вместо этого добавить импорт.

TS2304: невозможно найти имя 'Styled'.

TS2304: невозможно найти имя 'Color'.

Navigation.tsx 

const Nav = Styled.nav`
    height: 64px;
    background-color: ${Color.darkBlue};
`

function Navigation() {
    return <Nav>dwa</Nav>
}

export default Navigation

webpack.config. js

...
        new webpack.ProvidePlugin({
            React: 'react',
            Device: [
                path.resolve(path.join(__dirname, 'src/utils/utils.tsx')),
                'devices',
            ],
            Color: [
                path.resolve(path.join(__dirname, 'src/utils/utils.tsx')),
                'colors',
            ],
            Styled: ['styled-components', 'default'],
        }),
...

tsconfig. json

{
    "compilerOptions": {
        "module": "none",
        "moduleResolution": "node",
        "jsx": "react",
        "target": "es6",
        "lib": ["es2015", "dom", "dom.iterable"],
        "sourceMap": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "plugins": [{"name": "typescript-tslint-plugin"}],
        "baseUrl": "./",
        "paths": {
            "components/*": ["src/components/*"],
            "utils/*": ["src/utils/*"]
        }
    },
    "include": ["src/**/*.tsx"],
    "exclude": ["node_modues"]
}
...