Compatibility issue with ts-loader, webpack 5, type module

[cseas]

Describe the bug Unable to run storybook after using npx sb init --builder webpack5

ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (52:0)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

To Reproduce

Please create a reproduction by running npx sb@next repro and following the instructions.

Above command doesn't work. I get the below error: /bin/sh: 1: yarn: not found Failed probably because I don't have yarn on my system (Ubuntu 20.04 LTS). But the repro's here: https://github.com/hazel-ui/hazel-ui/tree/feature/webpack Just run npm i followed by npm run storybook. I didn't change anything storybook related after running the above sb init command.

System

System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
  Binaries:
    Node: 14.17.0 - /usr/bin/node
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 88.0.1
  npmPackages:
    @storybook/addon-actions: ^6.2.9 => 6.2.9 
    @storybook/addon-essentials: ^6.2.9 => 6.2.9 
    @storybook/addon-links: ^6.2.9 => 6.2.9 
    @storybook/builder-webpack5: ^6.2.9 => 6.2.9 
    @storybook/react: ^6.2.9 => 6.2.9

Additional context I'm trying to do a fresh install of storybook in a React project that uses Webpack 5 and ts-loader. Also using type: "module" in package.json which led to an initial error I fixed by doing this.

My best guess is that there's some problem with storybook wanting to use babel-loader but my project doesn't use babel at all, the whole transpilation is entirely handled by ts-loader as recommended in webpack docs. So as a preference, it'd be nice if Storybook can just use the webpack config instead of installing the additional babel packages.

[shilman]

Storybook uses babel to process typescript files. There have been requests to support ts-loader as well, but it's not on our roadmap.

[cseas]

When I remove type: "module" from package.json, storybook runs successfully. So the above error might be very much related to #11587 even though it's a different console error.

I figured out a workaround. Storybook won't work with type: "module" in package.json so that has to be removed. But es6 import/export syntax can still be used with the .mjs extension so all I had to do was rename webpack.config.js to webpack.config.mjs and everything works.

On a side note, I recently learned that babel-loader doesn't perform any type checks. At work, we have observed that storybook often fails to report type errors that are later caught by the bundler when we start using the components developed individually with storybook. This might be another reason to consider using ts-loader for typescript instead.

[shilman]

@cseas Thanks for the heads up! We have an opt-in type checking option using fork-ts-checker-webpack-plugin https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration

[fayez-nazzal]

In an nx monorepo I had "type": "commonjs" in the corresponding package.json file, removed the property and it worked.

[cbroomemktw]

I'm still seeing this issue with storybook 6.5 and a create-react-app typescript project.

ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (3:0)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js

I tried the workaround from @shilman but am still getting the error. I've tried a lot of workarounds at this point and nothing quite gets around the problem.

Here's .storybook/main.cjs:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  "typescript": {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
}

and the storybook versions from package.json:

    "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/node-logger": "^6.5.16",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.16",
    "@storybook/testing-library": "^0.0.13",

Any help would be appreciated. I'm stuck with the CRA stuff for the time being unfortunately.

[shilman]

@cbroomemktw does upgrading to the latest prerelease solve it?

Migration guide: https://storybook.js.org/migration-guides/7.0

[cbroomemktw]

@shilman It did! At least installing everything from scratch via npx sb@next init thanks!