I use typescript, react, and next.js.
I introduced storybook and launched storybook with yarn storybook. When I ran yarn storybook the next day, I got an error.
error
TSError: ⨯ Unable to compile TypeScript:
ERR! .storybook/main.ts:1:1 - error TS1208: 'main.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.
ERR!
ERR! 1 const path = require('path');
ERR! ~~~~~
ERR!
ERR! at createTSError (/Users/taichi/de/node_modules/ts-node/src/index.ts:434:12)
ERR! at storybookDevServer (/Users/taichi/de/node_modules/@storybook/core/dist/server/dev-server.js:496:21)
ERR! at buildDevStandalone (/Users/taichi/de/node_modules/@storybook/core/dist/server/build-dev.js:317:33)
ERR! .storybook/main.ts:1:1 - error TS1208: 'main.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.
ERR!
ERR! 1 const path = require('path');
ERR! ~~~~~
ERR!
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
addition
This is the main.ts file
const path = require('path');
const toPath = (_path) => path.join(process.cwd(), _path);
module.exports = {
stories: ['../src/**/*.stories.mdx', '../**/*.stories.@(ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
},
},
webpackFinal: async (config) => {
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
'@emotion/core': toPath('node_modules/@emotion/react'),
'emotion-theming': toPath('node_modules/@emotion/react'),
},
},
};
},
};
adding ts-ignore
ERROR in ./.storybook/preview.tsx-generated-config-entry.js Module not found: Error: Can't resolve 'core-js/modules/es.array.filter.js' in '/Users/taichi/de/.storybook' @ ./.storybook/preview.tsx-generated-config-entry.js 5:0-45 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
ERROR in ./.storybook/preview.tsx-generated-config-entry.js Module not found: Error: Can't resolve 'core-js/modules/es.array.for-each.js' in '/Users/taichi/de/.storybook' @ ./.storybook/preview.tsx-generated-config-entry.js 7:0-47 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
ERROR in ./src/components/Button.stories.tsx Module not found: Error: Can't resolve 'core-js/modules/es.object.assign.js' in '/Users/taichi/de/src/components' @ ./src/components/Button.stories.tsx 2:0-45 @ . sync ^.(?:(?:^|/|(?:(?:(?!(?:^|/).).)?)/)(?!.)(?=.)[^/]?.stories.(ts|tsx))$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined