Skip to content
This repository has been archived by the owner on Jun 8, 2019. It is now read-only.

Error while using with webpack #25

Closed
nmaves opened this issue Dec 19, 2015 · 6 comments
Closed

Error while using with webpack #25

nmaves opened this issue Dec 19, 2015 · 6 comments

Comments

@nmaves
Copy link

nmaves commented Dec 19, 2015

When I run webpack I get the following error.

ERROR in ./app/components/Home.js
Module build failed: SyntaxError: /Users/nmaves/projects/maves-software/intensity/app/components/Home.js: [React Intl] Message must have a `description`.
  2 | import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl'
  3 | 
> 4 | const messages = defineMessages({
    |                  ^
  5 |   greeting: {
  6 |       id: 'greeting',
  7 |       description: 'Welcome greeting to the user',

Here is my webpack.config.js

module.exports = {
    entry: "./app/App.js",
    output: {
        filename: "public/bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['react-intl']
                }
            }
        ]
    }
}

Here is my test component.

import React from 'react'
import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl'

const messages = defineMessages({
    greeting: {
        id: 'greeting',
        description: 'Welcome greeting to the user',
        defaultMessage: 'Hello, {name}! How are you today?'
    }
});

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <div>
                <FormattedMessage {...messages.greeting} />
            </div>
        )
    }
}

export default Home;
@emmenko
Copy link

emmenko commented Dec 19, 2015

I see you are getting the same error as I reported here #26

@nmaves
Copy link
Author

nmaves commented Dec 21, 2015

Do you have a way around this bug? Is there a setup with older versions that I could use?

@ericf
Copy link
Collaborator

ericf commented Dec 22, 2015

The other time this issue was reported the person was running the react-intl Babel plugin multiple times. You should investigate whether multiple Babel config are being merged together, causing two runs of babel-plugin-react-intl.

The Webpack Babel Loader likely merges your .babelrc with what's in your webpack.config.js. If you want something custom in your Webpack build you should make sure to set it to not use the .babelrc file as well.

@emmenko
Copy link

emmenko commented Dec 23, 2015

@ericf Hmm, I'm not using webpack for this task and I don't think I'm running the plugin multiple times. Maybe you can have a look at yourself (the babel-6 branch)?

I have one .babelrc file
https://github.com/emmenko/redux-react-router-async-example/blob/babel-6/.babelrc

And this is the task I'm running
https://github.com/emmenko/redux-react-router-async-example/blob/babel-6/package.json#L17

Do you see anything strange there? Thanks.

@ericf
Copy link
Collaborator

ericf commented Dec 23, 2015

You're running the plugin twice. It's loaded via .babelrc and in the command line --plugins option.

@emmenko
Copy link

emmenko commented Dec 24, 2015

Ooh I see, I thought the plugins option was something else. Thanks! :)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants