ERROR in ./index.js Module not found: Error: Can't resolve 'postcss-loader'

[pbastowski]

Do you want to request a feature or report a bug?
bug

What is the current behavior?

poi build

results in

● Poi █████████████████████████ compiling (0%)  
 

(node:27702) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
TypeError: compiler.resolvers.normal.resolve is not a function
✔ success Poi compiled in 11s 811ms
Entrypoint client = vendors~client.b68f4de7.js vendors~client.b68f4de7.js.map client.c43c3eb8.js client.c43c3eb8.js.map
Entrypoint user = user.046d7c37.js user.046d7c37.js.map
Entrypoint survey = survey.f1965042.js survey.f1965042.js.map
Entrypoint form = form.6b9e70c9.js form.6b9e70c9.js.map
Entrypoint maintenance = maintenance.f44a4c98.js maintenance.f44a4c98.js.map

ERROR in ./index.js
Module not found: Error: Can't resolve 'postcss-loader' in '/Users/paul/dev/kpmg/SOFY/client'
 @ ./index.js 94:0-43
 @ multi ./index.js

...

ERROR in ./index.js
Module not found: Error: Can't resolve 'postcss-loader' in '/Users/paul/dev/kpmg/SOFY/client'
 @ ./index.js 103:0-46
 @ multi ./index.js

ERROR in ./index.js
Module not found: Error: Can't resolve 'postcss-loader' in '/Users/paul/dev/kpmg/SOFY/client'
 @ ./index.js 112:0-49
 @ multi ./index.js

ERROR in ./src/app/admin/systemVariable/systemVariable.route.js
Module not found: Error: Can't resolve 'vue-loader' in '/Users/paul/dev/kpmg/SOFY/client'
 @ ./src/app/admin/systemVariable/systemVariable.route.js 1:0-58 5:93-111
 @ ./index.js
 @ multi ./index.js

Please note that the post-css error message appears many times over, I just provided a sample

If the current behavior is a bug, please provide the steps to reproduce.

Here is the poi.config.js file I use:

const ConcatPlugin = require('webpack-concat-plugin')
const EventHooksPlugin = require('event-hooks-webpack-plugin');

const bc = require('./build.config')
const updateAuthorizations = require('./create-data-authorizations')

function prefix(a) {
    return a.map(x => './' + x)
}

function vendorAssets(a, to, flatten = true) {
    return a.map(x => ({ from: x, to, context: '', flatten }))
}

const production = process.env.NODE_ENV === 'production'


const entry = {
    client:      'index.js',
    user:        'index-user.js',
    survey:      'index-survey.js',
    form:        'index-form.js',
    maintenance: 'index-maintenance.js',
}


module.exports = {
    // Minimize code only when building for production
    minimize:  production,

    // The target folder for the build
    dist: 'build',

    // For a production build we specify the entry chunk here
    entry: production ? entry : undefined,

    // ... and then we configure the emited index files.
    html: production ? Object.keys(entry).map(e => ({
        filename: entry[e].replace('.js', '.html'),
        chunks:   [e, 'vendor', 'manifest'],
        title:    'SOFY',
    })) : undefined,


    devServer: {
        port:  4000,
        proxy: {
            '/api/*': {
                target: 'http://localhost:8080',
                secure: false
            }
        }
    },

    // ----------- Copy Files without processing
    copy: [
              { from: 'assets/**/!(*.js)', to: './', context: './src/' },
              {
                  from: './vendor/angular-surveys/dist/i18n/en/angular-surveys.json',
                  to:   './assets/json/vendor/angular-surveys/dist/i18n/en/',
              },
              { from: 'documentation/**/*', to: './' },
          ]
          .concat(vendorAssets(bc.vendor_files.assets, './assets/images/'))
          .concat(vendorAssets(bc.vendor_files.assetsForSurvey, './assets/'))
          .concat(vendorAssets(bc.vendor_files.fonts, './fonts/'))
    ,

    webpack(config) {

        // ----------- Plugins

        // Concatenate small files into big files
        config.plugins.push(
            new ConcatPlugin({
                sourceMap:     false,
                // uglify:        true,
                name:          'vendor-js',
                fileName:      '[name].[hash:8].js',
                filesToConcat: [
                    prefix(bc.vendor_files.js),
                    './src/assets/**/!(*.spec).js',
                ],
            }),

            // When webpack is done bundling we want to
            // update the authorizations file.
            new EventHooksPlugin({
                'done': () => {
                    production && updateAuthorizations()
                }
            })
        )


        // ----------- Loaders

        config.module.rules.push(
            {
                test:    [/\.(css|js|tpl\.html)/],
                enforce: 'pre',
                loader:  "import-glob",
            },

            // Pre-load all .tpl.html files into the AngularJS TemplateCache.
            {
                test:   /\.tpl\.html$/,
                loader: 'angular-templatecache-loader-2?relativeTo=src/app/',
            }
        )

        return config
    }
}

// When building for production we annotate injected angular
// services and also minimize the code. Without the annotations
// some services would fail to lead.
if (production) {
    module.exports.babel = {
        "presets": [
            "babel-preset-poi"
        ],
        "plugins": [
            "angularjs-annotate"
        ]
    }
}

What is the expected behavior?

When using 9.x version of poi, I get a successful build. I expect that version 10.x will produce the same results, but currently it fails with the error messages above.

Now, I'm not sure if this is actually a build failure or just some warnings, but is sure looks scary to see all those post-css errors.

Update: just confirmed that this is a hard failure. No build folder is created at all.

If this is a feature request, what is the motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, Poi version and Operating System.

• Node 9.9
• MacOS High Sierra
• Chrome 65

[egoist]

Fixed in latest version.

[pbastowski]

Thanks for your help.

I still get the following errors, just in a different colour now:

🚨 Failed to compile with 139 errors

Cannot find module "postcss-loader" in "/Users/paul/dev/kpmg/SOFY/client"!
You may run yarn add postcss-loader to install missing dependencies.

...

Cannot find module "vue-loader" in "/Users/paul/dev/kpmg/SOFY/client"!
You may run yarn add vue-loader to install missing dependencies.

62 authorizations updated successfully.

✨  Done in 43.20s.

And this is what I mean by different coulour:

Before the errors were mostly red.

[pbastowski]

To test if the error was isolated to my poi.config.js, I created a simple App.vue and index.js. When I try to run it with poi I got the same vue-loader error as above.

After reverting to 9.6.13 everything runs as expected with no changes to the code or config.

[egoist]

@pbastowski I've tested it with https://gist.github.com/egoist/5e2f5ee0364b4bfbe144bb4e6cd660d4 and it works fine for me

[pbastowski]

It still doesn’t work for me. I will stick with 9.6.13 for now, because it works.
Thanks for your help.