起きたこと
下記を実行
$ npm run storybook
なんかでた
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
(((ここから同じ内容が7回ほど
babel/preset-env の設定で "loose" オプションを "false" にしましたが、@babel/plugin-proposal-private-property-in-object では "loose" モードオプションが "true" に設定されているので、これは使用されないでしょう。
"loose" オプションは @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods と @babel/plugin-proposal-private-property-in-object (これらが有効な場合) で同じでなければなりません。
解決自体は、["@babel/plugin-proposal-private-property-in-object", { "loose": true }]をいれることでできそうですね。
せっかくなので調査
@babel/preset-env
babel/preset-env は、ターゲットとなる環境でどの構文変換が必要なのか (オプションでブラウザのポリフィルも) を細かく管理することなく、最新の JavaScript を使用できるようにするスマートなプリセットです。これはあなたの生活を楽にし、JavaScript のバンドルも小さくします!
https://babeljs.io/docs/en/babel-preset-env
なるほど
loose option
このプリセット内のプラグインで "ルース" トランスフォームを許可するものがあれば、それを有効にする。
https://babeljs.io/docs/en/babel-preset-env#loose
...？
loose: false - 生成されたコードは、多くのチェックを経て、最も厳密で標準と互換性のあるものが得られます。
https://stackoverflow.com/questions/46445415/what-is-loose-mean-in-babeljs
↑は素晴らしいアンサーがついてます。実際の生成された例が載っている。ぜひみてください。
修正
.babelIrc
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"@babel/plugin-proposal-private-methods",
{
"loose": true
}
],
+ ["@babel/plugin-proposal-private-property-in-object",
+ {
+ "loose": true
+ }
+ ],
警告が出るか、試します。
$ npm run storybook
出なくなりました。
おまけ
構成
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook -o dist/storybook"
},
"dependencies": {
"@babel/core": "^7.20.5",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.10.16",
"@mui/material": "^5.10.16",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"babel-loader": "^9.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"_moduleAliases": {
"@assets": "src/assets"
},
"_moduleDirectories": [
"node_modules_custom"
],
"devDependencies": {
"@mdx-js/loader": "^2.0.0-rc.2",
"@storybook/addon-actions": "^6.5.14",
"@storybook/addon-essentials": "^6.5.14",
"@storybook/addon-interactions": "^6.5.14",
"@storybook/addon-links": "^6.5.14",
"@storybook/builder-webpack5": "^6.5.14",
"@storybook/cli": "^6.5.14",
"@storybook/manager-webpack5": "^6.5.14",
"@storybook/node-logger": "^6.5.14",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/react": "^6.5.14",
"@storybook/testing-library": "^0.0.13",
"@types/node": "^18.11.11",
"@types/webpack": "^5.28.0",
"babel-plugin-named-exports-order": "^0.0.2",
"prop-types": "^15.8.1",
"storybook-addon-material-ui": "^0.9.0-alpha.24",
"ts-node": "^10.9.1",
"typescript": "^4.9.3",
"webpack": "^5.75.0"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
},
"include": [
"src", "stories"
]
}
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.tsx",
mode: process.env.NODE_ENV || "development",
resolve: {
modulesDirectories: [path.join(__dirname, "node_modules")],
extensions: [".tsx", ".ts", ".js"],
},
devServer: {
static: {
directory: path.join(__dirname, "public"),
},
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.mdx$/,
exclude: /node_modules/,
use: ["babel-loader", "@mdx-js/loader"],
},
{
test: /\.(css|scss)$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
use: ["file-loader"],
},
],
},
};
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"ie": 11
},
"corejs": 3,
"useBuiltIns": "usage"
}
],
["@babel/preset-typescript"],
["@babel/preset-react"]
],
"plugins": [
"@babel/plugin-transform-shorthand-properties",
"@babel/plugin-transform-block-scoping",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"@babel/plugin-proposal-private-methods",
{
"loose": true
}
],
["@babel/plugin-proposal-private-property-in-object",
{
"loose": true
}
],
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-syntax-dynamic-import",
[
"@babel/plugin-proposal-object-rest-spread",
{
"loose": true,
"useBuiltIns": true
}
],
"@babel/plugin-transform-classes",
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-parameters",
"@babel/plugin-transform-destructuring",
"@babel/plugin-transform-spread",
"@babel/plugin-transform-for-of",
"babel-plugin-macros",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
[
"babel-plugin-polyfill-corejs3",
{
"method": "usage-global",
"absoluteImports": "core-js",
"version": "3.18.3"
}
]
]
}