احسان
4 سال پیش توسط احسان مطرح شد
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": "^۰.۲۸.۹"

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


reactjs
تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید

ثبت اولین پاسخ و دریافت ۵۰ امتیاز

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

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

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