При попытке опубликовать компонент как UMD возникает проблема. Webpack хорошо связывает все ресурсы и код при запуске npm publish
, но при выполнении npm install
из другого проекта я получаю сообщение об ошибке You may need an appropriate loader to handle this file type.
Он выдает ошибку правильно, когда попадает в элемент HTML.
Кажется, это проблема конфигурации веб-пакета, но я не уверен, является ли это конфигурацией веб-пакета для моего UMD, или это конфигурация веб-пакета для проекта, в который я пытаюсь его установить (назовем это проектом X ).
- Я попытался понизить версию веб-пакета моего проекта до 2.7.0, что и используется UMD.
- Попытка добавления пресетов и плагинов (см. Конфигурацию веб-пакета ниже).
- Пробовал устанавливать через другой проект, но получаю ту же ошибку, поэтому я не думаю, что это проблема с проектом, в который я пытаюсь установить его.
Сообщение об ошибке:
ERROR in ./src/index.js
Module parse failed: /Users/user/repos/portal/node_modules/login-react-component/src/index.js Unexpected token (15:6)
You may need an appropriate loader to handle this file type.
| const {config} = this.props;
| return (
| <div>
| <LoginComponent config={config} />
| </div>
Конфигурация Webpack:
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, './dist'),
filename: 'index.js',
library: 'library',
libraryTarget: 'umd',
publicPath: '/dist/',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.(css)$/,
loader: 'css-loader'
},
{
test: /\.(eot|ttf|woff|woff2)$/,
loader: 'file-loader'
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components|build)/,
use: [
{
loader: 'babel-loader',
query: {
presets : ['stage-0', 'es2015', 'react'],
plugins: [
"transform-class-properties",
"transform-object-rest-spread",
"transform-react-jsx",
["transform-imports", {
"react-bootstrap": {
"transform": "react-bootstrap/lib/${member}",
"preventFullImport": true
}
}]
],
}
},
{
loader: 'eslint-loader'
}
],
},
{
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
fallback: 'responsive-loader',
quality: 85
}
}
]
}
]
},
resolve: {
alias: {
'react': path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
}
},
externals: {
react: {
commonjs: "react",
commonjs2: "react",
amd: "React",
root: "React"
},
"react-dom": {
commonjs: "react-dom",
commonjs2: "react-dom",
amd: "ReactDOM",
root: "ReactDOM"
}
}
};
package.json:
{
"name": "login-react-component",
"version": "1.0.10",
"description": "Login Component",
"main": "./src/index.js",
"peerDependencies": {
"react": "^16.7.0",
"react-dom": ">=15.0.1",
"webpack": "^2.7.0"
},
"dependencies": {
"@okta/okta-auth-js": "2.2.0",
"babel-plugin-transform-imports": "1.4.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-plugin-transform-react-jsx": "6.24.1",
"jquery": "^3.3.1",
"lodash": "^1.0.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "8.0.0",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^2.1.0",
"eslint": "^5.12.1",
"eslint-config-standard-jsx": "4.0.2",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-react": "7.3.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"less": "^3.9.0",
"react": ">=15.0.1",
"react-dom": ">=15.0.1",
"url-loader": "^1.1.2",
"webpack": "^2.7.0"
},
"scripts": {
"start": "webpack --watch",
"build": "webpack",
"postinstall": "npm run build",
"prepublish": "rm -rf ./dist && npm run build"
},