webpack error occurs on css files

[MarinaUI]

I have configured my webpack config. And after adding pannellium-react I get the error: ERROR in ./node_modules/pannellum-react/es/pannellum/css/pannellum.css (./node_modules/css-loader??ref--5-1!./node_modules/pannellum-react/es/pannellum/css/pannellum.css) Module not found: Error: Can't resolve 'img/sprites.svg' in '/node_modules/pannellum-react/es/pannellum/css' @ ./node_modules/pannellum-react/es/pannellum/css/pannellum.css (./node_modules/css-loader??ref--5-1!./node_modules/pannellum-react/es/pannellum/css/pannellum.css) 7:1130-1156 @ ./node_modules/pannellum-react/es/pannellum/css/pannellum.css @ ./node_modules/pannellum-react/es/elements/Pannellum.js @ ./node_modules/pannellum-react/es/index.js Is something wrong with my config file here is a part of code: rules: [ { test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader'] }, { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true, camelCase: true, sourceMap: true } } ] }, { test: /\.scss$/, use: [ "style-loader", // creates style nodes from JS strings "css-loader", // translates CSS into CommonJS "sass-loader" // compiles Sass to CSS, using Node Sass by default ] },

[farminf]

Do you have svg file loader config in loaders? example like:

{ test: /\.(gif|png|jpe?g|svg)$/i, loaders: ['file-loader?hash=sha512&digest=hex&name=[hash].[ext]','image-webpack-loader'] },

[MrSandManSy]

problem： reason：when I ues "npm install pannellum-react" to my project and "npm start", the problems appear. this is my webpack config： module: { loaders: [ { test: /.css$/, loaders: ['style', 'css?modules&camelCase'], include: PATHS.app }, {
test: /.json$/, loader: 'json-loader'
}, { test: /.jsx?$/, loader: 'babel', include: PATHS.app } // , // { // test: /.(gif|png|jpe?g|svg)$/i, // loaders: ['file-loader?hash=sha512&digest=hex&name=[hash].[ext]','image-webpack-loader'] // } ] }

[farminf]

Sorry for late reply... so I've configure webpack (4) from zero (usually i use create-react-app so I don't go into webpack details) and I'm able to run the component without any issue:

webpack config file:

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // webpack@1.x
              disable: true, // webpack@2.x and newer
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

and my dependencies in package.json:

"devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^4.5.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "style-loader": "^0.23.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "pannellum-react": "^1.0.1"
  }

and my .babelrc file:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

[MrSandManSy]

@farminf Ah thanks for reply.next problems,I use it as component in container, when i setState int container, react-pannellum will get render.The next are code.

[farminf]

@MrSandManSy I didn't understand well the issue. Is that when you change the state in the component the image gets re-render? can you screenshot the whole component code?

[MrSandManSy]

@farminf It seems like re-render.

When i click 'Hotspot',the component show 'Loading'.

Below is ：

When i click button 'Company abstract',the component show 'Loading'. Below is ：

Below is code：

class ImageComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            initImg: initImg,
            companyVisible: false,
         }
     }

     changeImg = () => {
         this.setState({
             initImg: alma,
         })
      }

      handleOk = (e) => {
          this.setState({
              companyVisible: false,
          });
      }

      handleCancel = (e) => {
          this.setState({
              companyVisible: false,
          });
      }

      openCompany = () => {
          this.setState({
              companyVisible: true,
          })
      }

      render() {
          return (
              <div>
                 <Pannellum
                     width="100%"
                     height={document.documentElement.clientHeight}
                     image={this.state.initImg}
                     pitch={10}
                     yaw={180}
                     hfov={100}
                     autoRotate={6}
                     compass={true}
                     autoLoad={true}
                     orientationOnByDefault={true}
                     keyboardZoom={false}
                     mouseZoom={true}
                     draggable={true}
                     showFullscreenCtrl={false}
                     showZoomCtrl={false}
                     showControls={false}
                     hotspotDebug={false}
                 >
                    <Pannellum.Hotspot
                        type="custom"
                       pitch={0}
                       yaw={150}
                       handleClick={(evt, args) => this.changeImg()}
                     />

                </Pannellum>

               <div style={{ position: 'absolute', right: '150px', top: '40px', }}>
                   <Button onClick={() => this.openCompany()}>Company abstract</Button>
                </div>

                <Modal visible={this.state.companyVisible} style={{ position: 'absolute', left: '50%', top: '50%', }} onOk={this.handleOk} onCancel={this.handleCancel}>
                    <p style={{ position: 'center' }}>Fasion Company</p>
                    <p>...</p>
                    <p>...</p>
                  </Modal>

              </div>
           )
       }

    }

function mapStateToProps(state) {
  const { setRotate } = state;
  return {
      imgRotate: setRotate.imgRotate,
  }
}

export default connect(mapStateToProps)(ImageComponent);

analyse：I guess when use 'this.setState({ ... })', pannellum will get re-render,even if the state is not belong to pannellum.This situation is not good in full view navigation.Is there any way to remove 're-render'?

[farminf]

@MrSandManSy Thanks for explanation. I got the point and yes that is the issue. I need to refactor some code on the component update since - not only the states that are not related to pannellum component - ,but also by updating some of the pannellum props it shouldn't re-render the whole component. In next days I fix it and release new version. Thanks again for pointing out this issue

[MrSandManSy]

@farminf Ok,Thanks for reply in time.Your are welcome.

[farminf]

I'm closing this and opened #35 for the issue