webpack2 'Can't resolve assets/img/coin.png' in 'project'

Question

I'm trying to import an image dynamically with a require statement, but even before that, regular imports like so don't work:

import 'assets/img/coin.png'

The actual use case is:

require(assets/img/${source}.${ext}/);

errors from the import

ERROR in ./app/components/Img/index.js
Module not found: Error: Can't resolve 'assets/img/coin.png' in '/Users/rublev/dev/company/support/app/components/Img'
 @ ./app/components/Img/index.js 36:0-33
 @ ./app/components/SectionList/index.js
 @ ./app/pages/Support/index.js
 @ ./app/views.js
 @ ./app/app.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./app/app.js

dir structure

.
├── app
│   ├── app.js
│   ├── assets
│   │   ├── img        <- where i want to import images from
│   ├── components
│   │   ├── Footer
│   │   ├── Img        <- component im importing images into
│   │   ├── List
│   │   ├── Loader
│   │   ├── Nav
│   │   ├── Searchbar
│   │   ├── SectionList
│   │   └── Vote
│   ├── containers
│   │   └── App
│   ├── index.html
│   ├── pages
│   │   ├── Article
│   │   ├── Section
│   │   └── Support
│   ├── reducers.js
│   ├── router.js
│   ├── store.js
│   └── views.js
├── config
│   ├── webpack.config.base.babel.js
│   ├── webpack.config.development.babel.js
│   └── webpack.config.production.babel.js
├── package.json
└── yarn.lock

webpack.config.base.babel.js

import webpack, { IgnorePlugin } from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { resolve, join } from 'path';

// dotenv
const Dotenv = require('dotenv-webpack');

const NODE_ENV = process.env.NODE_ENV;

const env = {
    production: NODE_ENV === 'production',
    staging: NODE_ENV === 'staging',
    test: NODE_ENV === 'test',
    development: NODE_ENV === 'development' || typeof NODE_ENV === 'undefined'
};

Object.assign(env, {
    build: (env.production || env.staging)
});

export default {
    output: {
        path: join(process.cwd(), '/dist'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    resolve: {
        modules: [
            'node_modules',
            'app',
            join(__dirname, '')
        ],
        extensions: ['.html', '.json', '.scss', '.js', '.jsx'],
        alias: {
            normalize: join(process.cwd(), '/node_modules/normalize-css/normalize.css')
        }
    },
    module: {
        noParse: /\.min\.js/,
        rules: [
            {
                test: /\.json($|\?)/,
                use: 'json-loader',
                enforce: 'pre'
            },
            {
                test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
                use: 'url-loader?prefix=font/&limit=10000'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: 'file-loader',
                options: {
                    context: '/',
                    name: '[name].[ext]'
                },
            }
        ]
    },
    plugins: ([
        new HtmlWebpackPlugin({
            title: 'company',
            template: join(process.cwd(), '/app/index.html')
        }),
        new Dotenv(),
        new webpack.DefinePlugin({
            __DEV__: env.development,
            __STAGING__: env.staging,
            __PRODUCTION__: env.production,
            __CURRENT_ENV__: '\'' + (NODE_ENV) + '\''
        })
    ]),
    devServer: {}
};

webpack.config.development.babel.js

import webpack, { IgnorePlugin } from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { resolve, join } from 'path';

import config from './webpack.config.base.babel.js';

if (process.env.NODE_ENV !== 'test') {
    config.entry = [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        join(process.cwd(), '/app/') + 'app.js'
    ];
}

config.devtool = '#source-map';

config.module.rules = config.module.rules.concat([
    {
        enforce: 'pre',
        test: /\.jsx?$/,
        exclude: resolve(__dirname, 'app', 'node_modules'),
        use: 'source-map-loader'
    },
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
    },
    {
        test: /\.css?$/,
        use: [
            'style-loader',
            'css-loader'
        ]
    },
    {
        test: /\.(sass|scss)$/,
        use: [
            'style-loader',
            'css-loader',
            'sass-loader'
        ]
    }
]);

config.devServer = {
    contentBase: './dist',
    host: '0.0.0.0',
    port: 8080,
    stats: {
        version: false,
        chunks: false,
        assets: true,
        colors: true,
        children: true
    }
};

export default config;

Solution 1

It turns out Sketch.app exported the files with a space before the filename.

Solution 2

From your error log, can be seen that webpack is trying to resolve your image require from /Img folder.

Module not found: Error: Can't resolve 'assets/img/coin.png' in '/Users/rublev/dev/company/support/app/components/Img'

Your webpack configuration is telling Webpack to resolve the requires paths trying the following paths (in order):

• node_modules
• app
• The folder where the required is executed

Since the path assets/img/coin.png couldn't be resolved neither in node_modules nor in app directory, Webpack tried to resolve from the last fallback directory and casted the not found error from there.

Is coin.png available in app/assets/img/?

Comments

[eveo]

Yes, coin.png is right there. I've ls'd the directory many times to ensure I'm not tripping. It opens fine in my editor, Preview, Photoshop, etc. I've opted rather to make this app text only thus eliminating this problem entirely.

[Andrea Carraro]

Fine! This was precisely the conclusion of my answer. Would you like to flag it as the accepted one? This is S.O., after all :)