Použil jsem babel nakladač s strojopis reagovat,cssModules a eslint (s hezčí). Vytvořil jsem commonjs knihovna s webpack, ale když začnu příkladem projektu, který používá tuto knihovnu mám chyby, jako je tento.
Nemám tušení, jak vyřešit tento. Díky za váš čas.
MŮJ WEBPACK CONFIG:
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = {
mode: 'production',
entry: ['react-hot-loader', './index.tsx'],
devtool: 'eval-source-map',
output: {
path: path.resolve('dist'),
filename: 'index.js',
library: {
name: 'proba-react-library',
type: 'commonjs'
}
},
context: path.resolve(__dirname, 'src'),
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
presets: [
[
'@babel/preset-env',
{
targets: { browsers: 'last 2 versions' },
modules: 'commonjs'
} // or whatever your project requires
],
[
'@babel/typescript',
{
configFile: path.resolve(__dirname, 'tsconfig.json'),
isTSX: true,
allExtensions: true
}
],
[
'@babel/preset-react',
{
flow: false,
typescript: true
}
]
],
plugins: [
// plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties'],
'react-hot-loader/babel',
'@babel/plugin-transform-runtime',
'@babel/plugin-transform-typescript'
]
}
}
]
},
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
alias: {
'react-dom': '@hot-loader/react-dom'
},
preferRelative: true,
modules: [path.resolve(__dirname, 'src'), 'node_modules']
},
plugins: [
new ForkTsCheckerWebpackPlugin({
typescript: {
configFile: path.resolve(__dirname, 'tsconfig.json')
}
}),
new Dotenv({
path: path.resolve(__dirname, '.env')
})
]
};
MŮJ ESLINT CONFIG (.eslintrc v kořenovém adresáři s webpack):
{
"parser": "@babel/eslint-parser",
"extends": [
"standard",
"standard-react",
"plugin:prettier/recommended",
"prettier/standard",
"prettier/react",
"plugin:@typescript-eslint/eslint-recommended"
],
"env": {
"node": true
},
"parserOptions": {
"requireConfigFile": false,
"ecmaVersion": 2020,
"ecmaFeatures": {
"legacyDecorators": true,
"jsx": true
}
},
"settings": {
"react": {
"version": "16"
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
},
"rules": {
"space-before-function-parent": 0,
"react/prop-types": 0,
"react/jsx-handler-names": 0,
"no-unused-expressions": "off",
"react/jsx-fragments": 0,
"react/no-unused-prop-types": 0,
"import/export": 0,
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"no-console": "warn",
"no-restricted-imports": [
"error",
{
"patterns": [".*"]
}
],
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react"]
}
]
},
"plugins": [
"react-hooks",
"jsx-a11y",
"react",
"prettier",
"@typescript-eslint"
]
}