Javascript 反应导入材料ui组件不工作
我是新来的。我有一个本地开发服务器（节点http服务器）并安装了包 根据material ui文档，要添加组件，我只需像导入任何其他模块一样导入它：Javascript 反应导入材料ui组件不工作,javascript,reactjs,import,material-ui,Javascript,Reactjs,Import,Material Ui,我是新来的。我有一个本地开发服务器（节点http服务器）并安装了包 根据material ui文档，要添加组件，我只需像导入任何其他模块一样导入它： import Button from '@material-ui/core/Button'; 然而，当我尝试此操作时，我的Web服务器返回404，Firefox控制台输出：Loading module from“http://localhost:8080/node_modules/@由于不允许的MIME类型（“文本/html”） 该目录是可访问的
import Button from '@material-ui/core/Button';
Loading module from“http://localhost:8080/node_modules/@由于不允许的MIME类型（“文本/html”）/node\u modules/@material ui/core/Button/Button.jsSyntaxError: import not found: default.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test React</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="app"></div>
<!-- React scripts -->
<script type="module" src="./test.js"></script>
</body>
</html>
测试反应
import { Mod1 } from './module1.js';
export class TestComponent extends React.Component
{
render()
{
return <h1>Hello world!</h1>;
}
}
export const TestC2 = () =>
{
return <h2>This is a h2</h2>;
}
ReactDOM.render(<div><TestComponent /><TestC2 /><Mod1 /></div>, document.getElementById('app'));
从'/module1.js'导入{Mod1}；
导出类TestComponent扩展了React.Component
{
render（）
{
返回你好世界！；
}
}
导出常量TestC2=（）=>
{
返回这是一个h2；
}
ReactDOM.render（，document.getElementById（'app'））；
// module1
import Button from './node_modules/@material-ui/core/Button';
export class Mod1 extends React.Component
{
constructor(props)
{
super(props);
this.state = {};
}
componentWillMount(props)
{
console.log("willMount", props);
}
componentDidMount(pp, ps)
{
console.log("didMount", pp, ps);
}
render()
{
console.log('render', this.props, this.state);
return <Button />;
}
}
//模块1
从“./node_modules/@material ui/core/Button”导入按钮；
导出类Mod1扩展了React.Component
{
建造师（道具）
{
超级（道具）；
this.state={}；
}
组件安装（道具）
{
控制台日志（“willMount”，道具）；
}
组件安装（pp、ps）
{
console.log（“didMount”，pp，ps）；
}
render（）
{
console.log（'render'，this.props，this.state）；
返回；
}
}