Import attributes tests
MDX, JSX and TSX files can use import attributes.
Modules imported with with {type: 'text'} should be the raw file content, not processed by any loader. These tests fail the build otherwise.
MDX file
JSON import
{"fixture":"JSON fixture"}
✅ JS
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function JsFixture() {
return <div>JS fixture</div>;
}
✅ TS
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
export const tsFixture: string = 'TS fixture';
✅ TSX
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function TsxFixture({name}: {name: string}): React.JSX.Element {
return <div>TSX fixture {name}</div>;
}
✅ JSON
{
"fixture": "JSON fixture"
}
✅ CSS
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.cssFixture {
color: red;
}
✅ CSS Module
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.cssModuleFixture {
color: blue;
}
✅ SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" /></svg>
✅ Markdown
# Markdown fixture
Some **Markdown** text.
✅ MDX
# MDX fixture
<MdxFixture name="world" />
✅ YAML
fixture: YAML fixture
✅ Text
Text fixture
JSX file
JSON import
{"fixture":"JSON fixture"}✅ JS
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function JsFixture() {
return <div>JS fixture</div>;
}
✅ TS
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
export const tsFixture: string = 'TS fixture';
✅ TSX
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function TsxFixture({name}: {name: string}): React.JSX.Element {
return <div>TSX fixture {name}</div>;
}
✅ JSON
{
"fixture": "JSON fixture"
}
✅ CSS
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.cssFixture {
color: red;
}
✅ CSS Module
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.cssModuleFixture {
color: blue;
}
✅ SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" /></svg>
✅ Markdown
# Markdown fixture
Some **Markdown** text.
✅ MDX
# MDX fixture
<MdxFixture name="world" />
✅ YAML
fixture: YAML fixture
✅ Text
Text fixture
TSX file
JSON import
{"fixture":"JSON fixture"}✅ JS
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function JsFixture() {
return <div>JS fixture</div>;
}
✅ TS
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
export const tsFixture: string = 'TS fixture';
✅ TSX
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
export default function TsxFixture({name}: {name: string}): React.JSX.Element {
return <div>TSX fixture {name}</div>;
}
✅ JSON
{
"fixture": "JSON fixture"
}
✅ CSS
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.cssFixture {
color: red;
}
✅ CSS Module
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.cssModuleFixture {
color: blue;
}
✅ SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" /></svg>
✅ Markdown
# Markdown fixture
Some **Markdown** text.
✅ MDX
# MDX fixture
<MdxFixture name="world" />
✅ YAML
fixture: YAML fixture
✅ Text
Text fixture