CODEWITHSUNDEEP
reactjstypescriptbabeljsstorybook
Dorian Maliszewski
Dorian Maliszewski

Reputation: 891

Storybook main.ts: Cannot use import statement outside a module

When using main.ts cannot use import statement. I have a ./storybook/babel.config.json

{
  "presets": [
    "@babel/preset-typescript",
    ["@babel/preset-env", { "shippedProposals": true, "targets": { "node": "current" } }],
    "@babel/preset-react",
    [
      "@emotion/babel-preset-css-prop",
      {
        "sourceMap": false,
        "autoLabel": "never",
        "labelFormat": "[filename]--[local]"
      }
    ]
  ]
}

A .storybook/tsconfig.json:

{
  "target": "es2020",
    "module": "esnext",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "esModuleInterop": true,
    "noEmit": true,
    "moduleResolution": "node",
    "jsx": "preserve",
}

And in my .storybook/main.ts

import path from 'path'

export default {
  core: {
    builder: 'webpack5',
  },
  tsDocgenLoaderOptions: {
    tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
  },
  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },
  stories: ['../src/**/__stories__/*.stories.tsx', '../src/__stories__/**'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
  ],
  webpackFinal: (config: any) => {
    const cwd = process.cwd()

    if (config.resolve?.alias) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@emotion/core': path.join(cwd, 'node_modules', '@emotion', 'react'),
        '@emotion/styled': path.join(cwd, 'node_modules', '@emotion', 'styled'),
        '@emotion/styled-base': path.join(
          cwd,
          'node_modules',
          '@emotion',
          'styled',
        ),
        'emotion-theming': path.join(cwd, 'node_modules', '@emotion', 'react'),
      }
    }

    if (config.module?.rules) {
      config.module.rules.push({
        test: /\.(png)$/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      })
    }

    return config
  },
}

Everytime I get

ERR! import path from 'path';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module

I don't know how to solve this one (And don't want to add an additional package.json in the .storybook folder)

Information : I already added ts-node dependency in main package.json.

Storybook info :

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.1.0 - /usr/local/bin/node
    Yarn: 3.0.2 - /usr/local/bin/yarn
    npm: 7.24.2 - ~/*****/node_modules/.bin/npm
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 89.0.2
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: 6.3.12 => 6.3.12
    @storybook/addon-docs: 6.3.12 => 6.3.12
    @storybook/addon-essentials: 6.3.12 => 6.3.12
    @storybook/addon-links: 6.3.12 => 6.3.12
    @storybook/addons: 6.3.12 => 6.3.12
    @storybook/builder-webpack5: 6.3.12 => 6.3.12
    @storybook/manager-webpack5: 6.3.12 => 6.3.12
    @storybook/react: 6.3.12 => 6.3.12
    @storybook/theming: 6.3.12 => 6.3.12

Upvotes: 8

Views: 6411

Answers (1)

user16435030
user16435030

Reputation:

Change your "module": "esnext" to "module": "commonjs".

However since you mentioned you have ts-node installed you might need to add:

"ts-node": {
  "compilerOptions": {
    "module": "commonjs"
  }
}

To your tsconfig.json instead, depending on how you're going to compile/run your code.

You can also specify them differently if you want to use esnext with tsc and commonjs with ts-node.

Also just make sure that your ts-node is actually using your tsconfig.json at all, I've struggled with issues like this and then end up realizing it's not even using my config at all.

Upvotes: 8

Related Questions