无法将反应模块加载为节点模块

Question

我在路径中有一个反应组件 src/components/test

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

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

我正在从路径公开 index.js 中的组件 src/index.js

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

我在 package.json 中添加了 main 作为 "main": "src/index.js"

我已经发布了上述应用程序的 npm 包 test-comp 并在另一个应用程序中使用了它。 main.js

import {TestComp} from 'test-comp';

我在此应用程序中使用 g运行t-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.

它可能不理解节点模块中提到的路径或拒绝理解相同的 linting。我什至尝试在 .eslintrc 中添加以下内容，但没有成功

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

我尝试了与此错误相关的大部分 SO 答案。但是还是卡在原地。

编辑我能够使用几乎相似的配置直接浏览第一个模块。如上所述，当第一个模块作为节点依赖项加载到其他应用程序中时出现此错误。

Answer 1

所以你用ES6写了模块test-comp，使用了import和export，package.json的main入口在[=10] =]指的是src/index.js.

答案是 browserify 转换并不适用于您需要的每个模块。它们仅适用于直接项目：不适用于项目的依赖项。

如果你想在 browserify 中需要一个使用 ES6 语法的模块，你要么需要

Add a prepublish script to test-comp that transpiles it to ES5, and change the main entry of test-comp to refer to that ES5 version, not the ES6 version
添加 babelify 作为 test-comp 的依赖项，并添加 babelify 作为 package's 'browserify' entry 中的 browserify 转换，如 babelify 中所述。

无法将反应模块加载为节点模块

Unable to load a react module as node module

javascript

node-modules

browserify

reactjs

es6-modules