Question

我有一个包含CSS模块的项目配置。 css-modules由webpack配置，并且一切正常。

但是当我运行项目时，chrome控制台出现错误。我不知道怎么了我看不到任何不好的东西，因为样式已经包括在内并且可以正确显示。

当我添加import styles from './myStyles'

时，以下错误可见

我试图以dev和prod模式运行项目。之后，我在两种模式下都出错：产品：

Uncaught TypeError: (intermediate value).install is not a function
    at Module.<anonymous> (app.bundle.js:75)
    at n (app.bundle.js:1)
    at app.bundle.js:1
    at app.bundle.js:1

DEV：

index.js:34 Uncaught TypeError: _install__WEBPACK_IMPORTED_MODULE_6__.default.install is not a function
    at eval (index.js:34)
    at Module../src/index.js (app.bundle.js:5783)
    at __webpack_require__ (app.bundle.js:727)
    at fn (app.bundle.js:101)
    at eval (webpack:///multi_(:8081/webpack)-dev-server/client?:3:18)
    at Object.0 (app.bundle.js:5902)
    at __webpack_require__ (app.bundle.js:727)
    at app.bundle.js:794
    at app.bundle.js:797

我认为这是以不同方式显示的同一错误，但我不确定百分百。

以下是我在webpack中用于CSS加载程序的webpack配置：

webpack.prod

rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: true,
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader',
        ],
      },
      {
        test: /\.(jpe?g|png|gif)$/,
        use: [{
          /* inline if smaller than 10 KB, otherwise load as a file */
          loader: 'url-loader',
          options: {
            limit: 10000,
          },
        }],
      },
    ],

webpack.dev

rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: {
                mode: 'local',
                localIdentName: '[path][name]__[local]--[hash:base64:5]',
                context: path.resolve(__dirname, 'src'),
                hashPrefix: 'my-custom-hash',
              },
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      {
        test: /\.(jpe?g|png|gif)$/,
        use: [{
          /* inline if smaller than 10 KB, otherwise load as a file */
          loader: 'url-loader',
          options: {
            limit: 10000,
          },
        }],
      },
      {
        test: /\.(eot|svg|ttf|woff2?|otf)$/,
        use: 'file-loader',
      },
    ],

有人可以删除这个烦人的错误吗？

已解决：那是另一个问题，未与模块css连接。可以在app.bundlem中检查原因，其中列出了带有webpack给定标签的库。 WEBPACK_IMPORTED_MODULE_1__，WEBPACK_IMPORTED_MODULE_2__，WEBPACK_IMPORTED_MODULE_等。

在我的情况下，它是完全不同的库，问题与导入和默认导出有关。

具有模块_install__WEBPACK_IMPORTED_MODULE_6__的CSS加载程序

0 个答案: