Webpack отлично подходит для публикации в npm, но затем выдает ошибку: «Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов»? - PullRequest
0 голосов
/ 09 апреля 2019

При попытке опубликовать компонент как UMD возникает проблема. Webpack хорошо связывает все ресурсы и код при запуске npm publish, но при выполнении npm install из другого проекта я получаю сообщение об ошибке You may need an appropriate loader to handle this file type. Он выдает ошибку правильно, когда попадает в элемент HTML.

Кажется, это проблема конфигурации веб-пакета, но я не уверен, является ли это конфигурацией веб-пакета для моего UMD, или это конфигурация веб-пакета для проекта, в который я пытаюсь его установить (назовем это проектом X ).

  1. Я попытался понизить версию веб-пакета моего проекта до 2.7.0, что и используется UMD.
  2. Попытка добавления пресетов и плагинов (см. Конфигурацию веб-пакета ниже).
  3. Пробовал устанавливать через другой проект, но получаю ту же ошибку, поэтому я не думаю, что это проблема с проектом, в который я пытаюсь установить его.

Сообщение об ошибке:

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"
  },
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...