Javascript 任何组件都不会'；导入react引导库后无法渲染_Javascript_Reactjs_Npm_Bootstrap 4_React Bootstrap

Javascript 任何组件都不会'；导入react引导库后无法渲染

javascript reactjs npm bootstrap-4

Javascript 任何组件都不会'；导入react引导库后无法渲染,javascript,reactjs,npm,bootstrap-4,react-bootstrap,Javascript,Reactjs,Npm,Bootstrap 4,React Bootstrap,在npm init和安装react、react-dom、bootstrap和react-bootstrap包之后，我不能从react-bootstrap库导入任何组件，因为import按钮来自“react-bootstrap/Button”生成类型错误：错误解析模块说明符：反应引导/按钮我通过将路径从“/node\u modules/react bootstrap/Button”更改为import按钮来消除该错误-这是正确的路径，但当我尝试渲染任何内容时，它不会更改target.php文件中的

在

npm init

和安装react、react-dom、bootstrap和react-bootstrap包之后，我不能从react-bootstrap库导入任何组件，因为

import按钮来自“react-bootstrap/Button”生成类型错误：错误解析模块说明符：反应引导/按钮

我通过将路径从“/node\u modules/react bootstrap/Button”

更改为

import按钮来消除该错误-这是正确的路径，但当我尝试渲染任何内容时，它不会更改target.php文件中的div，控制台中没有任何错误，因此我失败了。我使用巴别塔巴别塔-cli@6巴别塔预设反应-app@3
JSX翻译的预处理器
以下是预处理的index.js：
import Button from 'react-bootstrap/Button'


class ProfilePage extends React.Component {
  render() {
    return (
      <div>
        <p>blah blah blah blah blah</p>
      </div>
    );
  }
}

ReactDOM.render(<ProfilePage/>, document.getElementById('app'))

从“反应引导/按钮”导入按钮
类ProfilePage扩展了React.Component{
render（）{
返回(
废话废话废话
);
}
}
ReactDOM.render（，document.getElementById（'app'））

和index.php：
<!DOCTYPE html>

<html lang="en">


<head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link
   rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
   integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous"
 />

 <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

</head>


<body>


  <div id="app">inner html
  </div>


  <script
    src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
    crossorigin
  />
  <script>var Alert = ReactBootstrap.Alert;</script>

  <script type="module" src="./index.js"></script> <!-- processed index.js --> 

</body >


内部html
var-Alert=ReactBootstrap.Alert；

输出为：内部html。
没有react bootstrap导入，它可以完美地工作，bootstrap也可以，但我当然不能使用react bootstrap组件。我遗漏了什么？
我认为您的导入语法不正确。而不是
import Button from 'react-bootstrap/Button'

试一试
或
如果上述方法不起作用。
我认为您的导入语法不正确。而不是
import Button from 'react-bootstrap/Button'

试一试
或
如果上述方法不起作用。
我尝试了这些方法和许多可能的变化，结果仍然是一样的。我必须在路径前面提供/
或/
以消除类型错误：错误解析模块说明符：react bootstrap/按钮
。也许是npm配置的问题？我之前没用过。只需键入npminit
命名项目并保留rest默认值，然后安装我提到的包，并认为它应该可以工作？哦那么，你为什么不在你的路径前面加一个呢？它必须在模块的相对路径的某个地方指定，并且在那里的末尾不能有斜杠（我建议在那里添加它，这样你就不再需要它了）。我尝试了这些和许多可能的变化，但它仍然是一样的。我必须在路径前面提供/
或/
以消除类型错误：错误解析模块说明符：react bootstrap/按钮
。也许是npm配置的问题？我之前没用过。只需键入npminit命名项目并保留rest默认值，然后安装我提到的包，并认为它应该可以工作？哦那么，你为什么不在你的路径前面加一个呢？必须在模块的相对路径的某个地方指定它，并且在那里的末尾不能有斜杠（我建议在那里添加它，这样您就不再需要它了）
import { Button } from 'react-bootstrap/Button'