Webpack 2 - 无法在字符串上创建属性“映射”

Posted 2023-02-22

【中文标题】Webpack 2 - 无法在字符串上创建属性“映射”

【英文标题】：Webpack 2 - Cannot create property 'mappings' on string

【发布时间】：2017-07-30 14:34:59

【问题描述】：

从有效的 Webpack v1 配置迁移到 Webpack 2。但在尝试运行构建时遇到错误：

 ERROR in ./src/index.jsx
 Module build failed: TypeError: /home/pierce/Projects/my-js-app/src/index.jsx: Cannot create property 'mappings' on string 

我已更新我的加载器以匹配新格式：

module: 
  rules: [
    
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    ,
    
      test: /\.(jpg|png)$/,
      loader: 'file-loader',
      query: 
        name: '[path][name].[hash].[ext]',
      ,
    ,
     
      test: /\.css$/, 
      loader: "style-loader!css-loader" 
    ,
    
      test: /\.scss$/,
      use: [
         
          loader: 'style-loader' 
        ,
         
          loader: 'css-loader'
        , 
         
          loader: 'sass-loader',
          options:  sourceMap: true  
        
      ]
    ,
    
      test: /\.(woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?/, 
      loader: 'url-loader',
      query:  
        limit: 100000
      
    ,
     
      test: /\.icon-svg$/, 
      use: [loader:'babel-loader', loader: 'svg-react-loader'] 
    ,
    // Bootstrap 3
     
      test: /bootstrap-sass\/assets\/javascripts\//, 
      loader: 'imports-loader?jQuery=jquery' 
    
  ]
,

就好像某些东西没有像以前那样编译，因此导致了 TypeError。

【参考方案1】：

原来我是 babelifing 两次。

如果您还将webpack.config.js 拆分为不同环境的单独文件，请确保webpack.dev.config.js 不包含babel-loader 条目（如果您的webpack.base.config.js 包含）。

否则，如果您第二次使用加载程序两次将导致错误。这不是 Webpack 2 错误，而是 webpack split-configs-and-missing-a-small-thing 错误

【讨论】：

简直完美。

【参考方案2】：

在我的编译中遇到了类似的问题。发现我对 .js 和 .jsx 都使用了 babel loader。

删除 .jsx 并按预期工作。

我的webpack.config.js 的 sn-p 看起来像这样。

    test: /\.js$/,
    exclude: [/(node_modules)/],
    use: [
        
            loader: 'react-hot-loader'
        ,
        
            loader: 'babel-loader',
            options: 
                presets: ['react', 'es2015', 'stage-0'],
                plugins: [
                    'transform-class-properties',
                    'transform-decorators-legacy'
                ]
           
        
    ]

【参考方案3】：

如果其他人遇到同样的问题，我必须从加载器中删除以下内容才能正常工作

     
       test: /\.jsx?$/,
       use: ['react-hot-loader/webpack']
     

【参考方案4】：

就我而言，当我从 webpack 中删除 devtool: 'inline-source-map' 时它有所帮助