Closed The-Code-Monkey closed 2 years ago
I found that rolling back to 8.5.13 works fine, but ideally I shouldn't have to rollback for a patch version
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
Ok I'll try the resolution tomorrow. It could be on storybooks end I'm not 100% sure either.
@tastypackets thanks for your help i bumped up to webpack5 within storybook and that fixed my issue nice catch.
@The-Code-Monkey how you did solve this issue? i have same exact issue, I don't understand the @tastypackets answers
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
}
}
I went to storybook.witb webpack 5
@sefirosweb did that fix it for you?
@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
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#L5202The 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;
yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 webpack@5 -D
.storybook/main.js
:module.exports = {
// ...
core: { builder: "webpack5" },
// ...
};
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