{"action":"created","issue":{"url":"https://api.github.com/repos/storybooks/storybook/issues/4943","repository_url":"https://api.github.com/repos/storybooks/storybook","labels_url":"https://api.github.com/repos/storybooks/storybook/issues/4943/labels{/name}","comments_url":"https://api.github.com/repos/storybooks/storybook/issues/4943/comments","events_url":"https://api.github.com/repos/storybooks/storybook/issues/4943/events","html_url":"https://github.com/storybooks/storybook/issues/4943","id":388252417,"node_id":"MDU6SXNzdWUzODgyNTI0MTc=","number":4943,"title":"postcss-loader cause errors with react-calendar module","user":{"login":"esbenvb","id":426051,"node_id":"MDQ6VXNlcjQyNjA1MQ==","avatar_url":"https://avatars3.githubusercontent.com/u/426051?v=4","gravatar_id":"","url":"https://api.github.com/users/esbenvb","html_url":"https://github.com/esbenvb","followers_url":"https://api.github.com/users/esbenvb/followers","following_url":"https://api.github.com/users/esbenvb/following{/other_user}","gists_url":"https://api.github.com/users/esbenvb/gists{/gist_id}","starred_url":"https://api.github.com/users/esbenvb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/esbenvb/subscriptions","organizations_url":"https://api.github.com/users/esbenvb/orgs","repos_url":"https://api.github.com/users/esbenvb/repos","events_url":"https://api.github.com/users/esbenvb/events{/privacy}","received_events_url":"https://api.github.com/users/esbenvb/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-12-06T15:01:40Z","updated_at":"2018-12-10T09:52:01Z","closed_at":"2018-12-10T09:52:01Z","author_association":"NONE","body":"**Describe the bug**\r\nI am trying to introduce storybook on a web app which use typescript and scss.\r\n\r\n\r\n**To Reproduce**\r\nWhen I use the sample story (with two buttons), it works fine. However, when I try mounting one of our existing components in the story, I get the following compile error:\r\n\r\n```\r\n\r\nERROR in ./node_modules/react-calendar/dist/Calendar.css (./node_modules/@storybook/core/node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader!./node_modules/react-calendar/dist/Calendar.css)\r\nModule build failed (from ./node_modules/postcss-loader/src/index.js):\r\nSyntaxError\r\n\r\n(2:1) Unknown word\r\n\r\n  1 |\r\n> 2 | var content = require(\"!!../../css-loader/index.js!./Calendar.css\");\r\n    | ^\r\n  3 |\r\n  4 | if(typeof content === 'string') content = [[module.id, content, '']];\r\n\r\n @ ./node_modules/react-calendar/dist/Calendar.css 2:14-203 21:1-42:3 22:19-208\r\n @ ./node_modules/react-calendar/dist/entry.js\r\n @ ./src/components/yyyyyy/components/zzzDate/zzzDateDesktop.tsx\r\n @ ./src/components/yyyyyy/components/zzzDate/zzzDate.tsx\r\n @ ./src/components/yyyyyy/index.tsx\r\n @ ./src/views/xxxxxxxxxxxxxxx/components/Tax.tsx\r\n @ ./src/views/xxxxxxxxxxxxxxx/components/Laundry.stories.tsx\r\n @ ./.storybook/config.ts\r\n```\r\n\r\n**Code snippets**\r\nthe `webpack.config` of the react project:\r\n\r\n```js\r\nconst merge = require(\"webpack-merge\");\r\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\r\nconst UglifyJsPlugin = require(\"uglifyjs-webpack-plugin\");\r\nconst Dotenv = require(\"dotenv-webpack\");\r\nconst PACKAGE = require(\"./package.json\");\r\nconst StyleLintPlugin = require(\"stylelint-webpack-plugin\");\r\nconst BundleAnalyzerPlugin = require(\"webpack-bundle-analyzer\").BundleAnalyzerPlugin;\r\nconst path = require(\"path\");\r\n\r\nconst commonConfig = {\r\n    entry: \"./src/index.tsx\",\r\n    output: {\r\n        filename: PACKAGE.name + \".js\",\r\n        path: __dirname + \"/build/dist\"\r\n    },\r\n    resolve: {\r\n        extensions: [\".ts\", \".tsx\", \".js\", \".json\", \".scss\"]\r\n    },\r\n    module: {\r\n        rules: [\r\n            { test: /\\.tsx?$/, use: [\"awesome-typescript-loader\"] },\r\n            { enforce: \"pre\", test: /\\.js$/, use: [\"source-map-loader\"] },\r\n            { test: /\\.css$/, use: [\"style-loader\", \"css-loader\"] },\r\n            {\r\n                test: /\\.scss$/,\r\n                include: [path.resolve(__dirname, \"src/styles\")],\r\n                exclude: [path.resolve(__dirname, \"src/components\"), path.resolve(__dirname, \"src/views\")],\r\n                use: [\"style-loader\", \"css-loader\", \"sass-loader\"]\r\n            },\r\n            {\r\n                test: /\\.scss$/,\r\n                exclude: [path.resolve(__dirname, \"src/styles\")],\r\n                use: [\"style-loader\", \"css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]\", \"sass-loader\"]\r\n            },\r\n            {\r\n                test: /\\.(jpg|png|gif|svg)$/i,\r\n                use: [\r\n                    \"url-loader?limit=4096&hash=sha512&digest=hex&name=assets/[name]-[hash].[ext]\",\r\n                    \"image-webpack-loader?disable&optipng.optimizationLevel=7&gifsicle.interlaced=false\"\r\n                ]\r\n            }\r\n        ]\r\n    },\r\n    plugins: [new HtmlWebpackPlugin({ template: \"./src/index.html\" }), new Dotenv()],\r\n    externals: {\r\n        react: \"React\",\r\n        \"react-dom\": \"ReactDOM\"\r\n    },\r\n    optimization: {\r\n        minimizer: [new UglifyJsPlugin()],\r\n        splitChunks: {\r\n            chunks: \"all\",\r\n            cacheGroups: {\r\n                vendor: {\r\n                    test: /[\\\\/]node_modules[\\\\/]/,\r\n                    priority: 2,\r\n                    name: \"vendor\",\r\n                    enforce: true,\r\n                    chunks: \"all\"\r\n                },\r\n                shared: {\r\n                    test: /shared[\\\\/]src[\\\\/]components/,\r\n                    priority: 3,\r\n                    name: \"shared\",\r\n                    enforce: true,\r\n                    chunks: \"all\"\r\n                }\r\n            }\r\n        }\r\n    }\r\n};\r\n\r\nmodule.exports = [\r\n    merge(commonConfig, {\r\n        name: \"serve\",\r\n        mode: \"development\",\r\n        devtool: \"source-map\",\r\n        output: {\r\n            publicPath: \"/\"\r\n        },\r\n        plugins: [\r\n            new StyleLintPlugin(),\r\n            new BundleAnalyzerPlugin({\r\n                openAnalyzer: false\r\n            })\r\n        ],\r\n        devServer: {\r\n            port: 9000,\r\n            historyApiFallback: true,\r\n            proxy: {\r\n                \"/api\": {\r\n                    target: \"http://xxxxxx\",\r\n                    pathRewrite: {\r\n                        \"/api\": \"\"\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }),\r\n    merge(commonConfig, {\r\n        name: \"build\",\r\n        mode: \"production\",\r\n        devtool: \"source-map\"\r\n    })\r\n];\r\n```\r\n\r\nAnd the `webpack.config.js` of storybook\r\n```js\r\n// you can use this file to add your custom webpack plugins, loaders and anything you like.\r\n// This is just the basic way to add additional webpack configurations.\r\n// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config\r\n\r\n// IMPORTANT\r\n// When you add this file, we won't add the default configurations which is similar\r\n// to \"React Create App\". This only has babel loader to load JavaScript.\r\nconst path = require(\"path\");\r\n\r\nmodule.exports = (baseConfig, env, config) => {\r\n    config.module.rules.push(\r\n        { test: /\\.tsx?$/, use: [\"awesome-typescript-loader\"] },\r\n        { enforce: \"pre\", test: /\\.js$/, use: [\"source-map-loader\"] },\r\n        { test: /\\.css$/, use: [\"style-loader\", \"css-loader\"] },\r\n        {\r\n            test: /\\.scss$/,\r\n            include: [path.resolve(__dirname, \"src/styles\")],\r\n            exclude: [path.resolve(__dirname, \"src/components\"), path.resolve(__dirname, \"src/views\")],\r\n            use: [\"style-loader\", \"css-loader\", \"sass-loader\"]\r\n        },\r\n        {\r\n            test: /\\.scss$/,\r\n            exclude: [path.resolve(__dirname, \"src/styles\")],\r\n            use: [\"style-loader\", \"css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]\", \"sass-loader\"]\r\n        },\r\n        {\r\n            test: /\\.(jpg|png|gif|svg)$/i,\r\n            use: [\r\n                \"url-loader?limit=4096&hash=sha512&digest=hex&name=assets/[name]-[hash].[ext]\",\r\n                \"image-webpack-loader?disable&optipng.optimizationLevel=7&gifsicle.interlaced=false\"\r\n            ]\r\n        }\r\n    );\r\n    config.resolve.extensions.push(\".ts\", \".tsx\", \".js\", \".json\", \".scss\");\r\n    return config;\r\n};\r\n```\r\n\r\n**System:**\r\n - OS: Windows 7\r\n - Device: Dell laptop\r\n - Browser: Chrome\r\n - Framework:  React 16.5.2,\r\n - Version: 4.0.12\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/storybooks/storybook/issues/comments/445754943","html_url":"https://github.com/storybooks/storybook/issues/4943#issuecomment-445754943","issue_url":"https://api.github.com/repos/storybooks/storybook/issues/4943","id":445754943,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NTc1NDk0Mw==","user":{"login":"esbenvb","id":426051,"node_id":"MDQ6VXNlcjQyNjA1MQ==","avatar_url":"https://avatars3.githubusercontent.com/u/426051?v=4","gravatar_id":"","url":"https://api.github.com/users/esbenvb","html_url":"https://github.com/esbenvb","followers_url":"https://api.github.com/users/esbenvb/followers","following_url":"https://api.github.com/users/esbenvb/following{/other_user}","gists_url":"https://api.github.com/users/esbenvb/gists{/gist_id}","starred_url":"https://api.github.com/users/esbenvb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/esbenvb/subscriptions","organizations_url":"https://api.github.com/users/esbenvb/orgs","repos_url":"https://api.github.com/users/esbenvb/repos","events_url":"https://api.github.com/users/esbenvb/events{/privacy}","received_events_url":"https://api.github.com/users/esbenvb/received_events","type":"User","site_admin":false},"created_at":"2018-12-10T09:52:01Z","updated_at":"2018-12-10T09:52:01Z","author_association":"NONE","body":"Thanks, that solved the problem!"}}
{"actor":{"display_login":"esbenvb"}}