找不到模块：错误：无法解析＆＃39; file＆＃39;或者＆＃39;目录＆＃39;

Question

请你们帮我解决这个问题。 我有两个.jsx文件，一个在另一个下导入。 可以说， A.jsx（在A.jsx里面我导入了B.jsx） B.jsx

当两个文件都写在同一个文件下时，单元测试用例工作正常。我将它分离出来的那一刻，组件工作正常，但单元测试用例没有运行。 Webpack业力抛出错误说

ERROR in ./src/components/thpfooter/index.jsx Module not found: Error: Cannot resolve 'file' or 'directory' ./ThpFooterList in /Users/zi02/projects/creps_ui_components_library/src/components/thpfooter @ ./src/components/thpfooter/index.jsx 9:1725-1751

karma.conf.js

/*eslint-disable*/
var webpack = require('karma-webpack');
var argv = require('yargs').argv;
var componentName = "**";
if (typeof argv.comp !== 'undefined' && argv.comp !== null && argv.comp !== "" && argv.comp !== true) {
  componentName = argv.comp;
}

var testFiles = 'src/components/'+componentName+'/test/*.js';
var mockFiles = 'src/components/'+componentName+'/test/mock/*.json';

module.exports = function (config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
      './node_modules/phantomjs-polyfill/bind-polyfill.js',
      testFiles,
      mockFiles
    ],
    plugins: [webpack,
              'karma-jasmine',
              'karma-phantomjs-launcher',
              'karma-coverage',
              'karma-spec-reporter',
              'karma-json-fixtures-preprocessor',
              'karma-junit-reporter'],
    browsers: ['PhantomJS'],
    preprocessors: {
      'src/components/**/test/*.js': ['webpack'],
      'src/components/**/*.jsx': ['webpack'],
      'src/components/**/test/mock/*.json': ['json_fixtures']
    },
    jsonFixturesPreprocessor: {
      // strip this from the file path \ fixture name
      stripPrefix: 'src/components/',
      // strip this to the file path \ fixture name
      prependPrefix: '',
      // change the global fixtures variable name
      variableName: '__mocks__',
     // camelize fixture filenames
     // (e.g 'fixtures/aa-bb_cc.json' becames __fixtures__['fixtures/aaBbCc'])
      camelizeFilenames: true,
      // transform the filename
      transformPath: function (path) {
        return path + '.js';
      }
    },
    reporters: ['spec', 'coverage','junit'],
    coverageReporter: {
      dir: 'build/reports/coverage',
      reporters: [
        { type: 'html', subdir: 'report-html' },
        { type: 'lcov', subdir: 'report-lcov' }
      ]
    },
    junitReporter: {
      outputDir: 'build/reports/coverage/junit/'+componentName,
      suite: ''
    },

    webpack: {
      module: {
        loaders: [{
          test: /\.(js|jsx)$/, exclude: /node_modules/,
          loader: 'babel-loader'
        }],
        postLoaders: [{
          test: /\.(js|jsx)$/, exclude: /(node_modules|test)/,
          loader: 'istanbul-instrumenter'
        }]
      }
    },
    webpackMiddleware: { noInfo: true }
  });
};

footer.jsx

import React from 'react';
import ThpFooterList from './ThpFooterList';

class ThpFooter extends React.Component {
   //footer code here
}

ThpFooterList.jsx

import React from 'react';

class ThpFooterList extends React.Component {
   //footer list code here
}

见上面的组件正在运行，但我无法执行单元测试用例。如果将它们保存在一个文件中，则表示footer和footerlist.jsx，然后组件以及单元测试用例正在执行。

单元测试用例文件

/* eslint-env jasmine */
import React from 'react';
import TestUtils from 'react/lib/ReactTestUtils';

import ThpFooter from '../index.jsx';


describe('ThpFooter', () => {
  let component;
  let content;
  let shallowRenderer;
  let componentShallow;

  beforeAll(() => {
    content = window.__mocks__['thpfooter/test/mock/content'];
    component = TestUtils.renderIntoDocument(<ThpFooter data={content}/>);
    shallowRenderer = TestUtils.createRenderer();
    shallowRenderer.render(<ThpFooter data={content}/>);
    componentShallow = shallowRenderer.getRenderOutput();
  });

  describe('into DOM', () => {
    it('Should be rendered into DOM', () => {
      expect(component).toBeTruthy();
    });

    it('Should have classname as footer-container', () => {
      const classname = TestUtils.scryRenderedDOMComponentsWithClass(component, 'footer-container');
      expect(classname[0].className).toBe('footer-container');
    });

    it('Should have className as footer-wrapper', () => {
      const classname = TestUtils.scryRenderedDOMComponentsWithClass(component, 'footer-wrapper');
      expect(classname[0].className).toBe('footer-wrapper');
    });
  });

  describe('into shallow renderer', () => {
    it('Should be rendered as shallow renderer', () => {
      expect(componentShallow).toBeTruthy();

    });

    it('Should have classname as footer-container', () => {
      expect(componentShallow.props.className).toBe('footer-container');
    });

    it('Should have className as footer-wrapper', () => {
      expect(componentShallow.props.children.props.children[0].props.className).toBe('footer-wrapper');
    });
  });

});

Answer 1

我在其中一台开发机器上遇到了同样的错误。虽然在我的情况下使用了gulp和webpack-stream，但我认为你可以参考我的方法来尝试解决它。

在我的Mac上，一切都很好但是当我将代码推送到ubuntu开发平台时，就会发现这个问题。经过一些谷歌搜索我无法解决它，但后来我试图使文件路径更短，然后突然它也在ubuntu开发平台上工作！您可以尝试缩短文件名或将其放在较短的路径中并测试它是否有效。

Answer 2

注意区分大小写。 Mac文件系统不区分大小写，windows / linux是。