احسان
7 سال پیش توسط احسان مطرح شد
0 پاسخ

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

سلام به دوستان.
برنامه بدرستی کار میکنه و مشکلی هم نیست . اگر من بخوام فایل 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": "^۰.۲۸.۹"

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


ثبت پرسش جدید

به همدیگه کمک کنیم

به احسان کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام