Ошибка повышения частной библиотеки NPM "Ошибка разбора модуля" - PullRequest
Новая
       0

Ошибка повышения частной библиотеки NPM "Ошибка разбора модуля"

0 голосов
/ 08 февраля 2019

Я пытаюсь создать свою библиотеку с помощью React и использовать ее локально (с git-репозиторием моей компании).

Я могу протестировать свое приложение при разработке с помощью npm run start.Мое приложение работает.

Но когда я хочу использовать его в другом проекте, я получаю эту ошибку:

ОШИБКА в ./node_modules/mylib/src/views/calendar.jsx Ошибка синтаксического анализа модуля: неожиданный токен (10:53) Вам может потребоваться соответствующий загрузчик для обработки этого типа файлов.

Строка задействована:: 

const Calendar = ({ month = moment(), dayCellTitle = <DayCellTitle />, header = <CalendarHeader/>, children }) => {

Пакет импортируется так: 

"mylib": "git+ssh://git@gitlab.mycompany.ch:mylib/mylib.git"

Я пытаюсь это , но у меня получилось хуже:

Файлы плагинов / пресетов не позволяют экспортировать объекты, только функции.В /home/xxxxx/Documents/workspaces/react-calendar/node_modules/babel-preset-stage-0/lib/index.js

вот файлы моего пакета:

webpack.config.js 

const path = require('path');
const pkg = require('./package.json');
const libraryName= pkg.name;
module.exports = {
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'react-calendar.js',
    library: libraryName,
    libraryTarget: 'umd',
    publicPath: '/dist/',
    umdNamedDefine: true
  },
  module: {
    rules: [
      { test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    alias: {
      'react': path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
    }
  },
  externals: {
    // Don't bundle react or react-dom
    react: {
      commonjs: "react",
      commonjs2: "react",
      amd: "React",
      root: "React"
    },
    "react-dom": {
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "ReactDOM",
      root: "ReactDOM"
    }
  }
};

package.json 

{
  "name": "react-calendar",
  "version": "0.0.1",
  "description": "React Calendar UI by",
  "main": "./dist/lib/index.js",
  "scripts": {
    "start": "./node_modules/.bin/parcel docs/index.html",
    "build": "./node_modules/.bin/webpack --mode=production",
    "build:docs": "./node_modules/.bin/parcel build docs/index.js -d ./dist/docs && cp docs/index.html dist/docs/index.html",
    "test": "jest",
    "tdd": "jest --watch"
  },
  "author": "Xero",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.11",
    "mobx": "^5.9.0",
    "mobx-react": "^5.4.3",
    "moment": "^2.24.0",
    "moment-range": "^4.0.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.85.0",
    "settings": "^0.1.1"
  },
  "peerDependencies": {
    "lodash": "^4.17.11",
    "mobx": "^5.9.0",
    "mobx-react": "^5.4.3",
    "moment": "^2.24.0",
    "moment-range": "^4.0.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.85.0",
    "settings": "^0.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-module-resolver": "^3.1.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.9.1",
    "jest": "^24.1.0",
    "parcel-bundler": "^1.6.2",
    "react-test-renderer": "^16.8.0",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-node-externals": "^1.6.0"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/spec/javascript/__mocks__/fileMock.js",
      "\\.(css|scss|less)$": "<rootDir>/spec/javascript/__mocks__/styleMock.js"
    },
    "roots": [
      "src",
      "tests"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "setupFiles": [
      "<rootDir>/tests/setup.js"
    ]
  }
}

.babelrc 

{
  "presets": ["@babel/preset-env", "@babel/preset-react",],
  "plugins":  [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

Дополнительный вопрос:

Есть ли способ узнать, будет ли библиотека импортирована без ошибок, ДО выполнения импорта в другом проекте

Edit

Я добавил yarn run build в мой package.json, и его запуск не вызывает ошибок: 

Entrypoint main [big] = react-calendar.js
 [45] (webpack)/buildin/module.js 497 bytes {0} [built]
 [48] (webpack)/buildin/global.js 472 bytes {0} [built]
[244] ./node_modules/moment/locale sync ^\.\/.*$ 3 KiB {0} [optional] [built]
[368] ./src/index.js + 52 modules 182 KiB {0} [built]
      | ./src/index.js 65 bytes [built]
      | ./src/views/calendar.jsx 1.17 KiB [built]
      | ./src/views/day_cell_title.jsx 358 bytes [built]
      | ./src/views/calendar_header.jsx 1.15 KiB [built]
      | ./src/store/calendar_store.js 3.85 KiB [built]
      | ./src/views/calendar_grid.jsx 1.49 KiB [built]
      | ./src/views/calendar_navigation_button.jsx 928 bytes [built]
      | ./src/views/calendar_title.jsx 290 bytes [built]
      | ./src/generators/month_generator.js 556 bytes [built]
      | ./src/painters/day_cell_color.js 593 bytes [built]
      | ./src/views/day_cell_content.jsx 547 bytes [built]
      | ./src/settings.js 332 bytes [built]
      | ./src/painters/event_color.js 374 bytes [built]
      | ./src/painters/range_color.js 591 bytes [built]
      | ./src/views/empty_day_cell_content.jsx 340 bytes [built]
      |     + 38 hidden modules
    + 743 hidden modules

Ответы [ 3 ]

0 голосов
/ 08 февраля 2019

Вы перераспределяете свои источники, содержащие синтаксис JSX.Обычно перед публикацией вам необходимо преобразовать их.Если нет, то ваши иждивенцы должны будут настроить свои babel-loader с поддержкой React и убедиться, что они не исключают модули вашего пакета.

Таким образом, ваша конфигурация выглядит хорошо, за исключением совпадения исключений: 

 module: {
  rules: [
    { test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }
  ]
 }

Я бы порекомендовал вам использовать { include } и перечислить пути, которые должны явно совпадать.Чтобы найти путь, по которому находятся источники вашего пакета, используйте path.dirname(require.resolve('@yours/package-name')).

0 голосов
/ 09 февраля 2019

Проблема была в 2 вещах:

1.Сборка забыта и не зафиксирована

Я не собирал свой проект (с yarn run build), и, самое главное, я не фиксировал скомпилированный файл (dist/main.js)

2.Импорт был неправильным

Учитывая пункт 1., мой импорт был неправильным.

Я делал: 

import {Calendar} from "project-react-calendar/src/views/calendar";

вместо: 

import {Calendar} from "project-react-calendar";

Это может быть доступно с этим index.js: 

import { Calendar } from './views/calendar'

export {
    Calendar
}
0 голосов
/ 08 февраля 2019

Ваш npm run start сценарий, кажется, использует parcel, а не webpack Я думаю, webpack.config.js просто не влияет на это?Возможно, вам следует убедиться, что правильный загрузчик действительно запущен parcel. 

"start": "./node_modules/.bin/parcel docs/index.html", // <- invokes parcel bundler
"build": "./node_modules/.bin/webpack --mode=production",

Попробуйте npm run build, и если это удастся, это будет именно так.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...