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