Невозможно загрузить модуль react в качестве модуля узла

У меня есть компонент react в пути src/components/test 

import React from 'react';
import ReactDom from 'react-dom';

class TestComp extends React.Component {}
export default TestComp;

Я показываю компонент в индексе.js из path src/index.js 

import TestComp from './components/test';
export {
  TestComp
};

Я добавил main в пакет.json as "main": "src/index.js"

Я опубликовал пакет npm test-comp вышеуказанного приложения и использую его в другом приложении. main.js 

import {TestComp} from 'test-comp';

Я использую grunt-browserify в этом приложении со следующими опциями.

options: {
        "transform": [
          [
            "babelify",
            {
              "presets": [
                "es2015",
                "react",
                "stage-0"
              ]
            }
          ]
        ],
        browserifyOptions: {
          debug: true,
          extensions: ['.js', '.jsx'],
          entries: ['main.js']
        }
      }

При запуске grunt browserify появляется следующая ошибка.

>> import TestComp from './components/test';
>> ^
>> ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Warning: Error running grunt-browserify. Use --force to continue.

Это вероятно, не понимая путь, упомянутый в узле модуля или отказываясь понимать то же самое, что линтинг. Я даже попытался добавить следующее .eslintrc но не повезло 

{
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module"
  },
  "env": {
      "browser": true,
      "es6": true
  },
  "ecmaFeatures": {
      "modules": true
  }
}

Я попробовал большинство ответов SO, связанных с этой ошибкой. Но все равно застрял на том же месте.

EDIT Я могу просматривать первый модуль напрямую с почти аналогичной конфигурацией. Получение этой ошибки при загрузке первого модуля в качестве зависимого узла в другом приложении, как описано выше.

1 7
javascript reactjs browserify es6-modules node-modules

1 ответ:

Итак, вы написали модуль test-comp в ES6, используя import и export, а запись main в package.json в test-comp ссылается на src/index.js.

Ответ заключается в том, что преобразования browserify не применяются к каждому требуемому модулю. Они применимы только к непосредственному проекту, а не к зависимостям проекта.

Если вы хотите использовать модуль, использующий синтаксис ES6 в browserify, вам потребуется либо

  1. добавьте предпубликованный сценарий в test-comp, который транспонирует его в ES5, и измените запись main test-comp для ссылки на эту версию ES5, а не на версию ES6
  2. Добавьте babelify как зависимость test-comp и добавьте babelify как преобразование browserify в записи пакетаbrowserify , как описано в babelify.
2