Skip to main content

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