Module not found: Error: Can't resolve './src/Idle'

[Ashirogi-Muto]

I am getting this error while configuring it in main.js file. If I change the extension of the include in the index.js file from import IdleView from './src/Idle'; to import IdleView from './src/Idle.vue'; it works fine, but after changing this the build command fails. Any ideas as to why this is happening?

[hugohil]

Hi!

Could you provide the content of you webpack config please ? Looks a lot like a webpack issue.

[langerc]

Here are all the files - the source is the cli

I found multiple users with the same or a simmilar problem but no solution yet.

build.zip

[Ashirogi-Muto]

webpack:-

var path = require('path')
var webpack = require('webpack')
const friendlyErrorsPlugin = require('friendly-errors-webpack-plugin');


module.exports = {
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		publicPath: '/dist/',
		filename: 'build.js'
	},
	module: {
		rules: [
			{
				test: /\.vue$/,
				loader: 'vue-loader',
				options: {
					loaders: {
						css: 'vue-style-loader!css-loader',
						scss: 'vue-style-loader!css-loader!sass-loader'
					}
				}
			},
			{
				test: /\.css$/,
				use: ['vue-style-loader', 'css-loader']
			},
			{
				test: /\.scss$/,
				use: ['vue-style-loader', 'css-loader', 'sass-loader']
			},
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			},
			{
				test: /\.(png|jpg|gif|svg)$/,
				loader: 'file-loader',
				options: {
					name: '[name].[ext]?[hash]'
				}
			}
		]
	}, plugins: [
		new friendlyErrorsPlugin()
	],
	resolve: {
		alias: {
			'vue$': 'vue/dist/vue.esm.js'
		}
	},
	devServer: {
		historyApiFallback: true,
		noInfo: true
	},
	performance: {
		hints: false
	},
	devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
	module.exports.devtool = '#source-map'
	// http://vue-loader.vuejs.org/en/workflow/production.html
	module.exports.plugins = (module.exports.plugins || []).concat([
		new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: '"production"'
			}
		}),
		new webpack.optimize.UglifyJsPlugin({
			sourceMap: true,
			compress: {
				warnings: false
			}
		}),
		new webpack.LoaderOptionsPlugin({
			minimize: true
		})
	])
}

[hugohil]

Can you try to add

extensions: ['.js', '.vue']

in the resolve property please ?

[langerc]

First- Thanks a lot!!
I added it to the webpack.main.js since it was present in the others already.

error does not change:
idle-vue/index.js - error line:3 unexpected token import.

[hugohil]

Well, seems like error changed, since it's not related to file extension but with import statement, thus probably ES6/Babel. What Babel preset do you use ?

[langerc]

Well i hope this is what you are looking for

{
  "comments": false,
  "env": {
    "main": {
      "presets": [
        ["env", {
          "targets": { "node": 7 }
        }],
        "stage-0"
      ]
    },
    "renderer": {
      "presets": [
        ["env", {
          "modules": false
        }],
        "stage-0"
      ]
    },
    "web": {
      "presets": [
        ["env", {
          "modules": false
        }],
        "stage-0"
      ]
    }
  },
  "plugins": ["transform-runtime"]
}

[hugohil]

Can you try to remove the { "modules": false }] property please ?
Also, what target/device/browser are you building for ?

[langerc]

same thing .. i use electron.

[hugohil]

Which version ?

[langerc]

1.7.5

[hugohil]

Please update idle-vue to version 2.0.2, it is fixed now.

[rajeshwar-fissionhq]

It's not fixed yet.

[hugohil]

Thanks @rajeshwar-fissionhq.
It should be fixed with 2.0.3. Sorry for that.