search

TanStack / table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://tanstack.com/table
MIT License
24.56k stars 3.04k forks source link

8.5.15 Breaks storybook #4435

Closed The-Code-Monkey closed 1 year ago

The-Code-Monkey commented 1 year ago

Describe the bug

This error is thrown when running storybook, with 8.5.15

ERROR in /Users/iv0706/code/TechStack/node_modules/@tanstack/react-table/build/umd/index.production.js 21:1014 Module parse failed: Unexpected token (21:1014) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Your minimal, reproducible example

https://github.com/The-Code-Monkey/TechStack/tree/dev/packages/components

Steps to reproduce

https://github.com/The-Code-Monkey/TechStack/pull/779 This is the PR that fails.

I can't seem to reproduce in a clean install of storybook, but it seems to be failing on the ?? that were added in the new version.

Expected behavior

I would expect it to not break like it is when its only a patch change.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

MacOs latest, chrome latest.

react-table version

8.5.15

TypeScript version

4.8.4

Additional context

No response

Terms & Code of Conduct

The-Code-Monkey commented 1 year ago

I found that rolling back to 8.5.13 works fine, but ideally I shouldn't have to rollback for a patch version

tastypackets commented 1 year ago

If your on webpack v4 this might be related to the old acorn version which doesn't work with nullish coalescing operator.

Looks like in the lock file there is a reference to @storybook/builder-webpack4 with webpack v4 and acorn v6. https://github.com/The-Code-Monkey/TechStack/blob/dev/yarn.lock#L3437 https://github.com/The-Code-Monkey/TechStack/blob/dev/yarn.lock#L5202

The storybook version installed in your repo supports webpack v5, so it may be an easy switch if you don't need webpack v4.

Looks like this repo uses yarn, so if you want to test if this is what's causing the issue without making major changes you can first try setting a resolution in the root package.json file to something like:

  "resolutions": {
    "acorn": "8.8.0"
  }

As for why this changed between patches, I'm not 100% sure. If I had to guess maybe the defaults from browserlist finally shows full support for nullish coalescing operator. 🤔 https://github.com/TanStack/table/blob/main/babel.config.js#L6

The-Code-Monkey commented 1 year ago

Ok I'll try the resolution tomorrow. It could be on storybooks end I'm not 100% sure either.

The-Code-Monkey commented 1 year ago

@tastypackets thanks for your help i bumped up to webpack5 within storybook and that fixed my issue nice catch.

sefirosweb commented 1 year ago

@The-Code-Monkey how you did solve this issue? i have same exact issue, I don't understand the @tastypackets answers

image

There is my package.json:

{
  "name": "@sefirosweb/react-crud",
  "version": "2.7.6",
  "description": "Basic components for CRUD with react",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docker": "docker run --rm -it --name node-docker-storybook -v ~/.gitconfig:/etc/gitconfig -v ~/.gnupg:/home/node/.gnupg -v $PWD:/home/app -w /home/app -e \"NODE_OPTIONS=--openssl-legacy-provider\" -p 6006:6006 -u node node:17.2.0-bullseye /bin/bash",
    "storybook": "start-storybook -p 6006",
    "start": "npm run storybook",
    "build-storybook": "build-storybook",
    "build": "rm dist/ -rf && rollup -c",
    "update": "npx npm-check-updates"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sefirosweb/react-crud.git"
  },
  "author": "@Sefirosweb",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/sefirosweb/react-crud/issues"
  },
  "homepage": "https://github.com/sefirosweb/react-crud#readme",
  "devDependencies": {
    "@babel/core": "7.19.3",
    "@babel/preset-react": "7.18.6",
    "@faker-js/faker": "7.6.0",
    "@mdx-js/react": "^2.1.5",
    "@rollup/plugin-babel": "6.0.0",
    "@rollup/plugin-node-resolve": "15.0.0",
    "@rollup/plugin-typescript": "9.0.1",
    "@storybook/addon-actions": "6.5.12",
    "@storybook/addon-essentials": "6.5.12",
    "@storybook/addon-interactions": "6.5.12",
    "@storybook/addon-links": "6.5.12",
    "@storybook/builder-webpack4": "6.5.12",
    "@storybook/manager-webpack4": "6.5.12",
    "@storybook/preset-scss": "1.0.3",
    "@storybook/react": "6.5.12",
    "@storybook/testing-library": "0.0.13",
    "@tanstack/match-sorter-utils": "8.5.14",
    "@tanstack/react-table": "8.5.15",
    "@types/react": "18.0.21",
    "@types/react-draft-wysiwyg": "1.13.4",
    "@types/toastr": "2.1.40",
    "axios": "0.27.2",
    "axios-mock-adapter": "1.21.2",
    "babel-loader": "8.2.5",
    "bootstrap": "5.2.1",
    "css-loader": "5.2.7",
    "lodash": "4.17.21",
    "react": "18.2.0",
    "react-bootstrap": "2.5.0",
    "react-dom": "18.2.0",
    "react-draft-wysiwyg": "1.15.0",
    "react-icons": "4.6.0",
    "rollup": "3.2.3",
    "rollup-plugin-peer-deps-external": "2.2.4",
    "rollup-plugin-scss": "3.0.0",
    "rollup-plugin-terser": "7.0.2",
    "sass": "1.55.0",
    "sass-loader": "10.1.1",
    "style-loader": "2.0.0",
    "toastr": "2.1.4",
    "typescript": "4.8.4"
  },
  "peerDependencies": {
    "@tanstack/match-sorter-utils": "8.5.14",
    "@tanstack/react-table": "8.5.15",
    "axios": "0.27.2",
    "bootstrap": "5.2.1",
    "react": "18.2.0",
    "react-bootstrap": "2.5.0",
    "react-dom": "18.2.0",
    "react-draft-wysiwyg": "1.15.0",
    "react-icons": "^4.6.0",
    "toastr": "2.1.4",
    "lodash": "4.17.21"
  },
  "dependencies": {
    "@tanstack/match-sorter-utils": "8.5.14",
    "@tanstack/react-table": "8.5.15",
    "axios": "0.27.2",
    "bootstrap": "5.2.1",
    "react": "18.2.0",
    "react-bootstrap": "2.5.0",
    "react-dom": "18.2.0",
    "react-draft-wysiwyg": "1.15.0",
    "react-icons": "^4.6.0",
    "toastr": "2.1.4",
    "lodash": "4.17.21"
  }
}

And the main.cjs:

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-scss"
  ],
  "framework": "@storybook/react",
  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
  typescript: {
    check: true, // type-check stories during Storybook build
  }
}
The-Code-Monkey commented 1 year ago

I went to storybook.witb webpack 5

The-Code-Monkey commented 1 year ago

@sefirosweb did that fix it for you?

sefirosweb commented 1 year ago

@The-Code-Monkey no.. if i update to webpack i have more troubles, I'm trying to solve but is a version break for me

3imed-jaberi commented 1 year ago

If your on webpack v4 this might be related to the old acorn version which doesn't work with nullish coalescing operator.

Looks like in the lock file there is a reference to @storybook/builder-webpack4 with webpack v4 and acorn v6. https://github.com/The-Code-Monkey/TechStack/blob/dev/yarn.lock#L3437 https://github.com/The-Code-Monkey/TechStack/blob/dev/yarn.lock#L5202

The storybook version installed in your repo supports webpack v5, so it may be an easy switch if you don't need webpack v4.

Looks like this repo uses yarn, so if you want to test if this is what's causing the issue without making major changes you can first try setting a resolution in the root package.json file to something like:

  "resolutions": {
    "acorn": "8.8.0"
  }

As for why this changed between patches, I'm not 100% sure. If I had to guess maybe the defaults from browserlist finally shows full support for nullish coalescing operator. 🤔 https://github.com/TanStack/table/blob/main/babel.config.js#L6

Totally agree with @tastypackets, but I like to mention if you use the resolutions you will break the hot-reload feature and some other features. I see the best solution to solve the problem by playing on the versioning regardless of upgrading the webpack to v5 or downgrading the react-table version.

If someone look to upgrade webpack to v5, you need to follow these 2 steps;

  1. Install these dependencies:
yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 webpack@5 -D
  1. Update your .storybook/main.js:
module.exports = {
  // ...
  core: { builder: "webpack5" },
  // ...
};