当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Webpack can't load packages from node_modules

问题描述:

I am starting app with react-slingshot start kit. I wanted to load from node_modules normalize.css and react-toolbox but I am getting these errors during the build:

ERROR in ./~/normalize.css/normalize.css

Module parse failed: /home/jules/projects/tourbnb-frontend/node_modules/normalize.css/normalize.css Line 9: Unexpected token {

You may need an appropriate loader to handle this file type.

| */

|

| html {

| font-family: sans-serif; /* 1 */

| -ms-text-size-adjust: 100%; /* 2 */

@ ./src/index.js 29:0-24

ERROR in ./~/react-toolbox/lib/app/App.js

Module not found: Error: Cannot resolve 'file' or 'directory' ./style in /home/jules/projects/tourbnb-frontend/node_modules/react-toolbox/lib/app

@ ./~/react-toolbox/lib/app/App.js 11:13-31

This is my index.js:

import React from 'react';

import {render} from 'react-dom';

import { Provider } from 'react-redux';

import ToolboxApp from 'react-toolbox/lib/app';

import App from './containers/App';

import configureStore from './store/configureStore';

import './styles/styles.scss'; //Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page.

import 'normalize.css';

const store = configureStore();

render(

<Provider store={store}>

<ToolboxApp>

<App />

</ToolboxApp>

</Provider>, document.getElementById('app')

);

And this is my webpack.config.js

// For info about this file refer to webpack and webpack-hot-middleware documentation

// Rather than having hard coded webpack.config.js for each environment, this

// file generates a webpack config for the environment passed to the getConfig method.

import webpack from 'webpack';

import path from 'path';

import ExtractTextPlugin from 'extract-text-webpack-plugin';

const developmentEnvironment = 'development' ;

const productionEnvironment = 'production';

const testEnvironment = 'test';

const getPlugins = function (env) {

const GLOBALS = {

'process.env.NODE_ENV': JSON.stringify(env),

__DEV__: env === developmentEnvironment

};

const plugins = [

new webpack.optimize.OccurenceOrderPlugin(),

new webpack.DefinePlugin(GLOBALS) //Tells React to build in prod mode. https://facebook.github.io/react/downloads.html

];

switch (env) {

case productionEnvironment:

plugins.push(new ExtractTextPlugin('styles.css'));

plugins.push(new webpack.optimize.DedupePlugin());

plugins.push(new webpack.optimize.UglifyJsPlugin());

break;

case developmentEnvironment:

plugins.push(new webpack.HotModuleReplacementPlugin());

plugins.push(new webpack.NoErrorsPlugin());

break;

}

return plugins;

};

const getEntry = function (env) {

const entry = [];

if (env === developmentEnvironment ) { // only want hot reloading when in dev.

entry.push('webpack-hot-middleware/client');

}

entry.push('./src/index');

return entry;

};

const getLoaders = function (env) {

const loaders = [{ test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel', 'eslint'] }];

if (env === productionEnvironment ) {

// generate separate physical stylesheet for production build using ExtractTextPlugin. This provides separate caching and avoids a flash of unstyled content on load.

loaders.push({

test: /(\.css|\.scss)$/,

include: path.join(__dirname, 'src'),

loader: ExtractTextPlugin.extract("css?sourceMap!sass?sourceMap")

});

} else {

loaders.push({

test: /(\.css|\.scss)$/,

include: path.join(__dirname, 'src'),

loaders: ['style', 'css?sourceMap', 'sass?sourceMap']

});

}

return loaders;

};

function getConfig(env) {

return {

debug: true,

devtool: env === productionEnvironment ? 'source-map' : 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool

noInfo: true, // set to false to see a list of every file being bundled.

entry: getEntry(env),

target: env === testEnvironment ? 'node' : 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test

output: {

path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.

publicPath: '',

filename: 'bundle.js'

},

plugins: getPlugins(env),

module: {

loaders: getLoaders(env)

}

};

}

export default getConfig;

What might be the problem? Thanks.

网友答案:

The problem was that include in loaders excluded node_modules. I just omitted the include and it was fine:

loaders.push({
  test: /(\.css|\.scss)$/,
  loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
});
网友答案:

Hmm, maybe you have to add .css to your resolved extensions in the webpack config. Something like this maybe:
resolve: { extensions: ['', '.js', '.css'] }

See this page in the webpack docs for more info.

分享给朋友:
您可能感兴趣的文章:
随机阅读: