材料 Ui 导入给出错误“模块构建失败：错误：ENOENT：没有这样的文件或目录”答案

【问题标题】：Material Ui import gives error "Module build failed: Error: ENOENT: no such file or directory"材料 Ui 导入给出错误“模块构建失败：错误：ENOENT：没有这样的文件或目录”
【发布时间】：2021-11-16 18:06:21
【问题描述】：

我正在构建一个 Next JS 应用程序。除非我将 material-ui 导入到项目中，否则一切都很顺利。用material-ui，反复报错：

./node_modules/@emotion/styled/dist/styled.browser.esm.js
 Module build failed: Error: ENOENT: no such file or directory, open 
'D:\ReactProjects\ace\node_modules\@emotion\styled\dist\styled.browser.esm.js'

我删除了material-ui并设置了样式，重新安装但没有影响。谁知道原因？

【问题讨论】：

标签： material-ui next.js

【解决方案1】：

您可以尝试创建一个名为styled.browser.esm.js 的文件并将其粘贴到其中并放入D:\ReactProjects\ace\node_modules\@emotion\styled\dist\；

import '@babel/runtime/helpers/extends';
import 'react';
import '@emotion/is-prop-valid';
import createStyled from '../base/dist/emotion-styled-base.browser.esm.js';
import '@emotion/react';
import '@emotion/utils';
import '@emotion/serialize';

var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];

var newStyled = createStyled.bind();
tags.forEach(function (tagName) {
  // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type
  newStyled[tagName] = newStyled(tagName);
});

export default newStyled;

我知道这很奇怪，但 npm 似乎没有将所有文件都放入文件夹中。我通过从存储库中手动获取文件并将其放入我的文件夹中解决了此类问题。

【讨论】：