Webpack 2 - Cannot create property 'mappings' on string

问题

Migrating from a working Webpack v1 config to Webpack 2. But running into an error while trying to run the build:

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

I have updated my loaders to match the new format:

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' 
    }
  ]
},

It's as if something is not being compiled the way it was before, therefore causing a TypeError.

回答1:

Turns out I was babelifing twice.

If you're also splitting your webpack.config.js into separate files for your different environments, be sure that webpack.dev.config.js does not include a babel-loader entry if your webpack.base.config.js does.

Otherwise, if you use the loader twice the 2nd time around will cause an error. This wasn't a Webpack 2 error but a webpack splitting-configs-and-missing-a-small-thing error

回答2:

Encountered a similar issue in my compilation. Found out that I was using babel loader for .js and .jsx both.

Removed .jsx and its working as expected.

A snippet of my webpack.config.js looks like this.

{
    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:

In case someone else is having the same issue, I had to remove the following from loader for it to work

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

回答4:

In my case it helped when I removed devtool: 'inline-source-map' from webpack

来源：https://stackoverflow.com/questions/42698214/webpack-2-cannot-create-property-mappings-on-string

标签

reactjs

Webpack

webpack-2