Next.js: webpack에서 .jsx 확장자 해결

흥미로운. .jsx 가 권장 확장 프로그램이라는 정보는 어디서 얻으셨나요? 나는 빠른 구글 검색을했지만 이것에 대한 공식적인 코멘트를 찾을 수 없었습니다. 내 Google foo가 최고가 아님을 인정해야 합니다.

예, 저는 편집기에서 자동 언어 선택을 위해 .jsx를 선호합니다.

실제로 JavaScript 프로젝트 Linting에서 주로 사용되는 airbnb 스타일 가이드 에서.

@7s4r 알겠습니다 . 에어비앤비 스타일 가이드를 알고 있습니다. 내가 기다리던 것은 페이스북이나 babel에서 직접 온 댓글이었다. 그러나 에어비앤비 스타일 가이드가 좋은 점은 확실합니다. 아마도 두 가지를 모두 지원하는 것이 올바른 방법일 것입니다. 문제에 대한 설명에서 이미 언급했습니다. 그래서 이것은 나에게서 :+1: 을 얻습니다. :).

.jsx 확장을 지원하는 데 유리한 또 다른 점은 ES6/ES2015를 대상으로 할 때마다 TypeScript가 해당 확장으로 컴파일된다는 것입니다.

airbnb / eslint-plugin-react 이 react/jsx-filename-extension 규칙에 대해 불평하고 있습니다.

이제 웹팩 구성을 조작할 수 있으므로 https://github.com/zeit/next.js#customizing -webpack-config가 가능합니다.

next.config.js를 사용하여 이 작업을 수행하는 방법에 대한 예가 있습니까? 내가 말할 수 있는 한, 이것은 프레임워크( babel-loader , hot-self-accept-loader , react-hot-loader/webpack , emit-file-loader )에서 생성한 4개 이상의 로더를 덮어써야 합니다. 그 문서는 명시적으로 나쁜 생각이라고 부르며 프레임워크의 목적을 무효화합니다.

공식 입장이라면 지지하지 않는 것은 괜찮은데, 위의 댓글이 그렇다고 하는 것 같습니다.

@AlteredConstants는 다음과 같습니다.

module.exports = {
  webpack: (config, { dev }) => {
    config.resolve.extensions = ['', '.js', '.jsx'];
    return config;
  }
}

_하지만_, 방금 시도한 결과 이 ​​접근 방식 이 작동하지 않는 것 같습니다 . 이유를 알아내려면 파헤쳐 봐야겠습니다.

@rossipedia, 그것은 단지 확장이 예를 들어, 가져 오기에서 제외 될 때 웹팩은 .jsx 확장하여 가져온 모듈을 인식 할 수 있도록 import Foo from './Foo' 대신 import Foo from './Foo.jsx' .

Webpack이 해당 모듈을 올바르게 처리하도록 하려면 위에서 언급한 로더의 test 속성에 .jsx 를 추가해야 합니다. 약간 무겁고 오류가 발생하기 쉬우며 위에 링크된 문서에 따라 미리 렌더링된 케이스를 처리하지 않습니다. 또한 자동 page/ 가져오기가 이 경우에도 작동하는지 확신할 수 없습니다. Webpack 프로세스 외부에서 및/또는 별도의 진입점으로 발생하는 것처럼 보입니까?

당연히 이 프레임워크에서 모듈 확인은 단순한 Webpack 구성 옵션보다 더 복잡합니다. 그래서 다시 말하지만, 내가 틀리지 않는 한 이 문제에 대한 해결책은 "해결 방법"보다 "수정되지 않을 것"인 것 같습니다. 저는 단지 팀의 입장을 분명히 하고 싶었습니다. @improuncciable , 더 많은 통찰력이 있습니까?

이것을 FAQ에 추가해야 합니다.

module.exports = {
  webpack: (config) => {
    config.resolve.extensions = ['.js', '.jsx'];
    config.module.rules.push(
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    );
    return config;
  }
}

@JF-Liu는 나를 위해 작동하지 않습니다.

Error: Cannot find module '../components/Page' 또는 Module build failed: Error: Couldn't find preset "stage-3" relative to directory "/Users/cla/Projects/with-mobx/node_modules/styled-jsx" 받고 있습니다.

next.js 2-beta + mobx + airbnb 설정 시도

내가 뭔가를 놓치고 있는 건 아닐까? .babelrc 콘텐츠는 무엇입니까?

pages 확장자는 .jsx 수 없습니다.

@foxhound87 예, 작동하지 않습니다. 저도 포기합니다.

TypeScript 2.2는 이제 "jsx": "react-native" 지원합니다. 이것은 .js 파일을 출력하지만 JSX도 보존합니다. 여기를 참조

여기에 같은 문제가 있습니다 :<, 이것을 해결하는 방법에 대한 아이디어가 있습니까?

우리 회사 표준은 jsx 마크업이 포함된 모든 파일에 .jsx 를 사용하는 것이므로 베이크오프를 작성하는 동안 이 문제에 부딪쳤습니다. 이것을 이해하는 것은 웹팩 구성이며 성능에 영향을 미치지 않아야 합니다. 특히 Next.js가 jsx 가져오기를 지원하지 않는 이유가 있습니까?

_편집하다:_
위에서 언급했듯이 webpack 구성을 사용하면 구성 요소를 가져올 때 잘 작동하지만 /pages/ 파일은 올바르게 라우팅하려면 .js 확장자가 있어야 합니다. 이 문제가 어리석은 것처럼 보일 수 있지만 대규모 팀은 표준/규약을 준수해야 이 훌륭한 프레임워크의 채택이 차단될 수 있습니다.

나는 이것을 제외하고 Next에 대한 모든 것이 정말 마음에 듭니다. 불행히도 우리가 그것을 사용하지 못하는 것입니다.
그래도 진전이 있는지 다시 확인하겠습니다.

이 문제는 Webpack과 Babel보다 훨씬 더 깊이 확장된 것 같습니다. 여러 곳에 하드코딩되어 있습니다. :(

지금까지 내가 한 유일한 노력은 server/resolve.js:34 에 "jsx" 행을 추가하는 것입니다. 내 프로젝트의 node_modules/next/dist/ 아래에 있는 파일을 수정하여 이 작업을 수행하고 있습니다.

수정하면 콘솔에서 아래와 같이 출력됩니다. 참고 콘솔이 지금 말한다 Building page: / 가 아니라, Client pings, but there's no entry for page: / .

 DONE  Compiled successfully in 12156ms                                                    8:34:44 PM

> Ready on http://localhost:3000
> Building page: /


 DONE  Compiled successfully in 10983ms                                                    8:34:58 PM

SyntaxError: Unexpected token m in JSON at position 0
    at JSON.parse (<anonymous>)
    at _callee$ (/Users/Jason/Repositories/radioapp/node_modules/next/dist/server/read-page.js:48:32)
    at tryCatch (/Users/Jason/Repositories/radioapp/node_modules/regenerator-runtime/runtime.js:64:40)
    at Generator.invoke [as _invoke] (/Users/Jason/Repositories/radioapp/node_modules/regenerator-runtime/runtime.js:299:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/Jason/Repositories/radioapp/node_modules/regenerator-runtime/runtime.js:116:21)
    at step (/Users/Jason/Repositories/radioapp/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/Jason/Repositories/radioapp/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

편집하다:

.eslintrc 파일로 server 디렉토리를 생성했기 때문에 이 문제는 실제로 견딜 수 있습니다.

{
  "parser": "espree",
  "parserOptions": {
    "ecmaVersion": 6,
  },

  "env": {
    "node": true
  },
}

누군가에게 도움이 되는 경우 디렉토리별로 다른 린터 와 Sublime 설정을 구성할 수 있습니다. Next.js 파일이 포함된 public 디렉토리를 만들고 적절한 .eslintrc 파일을 거기에 넣을 수도 있습니다.

나는 babel-sublime 및 SublimeLinter-contrib-eslint 와 함께 Sublime을 사용

@jasonszhao 동의합니다. 그러나 .jsx 지원을 지원할 가능성은 거의 없습니다. .js 확장자를 사용합니다.

@arunoda 실례 입니다. 우리 중 많은 사람들이 이 임의적인 디자인 선택 때문에 그것을 사용할 수 없습니다. 제거 중이라고 생각합니다.

구성할 수 있도록 하는 것이 더 합리적이지 않습니까? next.config.js 하고 기본값이 ['.js'] 인 옵션이 있거나 Jest의 경우 .test.js 또는 .spec.js 와 같은 것을 필터링할 수 있는 기능이 더 좋습니다.

편집: TypeScript에서 사용자 정의 서버도 실행하려고 하므로 TypeScript 예제에서 tsc 접근 방식을 사용할 수 없으므로 .tsx 를 사용하려고 합니다.

.jsx 아직 지원되지 않습니까? 또한 React 구성 요소에 .jsx 를 사용하는 것이 표준이기 때문에 회사에서 next.js 사용을 차단하는 문제에 직면해 있습니다.

나는 이것이 사소해 보이지만 우리 팀이 Next를 채택하는 것을 정당화하기 어렵게 만든다는 것을 알고 있습니다.

핵심 팀의 누군가가 이 겉보기에 중요하지 않은 디자인 결정에 대해 조금 더 자세히 설명할 수 있다면 정말 좋을 것입니다.

.jsx 확장 지원을 위해 +1

.jsx 지원을 쉽게 추가할 수 있지만... SSR은 지원하지 않습니다. 그러면 오류가 발생하지만 코드에서 무언가를 변경하고 핫 리로드하면 페이지가 표시됩니다. F5와 붐, 오류.

해결 방법을 잘 모르겠습니다.

const originalJS = "/\\.js(\\?[^?]*)?$/";

config.resolve.extensions = [".js", ".jsx", ".json"];
config.module.rules.forEach((rule) => {
    if (String(rule.test) === originalJS) {
        rule.test = /\.jsx?(\?[^?]*)?$/;
    }
});

많은 사람들과 마찬가지로 나는 이것이 왜 일어날 수 없는지 이해할 수 없습니다.

많은 사람들이 jsx 사용이라는 린터 구성을 사용합니다. 편집자는 이를 사용하여 일반 js와 jsx를 구분하고 ... 진지하게 추가하는 것이 그렇게 큰 문제입니까? 코드를 충분히 이해했다면 혼자 하겠지만...

플리즈

.jsx 가 "즉시" 작동할 것으로 합리적으로 기대할 수 있다는 아이디어에 대해 더 많은 지원을 제공합니다. 누군가가 문제가 무엇인지 파악하고(이 문제를 발견하면) 해결 방법은 사소하지만 제 경험상 .jsx 확장자를 사용하는 것은 _널리 채택된 관례_(여기서 의도적으로 "권장" 표현을 피함)입니다. 주로 React 구성 요소를 내보내는 파일의 경우.

확장 기능을 교체하고 계속 진행하려고 합니다. 하지만 왜 이에 대한 저항이 있는지 이해하기 어렵습니다. 이것이 합당한 요청이라는 것보다 더 중요한 것은 많은 개발자에게 예상되는 동작이며 (거의) 진입 장벽이 높아집니다. 그리고 이것을 확장으로 .jsx 의 장점에 대한 논쟁으로 만들고 싶지는 않지만 .js 에서 유효한 JavaScript만 원한다는 것이 완전히 불합리한 것은 아니라고 말하는 것으로 충분합니다.

Btw, 이제 막 시작했지만 지금까지는 사랑하고 있습니다. 모든 멋진 작업에 감사드립니다!

아마도 연결되어 있을 것입니다. .md 확장자를 사용할 수 없었습니다. 서버( .md.js )에서 작동하도록 하려면 다음 트릭을 사용해야 했습니다.

next.config.js

// ...
          {
            test: /\.md\.js$/,
            loader: 'raw-loader',
          },
// ...

나는 airbnb와 함께 eslint를 사용하고 경고를 침묵시키는 또 다른 규칙을 추가했습니다.

{
    "extends": "airbnb",
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
}

.jsx 파일이 있는 실제 예제가 있는 사람이 있습니까?

• pages 디렉토리 내부,
• 서버 측 렌더링 작업
• 다른 디렉토리에서 모듈로 가져오기

?

이것은 /examples 디렉토리에 큰 도움이 될 것입니다.

+1 jsx 지원 추가.

@rossipedia 가 제안한 것과 유사한 작업을 수행하여 문제를

아직 없으면 프로젝트 루트에 next.config.js 를 만듭니다.
그런 다음 config.resolve.extensions 배열에 'jsx'를 푸시하면 잘 작동합니다.

module.exports = {
  webpack: function (config, { isServer }) {
    config.resolve.extensions.push('.jsx');
    return config
  }
}

편집하다
이 수정은 성능에 나쁜 영향을 미칠 것 같습니다. 추가 조사를 진행합니다.

다음 v5를 사용하는 경우 무엇이든 변경할 필요가 없습니다. .jsx 확장자는 기본적으로 지원됩니다. 성능과 관련된 것이 보이면 next@canary로 업그레이드해 보십시오

나는 그것을 눈치 챘다, 굉장하다!