SyntaxError: Cannot use import statement outside a module about storybook-addon-preview HOT 7 CLOSED

import * as React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, boolean, number } from "@storybook/addon-knobs";
import {
	withPreview,
	previewTemplate,
	DEFAULT_VANILLA_CODESANDBOX,
} from "storybook-addon-preview";

import Task from "./Task";

const storyName = "Test";
const title = "Test Title";
const stories = storiesOf(storyName, module);
const VirtualComponent = Task;

stories.addDecorator(withKnobs).addDecorator(withPreview);
stories.add(
	title,
	(e) => {
                const opt1 = boolean("opt1", false);
                const opt2 = number("num1", 0);
		return (
			<VirtualComponent
				title={title}
				storyName={storyName}
				key={Math.random()}
			/>
		);
	},
	{
		preview: [
			{
				tab: "React",
				template: previewTemplate`
				const inst = new Instance({
					opt1: ${"opt1"},
					num1: ${"num1"},
				});
							`,
				language: "js",
				codesandbox: DEFAULT_VANILLA_CODESANDBOX(["@egjs/infinitegrid"]),
				copy: true,
			},
		],
	}
);

import addons, { makeDecorator } from '@storybook/addons';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import { storiesOf } from "@storybook/react";
      3 | import { withKnobs, boolean, number } from "@storybook/addon-knobs";
    > 4 | import {
        | ^
      5 | 	withPreview,
      6 | 	previewTemplate,
      7 | 	DEFAULT_VANILLA_CODESANDBOX,

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/components/Test.stories.js:4:1)

Test Suites: 1 failed, 1 passed, 2 total

import {
	withPreview,
	previewTemplate,
	DEFAULT_VANILLA_CODESANDBOX,
} from "storybook-addon-preview";
import { storiesOf } from "@storybook/react";
import AppHeader from "./AppHeader.js";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";

const storyName = "Test";
const title = "Test Title";
const stories = storiesOf(storyName, module);
const VirtualComponent = AppHeader;

stories.addDecorator(withKnobs).addDecorator(withPreview);
stories.add(
	title,
	(e) => {
		const opt1 = boolean("opt1", false);
		const opt2 = number("num1", 0);
		return (
			<VirtualComponent
				title={title}
				storyName={storyName}
				key={Math.random()}
			/>
		);
	},
	{
		preview: [
			{
				tab: "React",
				template: previewTemplate`
				const inst = new Instance({
					opt1: ${"opt1"},
					num1: ${"num1"},
				});
							`,
				language: "js",
				codesandbox: DEFAULT_VANILLA_CODESANDBOX(["@egjs/infinitegrid"]),
				copy: true,
			},
		],
	}
);

http://localhost:9009/?path=/story/test--test-title

import React from "react";
import {
	withPreview,
	previewTemplate,
	DEFAULT_REACT_CODESANDBOX,
} from "storybook-addon-preview";
import { storiesOf } from "@storybook/react";
import AppHeader from "./AppHeader.js";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";

const storyName = "Test";
const title = "Test Title";
const stories = storiesOf(storyName, module);
const VirtualComponent = AppHeader;

stories.addDecorator(withKnobs).addDecorator(withPreview);
stories.add(
	title,
	(e) => {
		const opt1 = boolean("opt1", false);
		const opt2 = number("num1", 0);
		return (
			<VirtualComponent
				title={title}
				storyName={storyName}
				key={Math.random()}
			/>
		);
	},
	{
		preview: [
			{
				tab: "React",
				// template: previewTemplate`
				// const inst = new Instance({
				// 	opt1: ${"opt1"},
				// 	num1: ${"num1"},
				// });
				// 			`,
				language: "js",
				codesandbox: DEFAULT_REACT_CODESANDBOX(["@egjs/infinitegrid"]),
				copy: true,
			},
		],
	}
);

				template: `
				 const inst = new Instance({
				 	opt1: 1,
				 	num1: 1,
				 });
				 `,