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

Posted 2023-03-07

【中文标题】无法将反应模块加载为节点模块

【英文标题】：Unable to load a react module as node module

【发布时间】：2017-07-20 08:36:52

【问题描述】：

我在路径中有一个反应组件 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';

我在这个应用程序中使用 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.

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

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

我尝试了大多数与此错误相关的 SO 答案。但仍然卡在同一个地方。

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

【问题讨论】：

您能否为我们创建一个基本存储库，以便我们可以复制该问题？

我会尝试...我在这里错过的任何建议？

不幸的是，从所提供的信息中并不清楚 - 一个可重现的、最小的示例真的可以帮助我们解决手头的问题！

@thecodejack 如果您在包 A 中使用 browserify，并且您使用 browserify 构建依赖于 A 的包 B，它将无法工作。你必须在包 A 上使用类似 debowerify 的东西。

哦..ok..不知道这一点。看起来可能是这个原因。有什么具体原因吗？因为我没有从包 B 中浏览包 A。我只是使用 browserify 在包 B 中导入包 A 的一些模块。

【参考方案1】：

所以你在 ES6 中使用import 和export 编写了模块test-comp，而test-comp 中package.json 的main 条目指的是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 中所述。

【讨论】：

有趣。认为browserify会照顾。但我实际上使用 webpack 重新配置了它，处理这个问题没有问题。很可能是通过 babel-loader 处理的。