Skip to content

"Error: Encore.__esModule is not a recognized property or method." after upgrade to 0.15 #166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kapiwko opened this issue Sep 25, 2017 · 9 comments · Fixed by #167
Closed

Comments

@kapiwko
Copy link
Contributor

kapiwko commented Sep 25, 2017

I've upgraded @symfony/webpack-encore to 0.15 and now I got this error:

Running webpack ...

Error: Encore.__esModule is not a recognized property or method.

  • index.js:799 Object.get
    [crm]/[@symfony]/webpack-encore/index.js:799:27

  • webpack.config.babel.js:11 _interopRequireDefault
    /var/kamil/projects/deheus/crm/webpack.config.babel.js:11:57

  • webpack.config.babel.js:9 Object.
    /var/kamil/projects/deheus/crm/webpack.config.babel.js:9:23

  • module.js:624 Module._compile
    module.js:624:30

  • node.js:144 loader
    [crm]/[babel-register]/lib/node.js:144:5

  • node.js:154 Object.require.extensions.(anonymous function) [as .js]
    [crm]/[babel-register]/lib/node.js:154:7

  • module.js:545 Module.load
    module.js:545:32

  • module.js:508 tryModuleLoad
    module.js:508:12

  • module.js:500 Function.Module._load
    module.js:500:3

  • module.js:568 Module.require
    module.js:568:17

Problematic commit: d592481

@Lyrkan
Copy link
Collaborator

Lyrkan commented Sep 25, 2017

Hi @lewactwo,

Some questions to pinpoint the origin of this issue:

  • could you provide your webpack.config.babel.js file?
  • which command do you use to run Encore?
  • which versions of node and yarn are installed on your system?

Thanks

@kapiwko
Copy link
Contributor Author

kapiwko commented Sep 25, 2017

webpack.config.babel.js:

import Encore from '@symfony/webpack-encore';

Encore
    .setOutputPath('./public/assets/')
    .setPublicPath('/assets')
    .cleanupOutputBeforeBuild()
    .addEntry('app', './frontend/scripts/main.js')
    .addStyleEntry('global', './frontend/styles/main.scss')
    .createSharedEntry('vendor', [
        'jquery',
        'jquery-datetimepicker/jquery.datetimepicker.css'
    ])
    .enableSassLoader()
    .autoProvidejQuery()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning()
;


const config = Encore.getWebpackConfig();

Object.assign(config, {
    resolve: {
        alias: {
            'jquery-ui/ui/widget': './vendor/jquery.ui.widget.js',
        }
    }
});

export default config;

command:
make frontend which is node_modules/.bin/encore production

node -v
v8.5.0
yarn -v
1.0.2

@Lyrkan
Copy link
Collaborator

Lyrkan commented Sep 25, 2017

I'm a bit confused by the first line of your webpack.config.babel.js since Node doesn't support ES6 imports/exports yet... do you preprocess that file ?

Do you still have an error if you replace it by const Encore = require('@symfony/webpack-encore'); ?

@stof
Copy link
Member

stof commented Sep 25, 2017

hmm, I think this is related to the new error-catching proxy added in #150.
Such proxy is incompatible with the JS pattern of checking property existence by getting it and comparing with undefined (as this proxy is precisely throwing in this case.

@Lyrkan when the file is named webpack.config.babel.js rather than webpack.config.js, Webpack preprocesses the config file with Babel before loading it.

@weaverryan @Lyrkan I suggest whitelisting the properties accessed by the babel require wrapper (_interopRequireDefault).

@kapiwko
Copy link
Contributor Author

kapiwko commented Sep 25, 2017

I am using ES6 in webpack.config from year :) If I revert webpack-encore to 0.14 it works as expected.

How can I use ES6 in webpack.config.js?

Allow webpack.config.js to be written in ES6

@stof
Copy link
Member

stof commented Sep 25, 2017

@lewactwo yeah, as I said, this is related to a change we made to provide better error reporting. We should be able to fix it in the next version of Encore

@Lyrkan
Copy link
Collaborator

Lyrkan commented Sep 25, 2017

Didn't know that @stof, I'll check it out more in details later but yeah it looks like the following change is enough for a basic use case (no idea if there is something else we should worry about though):

const publicApiProxy = new Proxy(publicApi, {
    get: (target, prop) => {
        if (prop === '__esModule') {
            return target[prop];
        }

        // (...)
    }
});

@stof
Copy link
Member

stof commented Sep 25, 2017

Lyrkan added a commit to Lyrkan/webpack-encore that referenced this issue Sep 25, 2017
Lyrkan added a commit to Lyrkan/webpack-encore that referenced this issue Sep 25, 2017
weaverryan added a commit that referenced this issue Sep 25, 2017
This PR was merged into the master branch.

Discussion
----------

Fix "__esModule is not a recognized property" error

This PR removes the "__esModule is not a recognized property" error that is currently displayed after importing Encore using an ES6 import through a `webpack.config.babel.js` file (fixes #166).

Commits
-------

78ac47a Fix "__esModule is not a recognized property" error when using a webpack.config.babel.js file (#166)
@weaverryan
Copy link
Member

Fix merged and 0.15.1 tagged. I hope this helps! Thanks for the fix @Lyrkan and @lewactwo for the report!

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

Successfully merging a pull request may close this issue.

4 participants