홈>
라우팅 (Routes.js)에 대한 다음 코드가 있습니다.
export default (props) => {
import(`../styles/${props.site}/theme.css`);
return (
<div>
<Menu />
<Switch>
<Route
exact path="/"
render={({ staticContext, match }) => {
const site = staticContext
? staticContext.site
: location.hostname.split(".")[0]
return <UniversalComponent site={site} match={match} page="core/ToBeDeleted_Homepage" />
}}
/>
...
...
먼저 CSS 파일을 다음과 같이 가져옵니다.
"import(
../styles/${props.site}/theme.css
);"
여기에서 가져 오기 부작용이 사용되므로 ${props.site} 변수가 사용 가능할 때마다 정적으로 작동하고 가져 오는 응용 프로그램에 바인드됩니다.
그런 다음 "return (~~~)"안에있는 모든 것을 사용하여 앱을 렌더링합니다.
위의 코드가 .js 파일로 작성된 경우 작동합니다. 그러나 이것은 typescript (.tsx 파일)에서는 작동하지 않습니다.
.tsx 파일에서 매우 유사한 코드를 사용하면 다음과 같은 오류가 발생합니다.
[FLUSH CHUNKS]: Unable to find styles/localhost-theme-css in Webpack chunks. Please check usage of Babel plugin.
(node:28539) UnhandledPromiseRejectionWarning: Error: Cannot find module './undefined/theme.css'
가져 오기를 마치기 전에 반환되는 것처럼 보입니다. 따라서 이것은 typescript의 경우 ${props.site} 변수를 사용할 수없고 오류를 반환 할 때 ${props.site}를 가져 오려고하기 때문에 정적으로 작동하지 않습니다.
이 문제를 어떻게 해결할 수 있습니까?
내 tsconfig.json :
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"allowJs": true,
"jsx": "react",
"sourceMap": true,
"outDir": "dist",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
".vscode"
]
}
- 답변 # 1
관련 자료
- Typescript에서 모델 만들기, Timestamp 가져 오기 방법 Firebase
- reactjs - typescript 및 javascript를 사용하여 npm 패키지로 js를 가져 오는 방법
- javascript - 언제 typescript import * as를 사용합니까?
- javascript - jQuery 코드를 Typescript로 가져 오는 방법
- razor - Typescript가있는 모듈을 가져올 수 없습니다
- 객체 파괴와 함께 TypeScript에서 JSON을 가져 오는 방법은 무엇입니까?
- TypeScript에서 가져 오기 또는 내보내기가 "최상위"라는 것은 무엇을 의미합니까?
- ServiceStack을 사용하여 DTO를 타입 스크립트로 가져 오려고 할 때 'DefaultImports'는 어떻게 사용됩니까?
- Typescript에서 NPM 패키지를 두 번 가져 오는 이유 (Firebase 함수)
- angular - typescript에서 별명을 가진 특정 유형 가져 오기
- WebAssembly 함수를 TypeScript로 가져 오는 방법은 무엇입니까?
- javascript - React Native의 명명 규칙에 따라 타입 스크립트 파일 가져 오기
- node.js - typescript에 대한 가져 오기 노드 요청 유형
- 가져 오기를 결합하고 유형 스크립트 선언 파일에서 키워드를 선언하십시오
- npm - typescript es6 가져 오기 구문이있는 html 유효성 검사기 모듈
- Cloud Functions에서 Typescript를 사용할 때 firebase-admin에서 사용 된 비트 만 가져 오기
- node.js - syntaxerror - "web3"에서 web3을 가져올 때 typescript의 예기치 않은 식별자
- reactjs - 타입 스크립트에서 클래스에서 다른 클래스로 콜백 가져 오기
- 타입 스크립트 가져 오기 유형 eslint - 가져 오기/이름
- nix - Idris에서 "가져 오기 효과를 찾을 수 없습니다"문제를 해결하는 방법은 무엇입니까?
당신은 사용할 수 있습니다
require
대신에import
(이후import
에서 일어날 수 있습니다최상위). 또한 구성 요소 외부로 로직을 이동시키는 것을 고려하십시오.그런 다음 단순히 구성 요소 내부 :