description

دریافت ارور هنگام import کردن فایل css در react and webpack

- 7 ماه پیش
احسان ( 231 تجربه )
7 ماه پیش

سلام به دوستان.
برنامه بدرستی کار میکنه و مشکلی هم نیست . اگر من بخوام فایل css رو هم از node_modules و هم از component هام ایمپورت کنم با ارور مواجه میشم.

webpack:///./node_modules/style-loader/lib/addStyles.js?:۲۳
        return window && document && document.all && !window.atob;
        ^

ReferenceError: window is not defined
    at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:۲۳:۲)
    at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:۱۲:۴۶)
    at module.exports (webpack:///./node_modules/style-loader/lib/addStyles.js?:۵۷:۴۶)
    at eval (webpack:///./public/testStyle.css?:۱۲:۱۳۴)
    at Object../public/testStyle.css (/media/ehsan/A۲۶۸۷۷۲۳۶۸۷۶F۵۷F/۰۱-MyDriver/myProjects/۰۲-develop/۱۳-news-ssr/build/bundle.js:۱۹۳:۱)
    at __webpack_require__ (/media/ehsan/A۲۶۸۷۷۲۳۶۸۷۶F۵۷F/۰۱-MyDriver/myProjects/۰۲-develop/۱۳-news-ssr/build/bundle.js:۲۳:۳۰)
    at eval (webpack:///./src/client/pages/HomeContainer.js?:۳۱:۱)
    at Object../src/client/pages/HomeContainer.js (/media/ehsan/A۲۶۸۷۷۲۳۶۸۷۶F۵۷F/۰۱-MyDriver/myProjects/۰۲-develop/۱۳-news-ssr/build/bundle.js:۵۴۱:۱)
    at __webpack_require__ (/media/ehsan/A۲۶۸۷۷۲۳۶۸۷۶F۵۷F/۰۱-MyDriver/myProjects/۰۲-develop/۱۳-news-ssr/build/bundle.js:۲۳:۳۰)
    at eval (webpack:///./src/client/Routes.js?:۱۷:۲۲)
[nodemon] app crashed - waiting for file changes before starting...

فایل های webpack پروژه هم سه فایل هستن که جزئیات فایل مشترک را در زیر میآورم :

'use strict';
// const isInProduction = process.env.NODE_ENV === 'production';
module.exports = {
    context: __dirname,
    module: {
        rules: [
            {
                test: /.(pdf|ico|jpg|eot|otf|woff۲|woff|ttf|mp۴|webm)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'file-loader',
                    query: {name: '[name].[ext]'},
                },
            },
            {
                test: /.js$/,
                exclude: /node-modules/,
                loader: 'babel-loader'
            },{
                test: /.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {modules: true, sourceMap: true}
                    }
                ]
            }
        ]
    }
};

و تنظیمات فایل .babelrc :

{
  "presets": [
    ["es۲۰۱۵", {"modules": false}],
    ["env", {
        "targets": {
          "browsers": ["last ۲ versions"],
          "node":"current"
        }
      }
    ],["react"],"stage-۰"
  ]
}

نکته : پروژه بصورت react universal هستش . شاید این مورد اثر گذاشته باشه.

جزئیات پکیج ها :

"webpack": "^۳.۱۱.۰"
"style-loader": "^۰.۱۸.۲"
"css-loader": "^۰.۲۸.۹"

از راهنمایی دوستان ممنون هستم

برای ارسال پاسخ باید وارد سایت شوید