파일 이름이 jsx인 경우 웹 팩에서 모듈을 찾을 수 없습니다.

파일 이름이 jsx인 경우 웹 팩에서 모듈을 찾을 수 없습니다.

webpack.config.js 라고 쓰면

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

그리고...index.jsxImport하다react모듈App

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

에서 모듈 앱 이름을 지정했는지 확인합니다.App.jsx웹 팩은 다음과 같이 표시됩니다.index.jsx모듈을 찾을 수 없습니다.App단, 에서 모듈앱이라는 이름을 붙이면App.js이 모듈은 정상적으로 동작합니다.

그래서 헷갈려요.인마이webpack.config.js, 나는 썼다.test: /\.jsx?$/파일을 확인하는데 왜 이름이 붙여졌습니까?*.jsx찾을 수 없습니까?

웹 팩이 해결할 방법을 알 수 없습니다..jsx파일이 암묵적으로 표시됩니다.앱에서 파일 확장자를 지정할 수 있습니다.import App from './containers/App.jsx';현재 로더 테스트에서는 jsx 확장자를 가진 파일을 명시적으로 Import할 때 babel loader를 사용하도록 되어 있습니다.

또는 다음을 포함할 수 있습니다..jsx웹 팩이 명시적으로 선언하지 않고 해결해야 하는 확장자:

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  }
};

Webpack 2 의 경우는, 빈 내선 번호를 떼어 둡니다.

resolve: {
  extensions: ['.js', '.jsx']
}

가독성 및 복사 붙여넣기 부호화를 위해.여기 이 스레드에 있는 Mr Rogers의 webpack 4의 답변이 있습니다.

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}

위의 답변에 덧붙여,

resolve 속성은 응용 프로그램에서 사용 중인 모든 파일 유형을 추가해야 합니다.

.jsx 또는 .es6 파일을 사용하는 경우를 가정해 보겠습니다.이것들을 여기에 포함하면, Web 팩에 의해서 해결됩니다.

resolve: {
  extensions: ["", ".js", ".jsx", ".es6"]
}

resolve 속성에 확장자를 추가하면 Import 문에서 해당 확장자를 제거할 수 있습니다.

import Hello from './hello'; // Extensions removed
import World from './world';

커피 스크립트를 검출하는 경우는, 다음과 같이 테스트 속성을 설정할 필요가 있습니다.

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};

@max로부터의 답변 코멘트에서도 언급했듯이 Webpack 4의 경우 모듈 아래에 나열된 규칙 중 하나에 다음과 같이 입력해야 합니다.

{
  module: {
    rules: [ 
      {
        test: /\.jsx?$/, 
        resolve: {
          extensions: [".js", ".jsx"]
        },
        include: ...
      }
    ]
  }
}

해당 bundle.js가 오류 없이 생성되고 있는지 확인합니다(태스크 실행자 로그 확인).

컴포넌트 렌더 함수의 html 구문 오류로 인해 "cannot find module if jsx"라는 이름의 파일을 찾을 수 없습니다.

저도 같은 문제에 직면해 있었기 때문에 해결 속성을 사용하여 해결할 수 있었습니다.

const path = require('path');
module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.join(__dirname,'public'),
        filename:  'bundle.js'
    },
    module : {
        rules: [{
            loader: 'babel-loader',
            test: /\.jsx$/,
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

보시는 바와 같이 .jsx를 사용하여 다음 오류를 해결했습니다.

./src/app.jsx 모듈을 찾을 수 없습니다. 오류:해결할 수 없다

참고 자료: https://webpack.js.org/configuration/resolve/ #syslog-extensions

나는 다음과 같은 내 타이프스크립트 프로젝트를 만드는 동안 수입과 관련하여 비슷한 문제에 직면했다.webpack★★★★★★★★★★★★★★★★★★:

"webpack": "^5.28.0",
"webpack-cli": "^4.5.0" 

는...App.tsx파일이 올바른 경로에 있고 명명된 내보내기와 함께 내보냅니다.렇지 but but , but 。yarn build요.Module not found: Error: Can't resolve './App' in '/app/sample_proj/src'는 다음과 같습니다.import {App} from './App';는 이 문제를 해결하기 위해 '이러다', '이러다'를 했습니다.tsx아래webpack존 from from from from from from from from from from from의 엔트리 예시webpack.config.js

 module.exports = {
       ......
       resolve: {
            extensions: [ '.ts', '.js', '.tsx', '.jsx'],
        }
     }

또, 이 에러의 경우, Import가 디폴트인지 이름부여도 상관없습니다. webpack처리해야 할 파일 확장자의 종류만 알면 됩니다.

서버를 재부팅하면 이 문제가 해결되었습니다.간단히 실행하다

npm start

언급URL : https://stackoverflow.com/questions/34678314/webpack-cant-find-module-if-file-named-jsx