Skip to content

Instantly share code, notes, and snippets.

@gtrufitt
Last active February 8, 2017 16:34
Show Gist options
  • Select an option

  • Save gtrufitt/f6ead5db0ba5702ebe2cc1cbba0c56c7 to your computer and use it in GitHub Desktop.

Select an option

Save gtrufitt/f6ead5db0ba5702ebe2cc1cbba0c56c7 to your computer and use it in GitHub Desktop.
Module build failed: ReferenceError: Unknown plugin "transform-class-properties"

Preact-render-to-string, Webpack and Babel

This is with webpack 2, preact, preact-compat

Getting this error:

ERROR in [path]/~/preact-render-to-string/dist/index.js
Module build failed: ReferenceError: Unknown plugin "transform-class-properties" specified in "[path]/node_modules/preact-render-to-string/.babelrc" at 0, attempted to resolve relative to "[path]/node_modules/preact-render-to-string"
    at [path]/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
  • The plugin isn't installed in my node_modules folder

Installing babel-plugin-transform-class-properties installs into my node_modules and removes the error but this is a plaster of the problem, right?

Ok, simple silly mistake: add exclude: /(node_modules)/, to webpack babel-loader:

{
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      use: 'babel-loader'    
},

But then, if you need preact-compat then webpack will go to the jsnext:main fields in the preact compat module but not transform it, you therefore need to tell webpack that the main field in the preact compat package.json it should go to is just main:

resolve: {
    extensions: ['.js', '.jsx', '.yml'],
    mainFields: ['main'],
    }

as per webpack/webpack#1979 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment